[CSS] 레이아웃 배치 유형 3가지 알아보기

레이아웃(Layout)

웹을 구성하는 요소들을 보다 알아보기 쉽게 효과적으로 배치시켜주는 작업입니다.

---

레이아웃의 3가지 유형

레이아웃에는 Float, Flex, Grid라는 총 3가지 유형(방법)이 있습니다. 사용 방법은 아래와 같으며 1번의 경우 정렬하고자 하는 요소에, 2·3번의 경우는 부모 태그에 적습니다.

1. float: left;
2. display: flex;
3. display: grid;

---

01. Float

Float란 '띄우다'라는 의미를 지니며 레이아웃의 틀을 잡을 때 사용됩니다. 레이아웃의 틀을 잡을 때에는 <div> 태그가 사용됩니다. 하지만 해당 태그는 block 형식이기 때문에 요소들이 가로로 나란히 정렬될 수 없습니다.

float: left;

이때, 나란히 정렬해주고자 하는 요소의 CSS 속성에 위와 같이 float: left;를 추가하여 block 형식을 해제시켜 세로로 정렬 되어 있던 요소들을 가로로 나란히 정렬하는 것이 가능합니다.

clear: both;

단, 이 속성을 쓰게 될 경우 속성을 썼던 아래의 요소가 보이지 않게 되는데, 이는 그 아래의 요소의 height 값이 0이 되어버리는 버그 때문입니다. 보이지 않는 해당 요소에 위와 같은 CSS 속성을 쓰면 해결됩니다.

반응형으로 만들 경우 wrap 속성의 width만을 1200px로 고정시킨 후 나머지 속성의 width 값은 백분율로 환산시켜야 하며 미디어 쿼리에서 노트북 전용(max-width: 1300px), 태블릿 PC 전용(768px), 스마트폰 전용(480px) 사이즈를 만듭니다.

결과

clear: both;를 쓰는 대신, float를 적용한 요소의 부모 요소에 overflow: hidden;을 적용하거나 3번째처럼 clearfix를 쓰는 방법이 있습니다. clearfix 사용법은 위의 코드펜 3번째 CSS에 적혀있습니다.

02. Flex

레이아웃을 정렬하는 유형 중 하나로 기존의 Float 방식보다 더 쉽고 간단히 사용 할 수 있습니다. 단, 마이크로소프트社의 인터넷 익스플로어에서는 사용할 수 없습니다.

display: flex;
flex-wrap: wrap;

위의 내용을 자식 태그를 감싸고 있는 부모 요소에게만 적용해주시면 가로로 나란히 정렬 가능합니다.

결과

03. Grid

table처럼 레이아웃을 잡을 수 있는 방법 중 하나입니다. 사용 방법은 아래의 코드들을 부모 요소에 넣는 것입니다.

display: grid;
grid-template-areas:
    "header header"
    "nav nav"
    "aside section"
    "footer footer";
grid-template-columns: 30% 70%;
grid-template-rows: 100px 100px 780px 100px;

display: grid;로 Grid 사용을 활성화하며, grid-template-areas에서 요소를 배치하고, grid-template-columns에서는 요소 배치 가로 길이를, grid-template-rows에서 는 세로 길이를 지정해줍니다.

#aside {
    grid-area: aside;
}

마지막으로 부모 요소의 grid-template-areas에서 언급된 이름을 자식 요소의 grid-area 속성에 똑같이 적어 연결시켜주는 작업이 필요합니다.

결과