css3
-
[CSS Grid] 2. Hello World CSS Grid프로그래밍/HTML5 Web 2018. 7. 14. 17:31
코스이름은 Your First Grid 인데 너의 첫 그리드 라고 제목짓긴 좀 그래서 그냥 Hello World라고 지었다. 이번 강의는 매우 심플하다. Grid을 사용해서 행과 열 모양을 만드는 강좌이다. .container{ display: grid; grid-template-columns: 100px auto; grid-template-rows: 50px 50px 200px; grid-gap: 3px; } 1 2 3 4 5 6 아래와 같은 코드인데 완성시키면 아래와 같은 모양으로 완성이 된다. 일단 내가 이해한바로는 display 값에서 grid를 사용하겠다고 선언하고, 행과 열에서 px을 지정해주는데 auto의 경우에는 남는 비율을 전부 차지하는것 같았다. grid-gap의 경우에는 사이의 빈공간..
-
[CSS Grid] 1. 코스 소개프로그래밍/HTML5 Web 2018. 7. 14. 17:14
CSS Grid을 공부해야하는 이유는 무엇인가? 1. 2차원의 레이아웃을 쉽게 개발이 가능하다2. 간단한 마크업3. 유연함4. 프레임워크 스킵5. 브라우저 지원 이러한 장점들이 있다고한다. 나는 개인적으로 다른 부분은 모르겠고 어떤 프레임워크를 추가하지 않다고 된다는 점에 끌렸다. 일단 코드를 살펴보자 CSS GRID HEADER MENU CONTENT FOOTER BOOTSTRAP HEADER MENU CONTENT FOOTER CSS Grid을 사용한 방법과 Bootstrap을 사용한 예제를 보여주고있다. 설명하길 CSS Grid보다 Bootstrap에서의 클래스 네임이 훨씬 더 지저분하고 알아보기 어렵다고 설명하고 있다. 참고로 결과물은 동일하다. 이제 본격적으로 CSS Grid에 대해서 알아보도록..
-
[HTML5 & CSS3] Chapter 2. HTML5 태그 기본프로그래밍/HTML5 Web 2014. 4. 8. 15:57
이 포스팅은 모던 웹 디자인을 위한 HTML5+CSS3 입문 (한빛미디어)의 내용을 요약한 것으로 저작권법상 소스코드는 기입하지 않습니다. 개인적인 공부를 위한 요약이므로 상세하게 공부하기 위해서는 여기를 눌러 책을 구입하는것을 추천드립니다. - HTML5의 페이지는 사용자에게 보이는 뷰와 사용자에 보이지 않는 코드로 나누어진다. - HTML5의 태그들에는 종류가 아주 다양하다. 외울 생각을 하지 말고 필요한게 있으면 그 요소가 떠오를 수 있을 정도의 공부만 필요하다. 또한 공부를 목적으로 최대한 빨리 정리하는것에 목표를 두고 있으므로 소스 코드 작성에 시간을 많이 투자 하지 않도록 하겠다. - 태그들은 여기를 눌러 생활코딩 홈페이지의 HTML사전을 참고하는것이 좋다.- 최근의 웹 개발도구에서는 자동 완..
-
[HTML5 & CSS3] Chapter 1. HTML5 개요프로그래밍/HTML5 Web 2014. 4. 8. 01:52
이 포스팅은 모던 웹 디자인을 위한 HTML5+CSS3 입문 (한빛미디어)의 내용을 요약한 것으로 저작권법상 소스코드는 기입하지 않습니다. 개인적인 공부를 위한 요약이므로 상세하게 공부하기 위해서는 여기를 눌러 책을 구입하는것을 추천드립니다. Chapter 1에 들어가기에 앞서 HTML5을 공부하는 것은 다음 세가지를 공부하겠다는 이야기입니다.1. HTML5 기본 태그2. CSS3 선택자 및 속성3. 자바스크립트 특히 이 책에서는 자바스크립트를 다루지 않으므로 자바스크립트 수업을 병행하는것을 추천드립니다.현재 진행하고 있는 페이스북 스터디 그룹(클릭하시면 연결됩니다)에 동참하여 다른 분들과 함께 자바스크립트를 공부하실수 있습니다. 또는 생활코딩 홈페이지에서 이고잉님께서 자바스크립트 강의를 제작중이십니다...