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 의 유틸리티 우선이 큰 흐름을 이끄는 시기. 핵심은 늘 같음 — 의도가 명확한 셀렉터 + 일관된 단위 + 모바일 우선.

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) 를 참고합니다.

CSS — 모양과 배치

1. CSS 에 대한 이야기

2. 박스 모델

CSS 가 보는 모든 요소는 사각형 박스. 박스는 안쪽부터 바깥쪽으로 네 겹:

┌─────────────────── margin (바깥 여백) ───────────────────┐
│ ┌───────────────── border (테두리) ───────────────────┐ │
│ │ ┌─────────────── padding (안쪽 여백) ─────────────┐ │ │
│ │ │ ┌─────────── content (실제 내용) ──────────────┐ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ └──────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘

*, *::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 남발 — 우선순위 전쟁이 시작. 자주 다시 작성하게 됨.

하고픈 말

javascript-basics
http-rest

CSS — 모양과 배치

CSS — 모양과 배치

1. CSS 에 대한 이야기

2. 박스 모델

3. display 의 큰 갈래

4. Flexbox

5. Grid

6. 셀렉터 우선순위

7. 단위

8. 미디어 쿼리 · 반응형

9. 다른 길

10. 자주 쓰는 모양

11. 자주 걸리는 자리

하고픈 말

Next

web-fundamentals 카테고리의 다른 글

CSS — 모양과 배치

CSS — 모양과 배치

1. CSS 에 대한 이야기

2. 박스 모델

3. display 의 큰 갈래

4. Flexbox

5. Grid

6. 셀렉터 우선순위

7. 단위

8. 미디어 쿼리 · 반응형

9. 다른 길

10. 자주 쓰는 모양

11. 자주 걸리는 자리

하고픈 말

Next

web-fundamentals 카테고리의 다른 글