CSS 기초와 선택자

1. CSS를 HTML에 연결하는 3가지 방법

<!-- 방법 1: 외부 파일 연결 (권장) -->
<link rel="stylesheet" href="style.css">

<!-- 방법 2: <style> 태그 (head 안에) -->
<style>
  h1 { color: blue; }
</style>

<!-- 방법 3: 인라인 스타일 (권장 안 함) -->
<h1 style="color:red; font-size:24px;">제목</h1>

방법	장점	단점
외부 파일	재사용 가능, 유지보수 쉬움	파일 추가 HTTP 요청
<style> 태그	추가 파일 불필요	여러 페이지 재사용 어려움
인라인	즉각 적용	명시도 최강 — 덮어쓰기 어려움, 유지보수 최악

2. CSS 문법 기본

선택자 {
  속성: 값;
  속성: 값;
}

예시:
h1 {
  color: #333333;       /* 글자색 */
  font-size: 32px;      /* 글자 크기 */
  font-weight: bold;    /* 굵기 */
  text-align: center;   /* 정렬 */
  margin-bottom: 16px;  /* 아래 여백 */
}

3. 선택자 5종류 완전 정복

/* 1. 태그 선택자 — 해당 태그 전체 적용 */
p { color: gray; }

/* 2. 클래스 선택자 — .클래스명 */
.btn { background: blue; color: white; }
.btn-red { background: red; }

/* 3. ID 선택자 — #id명 (페이지당 1번만 사용) */
#header { background: #1a1a2e; }

/* 4. 자손 선택자 — 공백으로 구분 */
nav ul li { list-style: none; }   /* nav 안의 ul 안의 li */
nav > ul { padding: 0; }          /* nav 바로 아래 ul만 */

/* 5. 속성 선택자 */
input[type="text"] { border: 1px solid #ccc; }
a[target="_blank"]::after { content: " ↗"; }

/* 유사 클래스(Pseudo-class) */
a:hover { color: red; }           /* 마우스 올렸을 때 */
button:active { opacity: 0.8; }   /* 클릭 중 */
input:focus { outline: 2px solid blue; } /* 포커스 시 */
li:first-child { font-weight: bold; }    /* 첫 번째 자식 */
li:nth-child(2n) { background: #f5f5f5; } /* 짝수 번째 */

/* 유사 요소(Pseudo-element) */
p::first-line { font-size: 1.2em; } /* 첫 줄만 */
h2::before { content: "▶ "; color: blue; } /* 앞에 내용 추가 */

4. 명시도(Specificity) — 어떤 스타일이 이길까

같은 요소에 여러 CSS가 충돌하면 명시도 점수가 높은 것이 적용됩니다.

선택자 종류	명시도 점수	예시
인라인 스타일	1000	style="color:red"
ID 선택자	100	#header
클래스·속성·유사클래스	10	.btn, :hover
태그·유사요소	1	p, ::before

/* 점수 계산 예시 */
div p          → 1+1 = 2점
.container p   → 10+1 = 11점 ← 이 스타일이 적용됨
#main .text    → 100+10 = 110점

5. CSS 변수(Custom Properties)로 테마 관리

/* :root에 변수 선언 */
:root {
  --color-primary: #6366f1;
  --color-text: #1f2937;
  --font-size-base: 16px;
  --spacing-md: 16px;
}

/* 변수 사용 */
h1 { color: var(--color-primary); }
p  { font-size: var(--font-size-base); color: var(--color-text); }
.card { padding: var(--spacing-md); }

/* 다크모드 테마 변경 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f9fafb;
    --color-bg: #111827;
  }
}

관련 검색어  ·  CSS선택자, CSS명시도, CSS클래스ID차이, CSS변수, hover스타일, CSS우선순위, Cascading규칙