CSS Layout

CSS에는 작성한 HTML 태그들을 원하는 화면의 위치에 배치하는 방법으로 크게 3가지가 있으며.

번호가 클 수록 가장 최근에 등장한 방식이다.

 

1. Float
2. Flexbox
3. Grid

1. Float Layout

가장 초기에 사용했던 방식, float 속성을 사용하여 레이아웃을 배치한다.

float 속성 자체의 기본 용도는 단순히 이미지 등을 좌측, 우측 등으로 배치하기 위한

역할이었으나 사용 방법이 응용되어 레이아웃 배치에까지 사용되게 되었다.

 

Float을 사용하면 요소들을 왼쪽이나 오른쪽으로 부유(Floating)시켜서 다른 요소들과 겹치지 않게 할 수 있다.

 

<div class="container">
  <div class="box left"></div>
  <div class="box right"></div>
</div>

.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만 적용해도 하위 요소들을 가로로 정령할 수 있다.

 

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: flex;
  justify-content: center; /* 가로 정렬 */
  align-items: center; /* 세로 정렬 */
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
}

 

3. Grid Layout

가장 최근에 나온 방식으로, Flexbox보다 더 다양한 방식으로 레이아웃을 작성할 수 있다.

 

상위 요소에 display:gird를 적용하면, 하위 요소들을 그리드의 행과 열에 배치가능

 

<div class="container">
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
</div>

.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;
}