mason
mason-log.

mason

mason.

안녕하세요. mason 입니다.

css

CSS 기초.

선택자, 캐스케이드, 박스 모델, 단위, 상속. 레이아웃 전에 필요한 CSS 기본.

CSS는 HTML의 표현(색, 크기, 배치)을 담당한다. 레이아웃(Flex/Grid) 전에 선택자, 캐스케이드, 박스 모델을 먼저 잡으면 디버깅이 쉬워진다.

🎨 선택자

  • 타입: p, button
  • 클래스 / ID: .card, #root (ID는 특이도가 커서 남용하지 않기)
  • 속성: [type="email"]
  • 결합
    • .nav a — 자손
    • .card > .title — 자식
    • .item + .item — 인접 형제
.button:hover {
  opacity: 0.9;
}

.button:focus-visible {
  outline: 0.2rem solid currentColor;
}

🎨 캐스케이드와 특이도

같은 요소에 여러 규칙이 오면 대략 이 순서로 이긴다.

  1. !important (가능하면 쓰지 않기)
  2. 인라인 style
  3. 특이도 (ID > class/속성/pseudo-class > 타입)
  4. 나중에 선언된 규칙

유지보수에서는 특이도를 낮게 유지하는 편이 안전하다. (유틸 클래스, BEM, CSS Modules 등)

🎨 박스 모델

CSS 박스 모델 margin border padding content

바깥에서 안쪽 순서는 다음과 같다.

  • margin
  • border
  • padding
  • content

box-sizing: border-box를 기본으로 두면 width에 padding/border가 포함되어 계산이 편하다.

*,
*::before,
*::after {
  box-sizing: border-box;
}

🎨 단위

단위감
px고정 픽셀
rem루트(html) 폰트 기준. 반응형, 접근성에 유리
em부모 폰트 기준. 중첩되면 커질 수 있음
%부모 대비
vw/vh뷰포트
ch문자 "0" 너비 대략치

이 블로그도 rem 스케일을 많이 쓴다.

🎨 상속

  • 상속됨: color, font-* 등
  • 상속 안 됨: margin, padding, border
  • 필요하면 inherit / initial / unset으로 명시한다.

🧱 display 기본

값감
block한 줄 차지 (div, p)
inline글자처럼 흐름 (span, a)
inline-block흐름 + width/height
none렌더 트리에서 제외 (접근성, SEO 영향 가능)

배치(Flex, Grid)는 레이아웃 문서에서 이어간다.

🔗 참고 자료