이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS, float
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Media Query를 이용해 반응형 홈페이지 만들기 이 포스팅은 PC로 작성
gogogameboy.tistory.com
지난 포스트에서 float 속성의 기초를 공부했습니다.
CSS, Holy Grail Layout
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, flex-basis와 grow 그리고 shrink 이 포스팅은 PC로 작성되었습니다. 모바
gogogameboy.tistory.com
그리고 바로 며칠 전에는 플렉스 Flex 속성을 이용해서 가장 이상적인 웹사이트 레이아웃이라는 Holy Grail Layout을 만드는 방법을 공부했습니다.
이번에는 float 속성을 이용해서 Holy Grail Layout을 만드는 법을 공부해보겠습니다.
float를 이용해서 레이아웃을 만드는 것보다 이전에 공부한 flex를 이용해서 레이아웃을 만드는게 더 쉽고 깔끔합니다.
하지만 flex 이전에는 float를 이용해서 레이아웃을 잡기도 했고, flex가 동작하지 않는 브라우저도 있으니 float를 사용하는 경우도 있다고 합니다.
하지만 flex가 빠른 속도로 채택되어지고 있는 추세라고 하는군요.
float Holy Grail Layout
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
*{ } 선택자는 전에도 한번 나왔었는데, 이 웹페이지의 모든 엘리먼트를 선택하는 선택자입니다.
엘리먼트의 테투리까지 엘리먼트 크기에 반영하는 현상을 없애기 위해서 box-sizing: border-box; 라는 코드를 넣어줍니다.
인터넷 창이 너무 작아지면 레이아웃이 깨지는 현상을 방지하기 위해 container의 크기를 width:540px; 로 지정해주었습니다. (메뉴 120px과 본문 300px, 광고 120px을 더한 값입니다.)
레이아웃이 화면 가운데에 위치하게 하기 위해서 .container{ } 안에 margin: auto; 를 넣어줍니다.
nav{ }의 float를 left로 줘서 왼쪽으로 고정시킵니다.
article{ } 에서는 width 값을 지정해주지 않으면 article이 nav의 밑으로 가버리기 때문에 적당한 값의 width 값을 넣어줍니다.
이상, 플렉스보다 더 복잡하고 비효율적이지만 일단은 float로 Holy Grail Layout을 잡는 법을 공부해봤습니다.
참고로 위의 생활코딩 강의 영상은 2016년의 영상이니까.. 지금은 대부분의 브라우저들이 flex를 지원하고 있기를 바랍니다.
다음 포스트
CSS 배경 색과 이미지
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, float 속성을 이용해서 만드는 Holy Grail Layout 이 포스팅은 PC로 작성
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 이미지나 폰트에 필터 적용하기 (0) | 2021.01.09 |
|---|---|
| CSS 배경 색과 이미지 (0) | 2021.01.08 |
| CSS, float (0) | 2021.01.07 |
| CSS, Media Query를 이용해 반응형 홈페이지 만들기 (0) | 2021.01.06 |
| CSS 반응형 웹을 만들기 위한 Media Query 기초 (0) | 2021.01.06 |
댓글