BACKEND [Kamranahmedse Roadmap]/CSS

[CSS] CSS 레이아웃(Layout) 기법 정리

Alex Han 2025. 2. 2. 01:49
반응형

이전 글

 

[HTML] HTML 레이아웃(Layout) 개념과 구조 + flexbox, grid, 미디어 쿼리

웹 페이지의 레이아웃(Layout)은 HTML 요소들을 배치하는 방식을 의미한다.HTML과 CSS를 이용하여 다양한 레이아웃을 구성할 수 있으며, 웹사이트의 가독성과 사용자 경험(UX)에 큰 영향을 미친다.  

jyhan0625.tistory.com

레이아웃을 구성하는 방법에 더욱 초점을 맞춘 글입니다. 레이아웃 개념 자체에 대해서는 이전 글을 참고바랍니다.

 

 

 

웹 페이지의 레이아웃을 구성하는 방법에는 여러 가지가 있다. 대표적인 방법으로는 Normal Flow(기본 흐름), Float, Flexbox, Grid, Positioning 등이 있으며, 각각의 특징과 사용법을 정리한다.

 

 

 

1. Normal Flow (기본 흐름)

기본적으로 HTML 요소는 블록 요소와 인라인 요소로 나뉘며, 브라우저는 이를 기본 흐름대로 배치한다.

 

1) 블록 요소 (Block-level Elements)

• 한 줄을 전체 차지하며, 줄 바꿈이 자동으로 발생한다.

• div, p, h1~h6, section, article, header, footer 등

<p>첫 번째 문단</p>
<p>두 번째 문단</p>

 

✅ 위 코드에서 <p> 태그는 각각 새로운 줄에서 시작됨.

 

2) 인라인 요소 (Inline Elements)

• 컨텐츠 크기만큼 차지하며, 줄 바꿈이 발생하지 않음.

• span, a, strong, em, img, button 등

<p>이 문장 <span>중간</span>에 인라인 요소가 있습니다.</p>

 

✅ <span> 요소는 문장 안에서 줄 바꿈 없이 적용됨.

 

 

2. Float 레이아웃 (과거 사용)

과거에는 float 속성을 사용해 레이아웃을 배치했지만, 지금은 flexbox나 grid를 더 많이 사용한다.

 

기본 개념

• float: left; → 왼쪽으로 배치

• float: right; → 오른쪽으로 배치

• clear: both; → float으로 인한 레이아웃 깨짐 방지

img {
  float: left;
  margin-right: 10px;
}
<img src="image.jpg" alt="이미지">
<p>이 텍스트는 이미지 오른쪽에 배치됩니다.</p>

 

✅ 이미지가 왼쪽으로 떠 있고, 문단이 오른쪽에 배치됨.

 

📌 주의: float은 원래 텍스트와 이미지를 감싸는 용도로 만들어졌으며, 현재는 flexbox나 grid가 더 적합하다.

 

 

 

3. Position 속성

요소를 원하는 위치에 배치할 때 사용한다.

 

1) position 값 종류

값 설명
static 기본값 (Normal Flow 유지)
relative 현재 위치 기준으로 이동
absolute 가장 가까운 relative 부모 기준으로 이동
fixed 뷰포트를 기준으로 고정
sticky 스크롤에 따라 위치가 변함

 

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

 

✅ 부모 요소(relative 설정)가 있을 경우, 그 부모를 기준으로 위치 이동. (없을 경우, body를 기준으로 위치 이동)

 

 

 

4. Flexbox (유연한 1차원 레이아웃)

display: flex;를 사용하여 가로/세로 방향의 요소 배치를 쉽게 조정할 수 있다.

 

핵심 속성

• display: flex; → Flexbox 활성화

• flex-direction → row(기본값), column(세로 정렬)

• justify-content → 주 축 정렬 (flex-start, center, space-between)

• align-items → 교차 축 정렬 (stretch, center, flex-start)

 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

 

✅ 모든 요소가 중앙에 배치됨.

 

📌 Flexbox는 1차원(가로 또는 세로) 정렬에 강함.

 

 

 

5. CSS Grid (강력한 2차원 레이아웃)

Grid는 행(row)과 열(column)을 동시에 조정하는 강력한 레이아웃 시스템이다.

 

핵심 속성

• display: grid; → Grid 활성화

• grid-template-columns: repeat(3, 1fr); → 3개의 동일한 컬럼 생성

• grid-gap → 요소 간격 조정

 

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

 

✅ 첫 번째와 세 번째 칸은 같고, 두 번째 칸은 두 배 크기.

 

📌 Grid는 2차원(가로+세로) 정렬에 강함.

 

 

 

6. CSS Layout 기법 비교

레이아웃 방법 특징 사용 예
Normal Flow 기본 흐름, 자동 정렬 일반적인 문서 구조
Float 과거 레이아웃 기법 (현재는 사용 줄어듦) 이미지 + 텍스트 정렬
Position 특정 위치에 고정, 이동 푸터 고정, 팝업창
Flexbox 1차원 레이아웃, 유연한 배치 버튼 정렬, 내비게이션 바
Grid 2차원 레이아웃, 강력한 배치 전체 페이지 레이아웃

 

✅ 현재는 Flexbox와 Grid를 조합하여 레이아웃을 구성하는 것이 가장 효율적이다.

반응형