Selector
태그, 클래스, id, 속성, 가상 클래스로 적용 대상을 고릅니다.
CSS 규칙과 선택자 적용 흐름
CSS는 선택자로 대상을 찾고, 속성과 값을 선언한 뒤, 우선순위와 작성 순서에 따라 최종 스타일을 계산합니다.
Declare
속성 이름과 값을 세미콜론으로 구분해 선언합니다.
Cascade
출처, 중요도, 명시도, 순서가 충돌한 규칙을 정리합니다.
Render
계산된 스타일이 박스, 글자, 색상, 배치로 화면에 반영됩니다.
외부 스타일 시트는 재사용과 관리에 유리하고 인라인은 예외적으로만 씁니다.
id, class, tag 선택자의 힘 차이를 이해해야 덮어쓰기 문제가 줄어듭니다.
관계 선택자는 편리하지만 구조 변화에 약해질 수 있습니다.
hover, focus, nth-child는 상태와 위치에 따른 스타일을 표현합니다.
디버깅 순서
선택자가 맞는지, 규칙이 덮였는지, 파일이 연결됐는지 차례로 봅니다.
CSS 실수 방지
강한 선택자를 남발하지 말고 클래스 기반으로 예측 가능하게 작성합니다.
CSS 규칙과 선택자 적용 흐름
동일 요소에 여러 규칙이 있을 때 어떤 값이 최종 적용되는지 설명합니다.