인라인, style 요소, 외부 스타일시트 적용 방식을 구분합니다.
여러 페이지가 공유하는 디자인은 link로 외부 CSS를 연결하는 것이 일반적입니다. style은 한 문서 전용, style 속성은 단발성 실험에 적합합니다. 이 실습의 CSS 탭은 현재 문서의 style 요소와 같은 역할을 하며, 외부 파일 연결 문법은 결과 화면의 코드로 함께 확인합니다.
첫 문단의 style 속성은 그 p 하나에만 갈색 글자를 입힙니다. CSS 탭에는 .target 규칙이 두 번 나오는데 두 블록의 선언이 합쳐져 padding: 14px는 남고, 겹치는 background는 뒤에 쓴 값이 이깁니다. code에 준 display: block은 link 예시를 문장 사이에 끼우지 않고 어두운 상자로 따로 세웁니다.
style 속성에 쓴 선언은 스타일시트의 어떤 선택자보다 앞섭니다. CSS 탭에 모든 p의 color를 바꾸는 규칙을 더해도 첫 문단은 갈색으로 남고, 이를 이기려면 !important를 써야 하므로 style 속성이 늘어날수록 나중에 덮어쓰기가 어려워집니다.
CSS 파일 경로가 틀렸거나 link를 body의 불규칙한 위치에 두면 관리와 로딩이 어려워집니다.
직접 바꿔보세요인라인 color와 CSS 탭의 background를 각각 바꿔 적용 범위를 비교하세요.