<body>
<div class="container">
<header class="header"></header>
<aside class="sidebar"></aside>
<section class="main"></section>
<footer class="footer"></footer>
</div>
</body>
위와 같이 아주 간단한 구조를 가진 레이아웃을 만들어보기로 하자.
사람에 따라 생각하는 위치와 크기에 약간씩 차이는 있겠지만 시멘틱 태그(Semantic tag)를 알고 있다면 보자마자 대충 어떤 형태인지 떠오를 것이다. 모른다면 여기서 보고 오자.
먼저 float을 활용하여 구현해보자.
.container {
width: 650px;
background-color: wheat;
}
.header {
width: 100%;
height: 100px;
background-color: blue;
}
.sidebar {
width: 20%;
height: 250px;
background-color: burlywood;
float: left;
}
.main {
width: 80%;
height: 250px;
background-color: palevioletred;
float: right;
}
.footer {
width: 100%;
height: 100px;
background-color: green;
clear: both;
}
float은 원래 요소의 흐름과 전혀 관계 없이 특정 요소의 위치를 강제할 때 사용한다.
flex나 grid를 사용하면 되지 왜 이런 걸 쓰냐? 회사에서 float 쓰는데 flex나 grid로 뜯어 고칠 수는 없기 때문이다.
아무튼 float이라는 건 설명이 전혀 필요없을 정도로 간단하다.
그래도 float 명령어로 사용할 수 있는 걸 한 번 알아보자.
| float : none; | 부동 상태로 지정하지 않는다. |
| float : left; | 흐름을 무시하고 좌측에 부동 상태로 지정한다. |
| float : right; | 흐름을 무시하고 우측에 부동 상태로 지정한다. |
| float : inline-start; | 블럭의 시작점에 부동 상태로 지정한다. |
| float : inline-end; | 블럭의 끝에 부동 상태로 지정한다. |
정말 정말 정말 쉽다.
다만 float이라는 건 말 그대로 흐름을 무시하고 위에다 덧붙이는 행위나 다름 없기 때문에 그 밑에 다른 블럭 요소를 나열하려고 하면 float 처리된 블럭의 뒤에 위치하게 된다.
따라서 float처리된 블럭 요소의 아래에 다른 블럭 요소를 두고 싶다면 clear를 이용하여야 한다.
위에서 나열한 float 명령어에 float을 clear로 대체하면 되고 float left와 float right를 모두 무시하고 그 밑으로 나열하려면 clear : both; 를 입력하면 된다.
다음은 구시대의 유물이면서 심지어 float만큼 쉽고 간편하지도 않은 inline-block을 활용해서 레이아웃을 만들어보자.
.container {
width: 650px;
background-color: wheat;
}
.header {
width: 100%;
height: 100px;
background-color: blue;
}
.sidebar {
width: 20%;
height: 250px;
background-color: burlywood;
display: inline-block;
}
.main {
width: 80%;
height: 250px;
background-color: palevioletred;
display: inline-block;
}
.footer {
width: 100%;
height: 100px;
background-color: green;
}
개판이다.
이렇게 된 이유가 무엇일까?
inline-block을 사용하면 html 작성 시 블럭들 사이에 띄어쓰기를 한 것까지 공백을 주기 때문에 여백이 생겨서 main이 밑으로 내려와버린 것이다.
이를 해결하려면 여러 방법이 있지만 일단 부모인 container에게 font-size: 0;이라는 속성을 줘서 공백의 크기까지 0으로 만들어 버리는 것으로 해결해보자.
공백이 없어졌음에도 inline-block 속성을 줬는데 main과 sidebar가 어긋난채로 정렬되어 있다.
이것은 글자 밑에 존재하는 baseline 때문이다.
사실 이 baseline은 레이아웃보다도 이미지 파일 옆에 글을 적을 때 더 문제가 되는 부분이지만 지금은 레이아웃 정렬이 우선이다.
CSS에서 .main 클래스에 vertical-align : top;을 입력해주자.
캡처를 잘못해서 너무 지저분하지만 그냥 넘어가자.
vertical-aling:top;속성을 주니 바로 해결되었다.
기존에는 text 아래에 위치한 baseline을 기준으로 정렬하였으나 vertical-align:top;속성으로 base라인 윗부분을 기준으로 정렬한 것이다.
vertical-align을 이용한 baseline 정렬 방법은 아주 다양하니 궁금하다면 여기를 참고하도록 하자.
'Language & Framework > HTML CSS' 카테고리의 다른 글
| SCSS(SASS) 기초 활용법과 반복문 활용하여 부트스트랩의 row, col 구현하기. 핵심만 간단하게. (0) | 2022.02.12 |
|---|---|
| 구글 폰트? TTF? WOFF? 웹 폰트 적용하는 방법, 그림으로 간단하게 (0) | 2022.02.05 |
| 시맨틱 태그(Semantic Tag)는 왜 필요하고 어떻게 사용할까? 핵심만 간단하게. (0) | 2022.01.05 |
| CSS 반응형 단위의 종류와 사용. %와 vw, em과 rem의 차이점. 핵심만 간단히. (0) | 2022.01.02 |
| Flexbox Froggy 정답 및 풀이 복습 (0) | 2021.12.26 |
