안녕하세요, 토스트데브입니다!
오늘은 CSS를 활용해 웹 요소를 어떻게 배치하고 정렬할 수 있는지, 즉 레이아웃(Layout)을 구성하는 핵심 속성들을 알아보겠습니다.
텍스트와 이미지를 예쁘게 꾸며도, 배치가 엉망이면 사용자 경험은 크게 떨어지죠.
이번 글에서는 가장 기초적인 레이아웃 구성 방법인 display, position, float, z-index, overflow, box-sizing 등을 중심으로 정리해볼게요.
1️⃣ display – 요소의 유형 정의
display는 HTML 요소의 기본 동작 방식(레이아웃 방식)을 정의합니다.
| 속성 값 | 설명 |
| block | 줄 바꿈이 있는 박스 (div, p 등) |
| inline | 한 줄에 나란히 (span, a 등) |
| inline-block | 줄 바꿈 없음 + 너비·높이 지정 가능 |
| none | 요소 숨기기 |
| flex, grid | 모던 레이아웃 구성 방식 (다음 글에서 자세히 다룸) |
✅ 예시:
span {
display: block;
}
2️⃣ position – 요소의 위치 지정
요소를 기본 흐름에서 벗어나 직접 위치를 지정할 때 사용합니다.
| 값 | 설명 |
| static | 기본 위치 (기본값) |
| relative | 원래 위치 기준으로 이동 |
| absolute | 가장 가까운 position 지정 요소 기준으로 절대 위치 |
| fixed | 브라우저 창 기준 고정 |
| sticky | 스크롤 위치에 따라 고정/해제 전환 |
✅ 예시:
.box {
position: absolute;
top: 100px;
left: 50px;
}💡 absolute는 부모에 position: relative;를 지정해줘야 원하는 위치 제어가 가능해요.
3️⃣ z-index – 요소의 쌓임 순서
요소가 겹쳤을 때 위에 보이게 할지 순서를 조정합니다.
.modal {
position: absolute;
z-index: 1000;
}
- 숫자가 높을수록 위에 표시됨
- position 속성이 있어야 작동함 (relative, absolute, fixed, sticky)
4️⃣ float – 요소를 왼쪽 또는 오른쪽으로 띄우기
과거 레이아웃 구성에 많이 사용되던 방식
img {
float: left;
margin-right: 10px;
}
- 텍스트가 이미지 주변을 감싸며 배치됨
- 부작용: 부모 요소 높이 무너짐 발생 가능 (clearfix 필요)
5️⃣ clear – float 요소 옆에 위치 방지
float 요소의 영향을 피하고자 할 때 사용
.clearfix {
clear: both;
}
💡 실무에서는 .clearfix::after로 float 해제하는 방식도 자주 사용
6️⃣ overflow – 넘치는 내용 처리
요소 내부 콘텐츠가 영역을 넘칠 때 어떻게 처리할지 지정
| 값 | 설명 |
| visible | 넘쳐도 그대로 보임 (기본값) |
| hidden | 넘친 부분을 숨김 |
| scroll | 스크롤바 항상 표시 |
| auto | 넘칠 경우에만 스크롤 표시 |
✅ 예시:
.container {
width: 300px;
height: 200px;
overflow: auto;
}
7️⃣ box-sizing – 크기 계산 방식 지정
width, height 계산 시 padding과 border 포함 여부 지정
* {
box-sizing: border-box;
}
| 값 | 설명 |
| content-box | 기본값, width는 콘텐츠만 포함 |
| border-box | width에 padding + border 포함 (실무 표준) |
💡 모든 요소에 border-box를 지정해두면 크기 예측이 쉬워지고 레이아웃 안정성이 높아집니다.
✅ 레이아웃 구성 핵심 요약
| 속성 | 기능 |
| display | 요소 유형 정의 (block, inline, flex 등) |
| position | 위치 직접 지정 (absolute, fixed 등) |
| float | 좌우 띄우기 (구식 레이아웃) |
| z-index | 겹침 순서 지정 |
| overflow | 넘치는 콘텐츠 처리 |
| box-sizing | 크기 계산 기준 설정 |
📌 팁: 어떤 레이아웃 방식을 써야 할까?
| 목적 | 추천 방식 |
| 간단한 레이아웃 | display: block 또는 inline-block |
| 이미지 주변 텍스트 배치 | float |
| 고정된 UI 요소 | position: fixed |
| 모던 레이아웃 구성 | flexbox, grid (다음 글에서 다룸) |
✅ 정리하며…
CSS 레이아웃 구성은 화면을 어떻게 보여줄지 설계하는 핵심 기술입니다.
display, position, float만 잘 이해해도 단순한 페이지 구조는 충분히 만들 수 있어요.
이후엔 flexbox와 grid 같은 현대적인 레이아웃 기법으로 넘어가면 더욱 강력한 레이아웃 구성이 가능합니다!
#CSS레이아웃 #position속성 #float속성 #zindex #박스모델 #overflow #boxsizing #display속성 #웹레이아웃기초 #프론트엔드기초