이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS, flex-basis와 grow 그리고 shrink
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 웹사이트 레이아웃 기초 이 포스팅은 PC로 작성되었습니다. 모바일
gogogameboy.tistory.com
이번에 배울 내용은 지금까지 배워온 모든 것들을 총망라해서 가장 이상적인 웹페이지의 레이아웃을 잡는 방법을 배워보겠습니다.
가장 이상적인 웹페이지 레이아웃
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
class="container"의 선택자인 .container{ } 에서는 정렬을 위해 display: flex;를 해줍니다.
기본값은 row이기 때문에 flex-direction을 column으로 바꿔줍니다.
header{ } 에서는 헤더의 하단에 줄을 그어주기 위해 border-bottom:1px solid gray;
또, 헤더가 너무 좌측에 붙어있으니 padding-left:20px; 으로 20픽셀만큼 여백을 줍니다.
footer{ } 에서는 푸터의 상단에 줄을 그어주기 위해 border-top:1px solid gray; 를 써주고,
푸터도 너무 좌측 상단에 붙어있으니 20픽셀만큼 여백을 줍니다.
그리고 가운데로 정렬을 위해 text-align:center; 도 넣어줍니다.
.content{ } 에서는 display:flex; 로 content(메뉴, 메인, 광고)를 가로 정렬해줍니다.
.content nav{ } 와 .content aside{ } 는 각각 우측과 좌측에 1px solid gray의 줄을 그어줍니다.
nav, aside{ } 는 flex-basis: 150px; 로 메뉴와 광고의 가로 사이즈를 150픽셀로 맞춥니다.
그리고 flex-shrink: 0 을 넣음으로써 인터넷 창 크기가 축소가 돼도 메뉴와 광고는 작아지지 않게 합니다.
main{ } 에도 padding:10px; 로 여백을 줍니다.
다음 포스트
CSS, Flex 기타 속성들
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Holy Grail Layout 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 신문을 보는 것 같은 레이아웃 (0) | 2021.01.05 |
|---|---|
| CSS, Flex 기타 속성들 (0) | 2021.01.04 |
| CSS, flex-basis와 grow 그리고 shrink (0) | 2021.01.03 |
| CSS 웹사이트 레이아웃 기초 (0) | 2021.01.03 |
| CSS 포지션 fixed (0) | 2021.01.02 |
댓글