CSS가 HTML의 색상, 크기, 간격과 배치를 담당하는 방식을 이해합니다.
CSS 규칙은 선택자로 HTML 요소를 찾고 속성과 값으로 표현을 지정합니다. HTML 구조를 유지한 채 CSS만 바꿔도 화면의 인상과 레이아웃을 전부 바꿀 수 있습니다.
이번 예제의 출발점은 selector { property: value; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 target의 배경색과 padding을 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
HTML 의미를 고치기 위해 CSS를 사용하거나 콘텐츠를 CSS 가상 요소에만 넣지 마세요.
직접 바꿔보세요target의 배경색과 padding을 바꿔보세요.