[웹 디자인] 12일차: CSS 레이아웃 기초

CSS 레이아웃이란?

CSS 레이아웃은 웹 페이지의 요소들을 배치하고 정렬하는 방법을 정의합니다. 효과적인 레이아웃은 웹 페이지의 가독성과 사용자 경험을 향상시킵니다. CSS에는 다양한 레이아웃 기법이 있으며, 이를 통해 복잡한 웹 페이지 레이아웃을 구현할 수 있습니다.

CSS 레이아웃 기법

Display 속성

• display: 요소의 표시 방식을 지정합니다.
  • block: 블록 레벨 요소로, 항상 새로운 줄에서 시작하며 전체 너비를 차지합니다.
  • inline: 인라인 레벨 요소로, 새로운 줄에서 시작하지 않으며 콘텐츠의 너비만큼 차지합니다.
  • inline-block: 인라인 레벨 요소처럼 동작하지만, 블록 레벨 요소처럼 크기를 지정할 수 있습니다.
  • none: 요소를 화면에 표시하지 않습니다.

예제:

.block-element {
  display: block;
}

.inline-element {
  display: inline;
}

.inline-block-element {
  display: inline-block;
}

.hidden-element {
  display: none;
}

Position 속성

• position: 요소의 위치를 지정합니다.
  • static: 기본값으로, 문서의 정상적인 흐름에 따라 배치됩니다.
  • relative: 요소를 정상적인 흐름에 따라 배치한 후, 위치를 상대적으로 이동합니다.
  • absolute: 요소를 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소를 기준으로 배치합니다.
  • fixed: 요소를 문서 흐름에서 제거하고, 뷰포트를 기준으로 배치합니다.
  • sticky: 스크롤에 따라 요소를 상대적 또는 고정적으로 배치합니다.

예제:

.static-element {
  position: static;
}

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

.absolute-element {
  position: absolute;
  top: 10px;
  right: 20px;
}

.fixed-element {
  position: fixed;
  bottom: 10px;
  left: 20px;
}

.sticky-element {
  position: sticky;
  top: 0;
}

Float 속성

• float: 요소를 왼쪽 또는 오른쪽으로 떠 있게 하여 텍스트 및 인라인 요소가 주위를 감싸도록 합니다.

예제:

.left-float {
  float: left;
}

.right-float {
  float: right;
}

.clear {
  clear: both;
}

Flexbox 레이아웃

• display: flex: 플렉스 컨테이너를 정의하고, 하위 요소를 플렉스 아이템으로 만듭니다.

예제:

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  flex: 1;
}

플렉스 컨테이너 속성

• flex-direction: 주축의 방향을 설정합니다 (row, row-reverse, column, column-reverse).
• justify-content: 주축을 따라 아이템을 정렬합니다 (flex-start, flex-end, center, space-between, space-around).
• align-items: 교차축을 따라 아이템을 정렬합니다 (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: 아이템이 여러 줄로 나뉠 수 있도록 설정합니다 (nowrap, wrap, wrap-reverse).

예제:

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
}

플렉스 아이템 속성

• flex-grow: 아이템의 증가 가능 비율을 설정합니다.
• flex-shrink: 아이템의 축소 가능 비율을 설정합니다.
• flex-basis: 아이템의 기본 크기를 설정합니다.
• align-self: 개별 아이템의 정렬을 설정합니다 (auto, flex-start, flex-end, center, baseline, stretch).

예제:

.flex-item {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 100px;
  align-self: center;
}

Grid 레이아웃

• display: grid: 그리드 컨테이너를 정의하고, 하위 요소를 그리드 아이템으로 만듭니다.

예제:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}

그리드 컨테이너 속성

• grid-template-columns: 열의 크기를 설정합니다.
• grid-template-rows: 행의 크기를 설정합니다.
• gap: 그리드 아이템 간의 간격을 설정합니다.

예제:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

그리드 아이템 속성

• grid-column: 아이템이 차지할 열의 시작과 끝을 설정합니다.
• grid-row: 아이템이 차지할 행의 시작과 끝을 설정합니다.

예제:

.grid-item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

결론

CSS 레이아웃 기법은 웹 페이지의 요소들을 효과적으로 배치하고 정렬하는 데 중요한 역할을 합니다. display, position, float, Flexbox, Grid 등의 다양한 레이아웃 기법을 활용하여 복잡한 레이아웃을 구현할 수 있습니다. 이번 글에서는 CSS 레이아웃의 기본 개념과 다양한 기법에 대해 배웠습니다.

다음 글에서는 플렉스박스(Flexbox)에 대해 더 깊이 알아보겠습니다.

다음 글에서 만나요!