[HTML과 CSS 레이아웃 완전 정복] display, position, flexbox 활용법 총정리!

---

안녕하세요! 😊 지난번에는 HTML과 CSS를 연결하는 방법과 기본적인 스타일링을 배웠어요.

[HTML과 CSS] HTML과 CSS 연결하기! 예쁜 웹페이지 만드는 법

하지만 CSS로 멋진 웹사이트를 만들려면 요소들을 배치하는 방법(레이아웃)을 잘 알아야 해요!

오늘은 웹페이지를 디자인할 때 가장 중요한 CSS 레이아웃 개념을 배워볼 거예요.
특히, display, position, flexbox를 활용하면 쉽고 효율적으로 레이아웃을 만들 수 있어요!

자, 그럼 시작해볼까요? 🎨🚀

---

1️⃣ display 속성 - 요소의 기본 배치 방식

CSS에서 display 속성은 HTML 요소가 화면에서 어떻게 배치될지 결정해요.

 

✅ display 속성의 주요 값

속성 값	설명
block	블록 요소 (한 줄 전체 차지, 줄바꿈 발생)
inline	인라인 요소 (줄바꿈 없이 한 줄에 여러 개 배치 가능)
inline-block	인라인 요소처럼 배치되지만, 크기 조절 가능
none	화면에서 요소를 숨김

 

📌 예제

.block-box {
    display: block;
    background-color: lightblue;
    width: 100px;
    height: 50px;
}
.inline-box {
    display: inline;
    background-color: pink;
    padding: 10px;
}

<div class="block-box">블록 요소</div>
<span class="inline-box">인라인 요소</span>

 

✅ 결과: 블록 요소는 한 줄 전체를 차지하고, 인라인 요소는 한 줄에 여러 개 배치돼요.

---

2️⃣ position 속성 - 요소의 위치 지정

position 속성은 HTML 요소를 원하는 위치에 배치하는 기능을 해요!

 

✅ position 속성의 주요 값

속성 값	설명
static	기본 위치 (기본적으로 좌측 상단부터 배치됨)
relative	원래 위치를 기준으로 이동
absolute	부모 요소를 기준으로 절대 위치 지정
fixed	화면을 기준으로 고정 (스크롤해도 움직이지 않음)
sticky	스크롤을 내릴 때 특정 위치에서 고정됨

📌 예제

.relative-box {
    position: relative;
    left: 50px;
    top: 20px;
    background-color: yellow;
    padding: 10px;
}
.fixed-box {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: red;
    color: white;
    padding: 10px;
}

<div class="relative-box">이 요소는 상대 위치로 이동!</div>
<div class="fixed-box">이 요소는 화면 하단에 고정!</div>

 

✅ 결과:

• relative: 원래 위치에서 50px 오른쪽, 20px 아래로 이동
• fixed: 화면의 오른쪽 하단에 고정 (스크롤해도 움직이지 않음)

---

3️⃣ flexbox - CSS에서 가장 많이 쓰이는 레이아웃 시스템

flexbox는 가장 강력한 CSS 레이아웃 시스템 중 하나예요!
특히, 가운데 정렬, 반응형 레이아웃, 정렬 문제 해결 등에 필수적으로 사용돼요.

 

✅ display: flex의 핵심 개념

📌 display: flex;를 사용하면 자식 요소들의 정렬 방식을 쉽게 조정할 수 있어요.

속성	설명
justify-content	가로 방향 정렬 (start, center, space-between, space-around 등)
align-items	세로 방향 정렬 (flex-start, center, flex-end 등)
flex-direction	요소 배치 방향 (row, column)
flex-wrap	요소 줄 바꿈 여부 (nowrap, wrap, wrap-reverse)

 

📌 예제

 

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: lightgray;
}
.flex-item {
    background-color: steelblue;
    color: white;
    padding: 20px;
    margin: 10px;
}

<div class="flex-container">
    <div class="flex-item">아이템 1</div>
    <div class="flex-item">아이템 2</div>
    <div class="flex-item">아이템 3</div>
</div>

 

✅ 결과:

• justify-content: center; → 가로 중앙 정렬
• align-items: center; → 세로 중앙 정렬
• display: flex; → 자식 요소들이 한 줄로 배치

---

📌 마무리 & 다음 단계는?

오늘은 CSS에서 가장 중요한 레이아웃 개념을 배웠어요!
✅ display로 요소의 배치 방식 지정
✅ position으로 위치 조정
✅ flexbox로 가로, 세로 정렬 쉽게 하기

 

📢 다음 글에서는?

👉 반응형 웹 디자인 배우기! (media query 활용법 & 모바일 대응)
👉 CSS 그리드 시스템(grid)로 더욱 강력한 레이아웃 만들기

 

다음 글도 기대해주세요! 😊