CSS — 모양과 배치
CSS — 모양과 배치
HTML 이 무엇인지를 적는다면 CSS 는 어떻게 보이고 어떻게 배치될지를 적습니다. 색 · 크기 · 여백 · 정렬 · 반응형까지 화면의 시각적 결정 대부분이 CSS 의 영역. 이 글은 CSS 의 출자 · 박스 모델 · 레이아웃 도구 · 셀렉터 우선순위 · 단위와 미디어 쿼리 · 모던 CSS 의 흐름.
1. CSS 에 대한 이야기
Cascading Style Sheets 의 줄임말. 1994 년 노르웨이의 Håkon Wium Lie 가 CERN 에서 일하며 제안했고, Bert Bos 와 함께 다듬어 1996 년 W3C 가 CSS Level 1 을 권고로. 이후 CSS2 (1998), CSS 2.1 (2011) 을 거침.
CSS3 부터는 한 덩어리의 큰 명세 대신 모듈 단위로 갈라져 발전. Selectors Level 4, Color Module Level 4, Grid Layout Level 1, Flexbox Level 1 같은 이름. "CSS3 인가 CSS4 인가" 같은 구분 자체가 의미가 옅어졌습니다.
2. 박스 모델
CSS 가 보는 모든 요소는 사각형 박스. 박스는 안쪽부터 바깥쪽으로 네 겹:
┌─────────────────── margin (바깥 여백) ───────────────────┐
│ ┌───────────────── border (테두리) ───────────────────┐ │
│ │ ┌─────────────── padding (안쪽 여백) ─────────────┐ │ │
│ │ │ ┌─────────── content (실제 내용) ──────────────┐ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ └──────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
기본값에서 width: 200px 은 콘텐츠 영역만 200px 이고, padding · border 가 더해진 결과가 실제 차지 공간. 이 계산이 직관에 어긋나기 때문에 다음 한 줄을 전역에 두는 관습:
*, *::before, *::after { box-sizing: border-box; }
border-box 는 width 가 padding · border 를 포함한 전체 박스 너비라는 뜻.
3. display 의 큰 갈래
| 값 | 동작 |
|---|---|
block |
가로 한 줄을 차지. div · p 의 기본 |
inline |
글자처럼 줄 안에 흐름. span · a 의 기본. width / height 무시 |
inline-block |
인라인처럼 흐르되 width / height 인정 |
flex |
1 차원 정렬 컨테이너 |
grid |
2 차원 정렬 컨테이너 |
none |
화면에서 사라짐 (자리도 차지 안 함) |
4. Flexbox
CSS Flexible Box Layout. 2009 년 명세 초안 이후 점진적으로 안정화돼 2017 년경 모든 모던 브라우저가 호환. 한 축을 따라 자식들을 정렬하는 데 강함.
.row {
display: flex;
gap: 12px; /* 자식 사이 간격 */
justify-content: space-between; /* 주축 정렬 */
align-items: center; /* 교차축 정렬 */
}
5. Grid
CSS Grid Layout. 2017 년 주요 브라우저가 동시에 출시. 행과 열을 함께 정의해 2 차원 배치를 자연스럽게:
.layout {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
}
fr 단위는 남은 공간을 비례 분배.
6. 셀렉터 우선순위
같은 속성이 여러 규칙에서 충돌할 때 누가 이길지를 결정하는 규칙:
| 셀렉터 | 점수 |
|---|---|
!important |
그 모든 것을 누름 (사용 자제) |
인라인 스타일 (style="...") |
1000 |
id (#main) |
100 |
클래스 · 속성 · 가상클래스 (.btn · [type=text] · :hover) |
10 |
요소 · 가상요소 (p · ::before) |
1 |
같은 점수면 나중에 선언된 쪽이 이김. 이 흐름이 "Cascading" 이라는 이름의 어원.
7. 단위
| 단위 | 의미 |
|---|---|
px |
절대 픽셀 |
% |
부모 기준 비율 |
em |
자기 자신의 글자 크기 기준 |
rem |
루트 (html) 의 글자 크기 기준 |
vh · vw |
뷰포트 높이 · 너비의 1% |
dvh · svh · lvh |
모바일 주소창을 고려한 뷰포트 높이 |
ch · ex |
글자 폭 / 높이 기준 |
상대 단위 (rem · em) 가 접근성과 반응형에 유리하다는 평이 일반적.
8. 미디어 쿼리 · 반응형
.card { padding: 16px; }
@media (min-width: 768px) {
.card { padding: 24px; }
}
뷰포트 너비가 768px 이상일 때 다른 규칙. 모바일 우선 (min-width 부터 쌓기) 접근이 자주 권장.
9. 다른 길
순수 CSS 외에 자주 보이는 갈래:
- CSS 전처리기 — Sass (2006) · Less (2009). 변수 · 네스팅 · 믹스인. 모던 CSS 가 일부 기능을 흡수해 사용 빈도는 줄어듦.
- CSS-in-JS — styled-components · Emotion. JS 안에서 스타일 작성. 런타임 비용 논란 있음.
- 유틸리티 우선 — Tailwind CSS (2017). 작은 유틸리티 클래스 조합으로 스타일링.
- CSS Modules — 클래스명을 파일별로 격리. Webpack / Vite 가 빌드 시점에 처리.
10. 자주 쓰는 모양
/* 변수 */
:root {
--color-primary: #2563eb;
--space-1: 4px;
--space-2: 8px;
}
.btn {
background: var(--color-primary);
padding: var(--space-2) calc(var(--space-2) * 2);
border-radius: 6px;
color: white;
border: none;
cursor: pointer;
}
.btn:hover { filter: brightness(0.95); }
/* 모던 셀렉터 */
.card:has(> img) { padding-top: 0; } /* 이미지가 자식인 카드만 */
/* 컨테이너 쿼리 (2023 정식) */
.sidebar { container-type: inline-size; }
@container (min-width: 400px) {
.sidebar .item { display: flex; }
}
11. 자주 걸리는 자리
width: 100% 가 부모를 삐져나감 — padding / border 가 더해졌기 때문. box-sizing: border-box.
margin 이 합쳐지지 않고 큰 쪽만 적용 — vertical margin collapse. flex / grid 컨테이너 안에서는 일어나지 않음.
position: absolute 가 예상치 못한 조상을 기준 — 가장 가까운 position 이 static 이 아닌 조상이 기준. 의도한 부모에 position: relative.
z-index 가 안 먹음 — 부모에 position 이 없거나 stacking context 가 끊겨 있을 수 있음.
!important 남발 — 우선순위 전쟁이 시작. 자주 다시 작성하게 됨.
하고픈 말
CSS 는 박스 모델 + Flexbox / Grid + 셀렉터 우선순위 + 변수 넷이 기초. 모던 CSS 가 변수 · :has() · 컨테이너 쿼리까지 흡수하면서 전처리기의 자리가 좁아지고 Tailwind 의 유틸리티 우선이 큰 흐름을 이끄는 시기. 핵심은 늘 같음 — 의도가 명확한 셀렉터 + 일관된 단위 + 모바일 우선.
Next
- javascript-basics
- http-rest
W3C CSS Working Group · CSS Snapshot 2024 · MDN CSS · web.dev Learn CSS · css-tricks.com · Flexbox Froggy · Grid Garden · Can I Use · Håkon Wium Lie CSS 제안 메일 (1994) 를 참고합니다.