A > B: A의 직접 자식 B만 선택. 한 단계 아래만.
A B: A 안의 B 전체 선택. 손자·증손자 등 깊이 무관.
예: div > p는 div 바로 아래 p만, div p는 div 안 모든 p.

span 안의 p는 div의 직접 자식이 아니므로 div > p의 초록색은 적용되지 않음.
하지만 div의 자손이므로 div p의 노란 배경은 적용됨.
→ 결과: 배경 노란색, 글자 기본색

A 요소 바로 뒤에 나오는 형제 요소 중 첫 번째 B를 선택.
같은 부모를 가진 요소끼리만 형제 관계 성립.
예: h2 + p { color: red; } → h2 바로 다음 p만 빨간색.

요소의 특정 상태에만 스타일을 적용하는 선택자.
:hover — 마우스를 올렸을 때
:focus — 포커스를 받았을 때 (input 클릭 등)
:first-child — 부모의 첫 번째 자식일 때

C 속성을 가진 A 요소를 선택.
예: input[type] { border: 1px solid blue; }
→ type 속성이 있는 모든 input 선택
a[href] { color: green; }
→ href 속성이 있는 모든 a 태그 선택

HTML 태그 추가 없이 CSS만으로 요소의 앞·뒤에 내용을 삽입.
::after: 요소 뒤에 삽입
::before: 요소 앞에 삽입
반드시 content 속성이 있어야 표시됨. (content: ""도 가능)

class="new"인 요소의 내용 바로 뒤에 "NEW!" 텍스트가 삽입됨.
HTML 코드를 수정하지 않고 CSS로만 뱃지·아이콘 등을 추가할 수 있음.
예: 자켓 - 200,000원 → 자켓 - 200,000원 [NEW!]

요소의 테두리 모서리를 둥글게 처리하는 속성.
값이 클수록 더 둥글어짐.
border-radius: 50% → 정원형 (width = height일 때)
특정 모서리만: border-top-left-radius: 20px

block: 가로 전체 차지, 줄바꿈 발생, width/height 지정 가능.
기본 블록 태그: <div>, <p>, <h1>
inline: 내용 너비만큼만 차지, 줄바꿈 없음, width/height 무시.
기본 인라인 태그: <span>, <a>, <strong>

list-style: none: ul/ol의 기본 마커(●, 1.)를 제거.
text-decoration: none: a 태그의 기본 밑줄 제거.
두 속성 모두 브라우저 기본 스타일을 없애고 직접 디자인할 때 사용.

브라우저마다 기본 margin·padding 값이 달라 레이아웃이 어긋나는 문제를 방지.
* { margin: 0; padding: 0; }
전체 선택자(*)로 모든 요소의 여백을 0으로 초기화한 뒤 직접 스타일 지정.

width를 지정하고 margin: auto(좌우)를 사용.
margin: 20px auto → 위·아래 20px, 좌·우 자동 균등 분배
text-align: center는 안의 인라인 내용을 정렬하는 것이며, 블록 자체 이동은 margin: auto로 해야 함.