인라인, style 요소, 외부 스타일시트 적용 방식을 구분합니다.
여러 페이지가 공유하는 디자인은 link로 외부 CSS를 연결하는 것이 일반적입니다. style은 한 문서 전용, style 속성은 단발성 실험에 적합합니다. 이 실습의 CSS 탭은 현재 문서의 style 요소와 같은 역할을 하며, 외부 파일 연결 문법은 결과 화면의 코드로 함께 확인합니다.
이번 예제의 출발점은 <link rel="stylesheet" href="styles.css">입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 인라인 color와 CSS 탭의 background를 각각 바꿔 적용 범위를 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
CSS 파일 경로가 틀렸거나 link를 body의 불규칙한 위치에 두면 관리와 로딩이 어려워집니다.
직접 바꿔보세요인라인 color와 CSS 탭의 background를 각각 바꿔 적용 범위를 비교하세요.