7.레이아웃
CSS에는 작성한 HTML 태그들을 원하는 화면의 위치에 배치하는 방법으로 크게 3가지가 있으며, 번호가 높아질수록 가장 최근에 등장한 방식
- Float
- Flexbox
- Grid
1. Float Layout
가장 초기에 사용했던 방식, float 속성을 사용하여 레이아웃을 배치함
float 속성 자체의 기본 용도는 단순히 이미지 등을 좌측, 우측 등으로 배치하기 위한 역할이었으나, 사용 방법이 응용되어 레이아웃 배치에까지 사용되게 되었음
Float를 사용하면 요소들을 왼쪽이나 오른쪽으로 부유(Floating)시켜서 다른 요소들과 겹치지 않게 할 수 있음
index.html
<div class="container">
<div class="box left"></div>
<div class="box right"></div>
</div>style.css
.box {
width: 50%;
height: 200px;
}
.left {
background-color: red;
float: left;
}
.right {
background-color: blue;
float: right;
}
.container {
overflow: hidden; /* 부모 요소를 자식 요소로 인한 영향에서 보호하기 위해 overflow 속성 사용 */
}2. Flexbox Layout
두 번째로 나온 레이아웃 방식으로, 행과 열로 요소를 정렬하는 방식
상위 요소에 display: flex 속성을 적용하여 Flexbox layout을 사용할 수 있게됨
float 레이아웃과 다르게, display: flex만 적용해도 하위 요소들을 가로로 정렬할 수 있음
index.html
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>style.css
.container {
display: flex;
justify-content: center; /* 가로 정렬 */
align-items: center; /* 세로 정렬 */
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}💡
Tip
그 외 참고 사이트
3. Grid Layout
가장 최근에 나온 방식으로, Flexbox보다 더 다양한 방식으로 레이아웃을 작성할 수 있음
상위 요소에 display:grid를 적용하면, 하위 요소들을 그리드의 행과 열에 배치 가능
index.html
<div class="container">
<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
<div class="box d"></div>
</div>style.css
.container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 두 개의 열 생성 */
grid-template-rows: repeat(2, 200px); /* 두 개의 행 생성 */
gap: 10px; /* 그리드 아이템 사이의 간격 설정 */
}
.box {
background-color: red;
}
.a {
grid-column: 1 / 2; /* 1행 1열 */
grid-row: 1 / 2;
}
.b {
grid-column: 2 / 3; /* 1행 2열 */
grid-row: 1 / 2;
}
.c {
grid-column: 1 / 2; /* 2행 1열 */
grid-row: 2 / 3;
}
.d {
grid-column: 2 / 3; /* 2행 2열 */
grid-row: 2 / 3;
}💡
Tip
그 외 참고 사이트
Last updated on