[CSS 핵심강좌] 4. 레이아웃

웹 페이지 레이아웃은 페이지의 구조와 요소들의 배치를 결정합니다. CSS를 이용하여 다양한 레이아웃을 구현할 수 있습니다. 이 강좌에서는 주요 레이아웃 기법에 대해 알아보겠습니다.

 

정적 레이아웃 (Static Layout)

정적 레이아웃은 웹 페이지의 요소들을 고정된 크기와 위치에 배치합니다. 주로 position: static과 position: relative를 사용하여 구현합니다.

 

.box {
  position: static;
  width: 200px;
  height: 200px;
}

 

고정 레이아웃 (Fixed Layout)

고정 레이아웃은 웹 페이지의 요소들을 뷰포트에 상대적인 고정된 위치에 배치합니다. 스크롤이 발생해도 요소의 위치가 변하지 않습니다. 주로 position: fixed를 사용하여 구현합니다.

 

.box {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 200px;
  height: 200px;
}

 

액체 레이아웃 (Liquid Layout)

액체 레이아웃은 웹 페이지의 요소들의 크기가 브라우저 창의 크기에 따라 변하는 레이아웃입니다. 주로 백분율(%) 단위를 사용하여 구현합니다.

 

.container {
  width: 80%;
  margin: 0 auto;
}

 

반응형 레이아웃 (Responsive Layout)

반응형 레이아웃은 웹 페이지의 요소들의 크기와 위치가 다양한 디바이스와 화면 크기에 맞게 적응하는 레이아웃입니다. 주로 미디어 쿼리(media queries)를 사용하여 구현합니다.

 

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .container {
    width: 90%;
  }
}

 

플렉시블 박스 레이아웃 (Flexbox Layout)

플렉시블 박스 레이아웃은 요소들을 일차원적인 열 또는 행으로 배치하고, 공간을 쉽게 조절할 수 있는 레이아웃입니다. 주로 display: flex를 사용하여 구현합니다.

 

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

 

CSS Grid 레이아웃

CSS Grid는 웹 페이지의 레이아웃을 구성하기 위한 2차원 격자 시스템입니다. 열과 행을 쉽게 조절할 수 있으며, 복잡한 레이아웃을 효율적으로 구현할 수 있습니다. 주로 display: grid를 사용하여 구현합니다.

 

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

 

이 강좌에서는 기본적인 레이아웃 기법들을 소개했습니다. 이러한 기법들을 이해하고 적절히 활용하면 다양한 웹 페이지 레이아웃을 구현할 수 있습니다. 웹 페이지의 요구사항과 디자인에 따라 적절한 레이아웃 기법을 선택하여 사용하세요.

 

[CSS 핵심강좌] 5. Flexbox