웹에서 스타일을 정의할 때 빠지지 않는 게 단위, 레이아웃 속성, 박스 모델이다. 이번 글에서는 단위의 차이부터, 요소 배치(display, float, position), 그리고 CSS의 핵심 개념인 박스 모델(Box Model)까지 정리한다.
CSS 단위 종류
절대 단위
- px (픽셀): 화면의 물리적 픽셀 기준이다.
- 따라서, 반응형 디자인에서는 유연하지 않다.
상대 단위
- %: 부모 요소를 기준으로 계산
div { width: 80%; /* 부모 크기의 80% */ }- em: 현재 요소 또는 부모의 font-size 배수
p { font-size: 16px; }
span { font-size: 1.5em; } /* 24px */- rem: 최상위(html) font-size 기준 (root em)
html { font-size: 16px; }
p { font-size: 2rem; } /* 32px */- vh/vw: 뷰포트(화면) 기준 단위
- 1vh = 화면 높이의 1%
- 1vw = 화면 너비의 1%
실무 포인트
- px는 고정 크기 → 작은 컴포넌트에 적합
- rem, vh/vw는 반응형 디자인에 필수
display 속성
block
- 한 줄 전체를 차지하며, 자동 줄바꿈이 된다.
- 예: <div>, <p>, <h1>
inline
- 줄 안에서 배치되며, 크기 지정이 불가능하다.
- 예: <span>, <a>
inline-block
- inline처럼 한 줄에 배치되지만, block처럼 크기(width/height) 조정이 가능하다.
none
- 요소를 화면에 표시하지 않는다. (visibility: hidden과 다르다)
실무 포인트
- 버튼, 네비게이션 메뉴에 inline-block를 자주 사용한다.
- display: none은 DOM에는 존재하지만 화면에만 안 보인다. → JS 조작 시 유용
float
등장 배경
원래는 이미지와 텍스트를 나란히 배치하기 위해 등장했다.
img { float: left; margin: 10px; }한계점
- 레이아웃 목적으로 쓰다 보니, 부모 컨테이너 높이가 무너지는 문제 발생한다.
clearfix 해결법
.clearfix::after {
content: "";
display: block;
clear: both;
}실무 포인트
- 지금은 레이아웃 용도로 거의 쓰이지 않고, Flexbox와 Grid가 대체하는 추세이다.
position 속성
- static (기본값): 문서 흐름대로 배치
- relative: 원래 위치 기준으로 상대적 이동
- absolute: 부모(포지셔닝 된 요소)를 기준으로 절대 위치
- fixed: 브라우저 화면(viewport)에 고정 (스크롤해도 위치 고정)
- sticky: 스크롤할 때 특정 조건에서 고정 (헤더 고정 등에 유용)
실무 포인트
- absolute는 부모가 position: relative일 때 기준이 잡힌다.
- position: absolute인 요소는 "가장 가까운 position이 설정된 부모"를 기준으로 위치가 잡힌다.
- 만약 부모(조상들 포함) 중 누구도 position: relative | absolute | fixed | sticky를 가지고 있지 않다면, 기준은 브라우저 전체(= <html> or <body>)가 된다.
- 예시는 아래와 같다. 이 경우 .child는 기준이 될 부모가 없으므로 브라우저 전체 좌표(화면 왼쪽 상단) 기준으로 top:20px; left:20px 위치에 배치된다. 즉, 부모 안에 붙지 않고 화면 기준으로 떠버린다.
<div class="parent">
부모 박스
<div class="child">자식 박스</div>
</div>.parent {
width: 300px;
height: 200px;
background: lightblue;
/* position 없음 (static 상태) */
}
.child {
position: absolute;
top: 20px;
left: 20px;
background: pink;
}- sticky는 최근에 많이 쓰인다. (네비게이션, 고정 헤더)
z-index (쌓임 맥락)
- 요소가 겹칠 때 어떤 요소가 위에 올라올지 결정하는 요소이다.
- 기본적으로 나중에 나온 요소가 위에 올라온다.
- z-index 숫자가 클수록 위에 배치된다.
.modal { position: fixed; z-index: 1000; }실무 포인트
- position 속성이 있어야 z-index가 적용된다.
- 레이어 관리가 안 되면, 모달/드롭다운이 가려지는 문제가 발생할 수 있다.
Box Model (박스 모델)
모든 HTML 요소는 사각형 박스로 표현된다.
박스 모델은 4가지 영역으로 나뉜다.
- content: 실제 내용(텍스트, 이미지)
- 그림의 가장 안쪽 파란색 부분 → 800 × 450.400
- 실제 텍스트, 이미지, 동영상 같은 콘텐츠가 들어가는 영역
- width, height 속성으로 크기를 조절
- padding: 내용과 테두리(border) 사이의 간격 (=안쪽 여백)
- 그림에서 초록색 부분 (padding)
- 콘텐츠와 테두리(border) 사이의 공간
- 배경색/배경이미지는 padding 영역까지 칠해다.
- border: 테두리
- 그림에서 노란색 부분 (border)
- 요소를 감싸는 테두리 영역
- 두께(border-width), 색(border-color), 스타일(border-style) 지정 가능
- margin: 요소와 요소 사이의 바깥 간격 (=바깥 여백)
- 그림에서 주황색 부분 (margin)
- 요소와 요소 사이의 바깥 간격
- 배경색은 적용되지 않고 완전히 투명
- 마진 겹침(Collapsing margin) 현상이 발생할 수 있음 (특히 block 요소 상하 마진)
실무 포인트
- box-sizing: border-box 속성을 사용하면, width 속성이 padding과 border를 포함해 크기를 계산한다. → 레이아웃 관리가 쉬워짐
* { box-sizing: border-box; }정리하자면...
- 단위: px(절대), %, em/rem(글꼴/루트 기준), vh/vw(뷰포트 기준)
- display: block/inline/inline-block/none 차이 숙지
- float: 과거 레이아웃 핵심 → 지금은 Flex/Grid로 대체
- position: 요소 배치 핵심 (static, relative, absolute, fixed, sticky)
- z-index: 레이어 겹침 순서 → 모달, 드롭다운에 필수
- 박스 모델: margin, border, padding, content 구조 이해
'Front > css' 카테고리의 다른 글
| CSS 레이아웃 속성 정리 (Flexbox 중심) (3) | 2025.08.31 |
|---|---|
| Bootstrap 활용 가이드 (4) | 2025.08.31 |
| DOM Tree & CSS 선택자 원리 (0) | 2025.08.31 |
| CSS 선택자 정리 (4) | 2025.08.31 |
| CSS 기본 개념 & 적용 방법 (0) | 2025.08.31 |
