선택자
- 이전: 전체, 태그, 아이디, 클래스, 그룹, 자식, 형제, 의사 클래스
- 이후: 의사 클래스, 의사 요소
의사 클래스 - 자식 선택
- :first-child: 첫 번째 자식
- :last-child: 마지막 자식
- :nth-child(n): n번째 자식
- :nth-last-child(n): 뒤에서 n번째 자식
n 값
숫자: 인덱스
수열: 2n (짝수), 2n+1 (홀수) 등
속성 선택자
- 선택자[속성명]: 해당 속성을 가진 태그
- 선택자[속성명=값]: 해당 속성과 값이 일치하는 태그
- 선택자[속성명^=값]: 값으로 시작 (startsWith)
- 선택자[속성명$=값]: 값으로 끝 (endsWith)
- 선택자[속성명*=값]: 값을 포함 (contains)
의사 요소
- ::before, ::after: 요소 앞뒤에 콘텐츠 삽입, content 속성 사용 가능
- :first-child(CSS2 가상 클래스) → ::before(CSS3 가상 요소)로 구분 명확화
그림자
- text-shadow: x y blur color
- box-shadow: x y blur color
border-radius
- 모서리를 둥글게 처리
- 최대값: 단축의 1/2
- 절대값: 반지름 기준
- 상대값: 대각선 기준 종횡비에 맞춰 늘어남
다단 구성
- column-count: 단 수
- column-gap: 단 간격
- column-rule: 단 구분선 (두께 스타일 색상)
