CSS

1) CSS 개요

• 역할: 문서(HTML)의 표현(레이아웃·색·폰트·애니메이션 등)을 정의
• 적용 방식: 인라인(style="") / 내부(<style>) / 외부(.css 링크)
• 우선순위: 출처 → !important → 명시도(ID > class/속성/의사클래스 > 태그/의사요소) → 소스 순서
• 박스 모델: content + padding + border + margin (box-sizing: border-box 권장)
• 단위: px, %, em(부모 폰트 기준), rem(루트 기준), vw/vh(뷰포트)

---

2) 선택자 한눈에 보기

• 기본: *, tag, .class, #id, [attr=value]
• 결합자: 후손(A B), 자식(A > B), 인접 형제(A + B), 일반 형제(A ~ B)
• 의사클래스: :hover, :focus, :active, :disabled, :not(), :nth-child(n) 등
• 의사요소: ::before, ::after, ::first-line, ::selection
• 명시도 팁: 불필요한 ID 사용 지양, BEM 등 이름 규칙으로 과도한 중첩 방지

---

3) 글꼴(Font) 스타일

• font-family: 시스템 폰트 스택 또는 웹폰트 조합

  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif; }

• font-size: 접근성 고려해 rem 기반 권장(루트 62.5% = 10px 관례는 선택)

• font-weight: 100–900 단계(가변 폰트일수록 세밀)

• line-height: 단위 없이 비율로 지정 권장(예: 1.5)

• @font-face: 웹폰트 로드, font-display: swap로 FOUT 최소화

---

4) 텍스트(Text) 스타일

• color, text-decoration(링크 밑줄/두께/스타일), text-transform(대소문자 변환)

• letter-spacing, word-spacing: 자간·어간

• white-space: 줄바꿈/공백 처리(nowrap, pre, 등)

• 넘침 제어:

  .ellipsis {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }

• 강제 줄바꿈: overflow-wrap: anywhere; 또는 word-break: break-all;

---

5) 문단(Paragraph) 스타일

• 흐름 방향: direction: ltr | rtl
• 정렬: text-align: left | right | center | justify
• 양쪽 정렬 보조: text-justify: inter-word | inter-character | distribute
• 행간: line-height: normal | 수치 | px | em | %

/* 흐름 / 정렬 / 행간 예시 */
.rtl   { direction: rtl; }
.center{ text-align: center; }
.just  { text-align: justify; text-justify: inter-word; }
.read  { line-height: 1.6; }

---

6) 목록(List) 스타일

• 마커 유형: list-style-type: disc | circle | square | decimal | lower-roman | upper-alpha | none ...
• 이미지 마커: list-style-image: url(경로)
• 축약형: list-style: <type> <image> <position>
• 포지션: list-style-position: outside | inside

/* 불릿·번호·이미지 마커 */
ul.basic   { list-style-type: disc; }           /* 기본 채운 원 */
ol.roman   { list-style-type: lower-roman; }    /* 소문자 로마 */
ul.custom  { list-style-image: url(/img/bullet.png); }
.no-bullet { list-style: none; padding-left: 0; }

---

7) 레이아웃 기본기

• Display: block, inline, inline-block, flex, grid

• Flex: 1차원(가로/세로) 배치, 정렬·간격에 유리

  .row { display: flex; gap: 12px; align-items: center; justify-content: space-between; }

• Grid: 2차원 배치, 반응형 카드/대시보드에 유리

  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

---

8) 접근성 & 실무 팁

• 루트 폰트 크기·라인하이트 일괄 설정 → 재사용 컴포넌트의 리듬 유지
• 명시도 폭주 방지: 모듈식 설계(BEM/Utility), !important 최소화
• 다국어: direction, word-break, 웹폰트 서브셋(한글/라틴) 분리
• 다크모드: @media (prefers-color-scheme: dark)로 테마 대응
• 성능: 불필요한 웹폰트·큰 배경 이미지 최소화, CSS 분할 로드

---

9) 샘플 스니펫

:root {
  --fg: #222; --bg: #fff;
  --accent: #2e6cff;
  --font-base: 16px; --lh: 1.6;
}
html { font-size: var(--font-base); }
body {
  color: var(--fg); background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  line-height: var(--lh);
  margin: 0;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0 0 1em; padding-left: 1.2em; }