style 속성으로 요소에 직접 CSS를 적용하는 방법과 한계를 이해합니다.
style 속성에는 CSS의 속성: 값 쌍을 넣습니다. 빠른 실험에는 편하지만 여러 요소에 반복하면 수정이 어려우므로 실제 프로젝트에서는 class와 별도 CSS를 우선합니다.
h1의 style에는 선언 두 개가 세미콜론으로 나뉘어 있어 제목이 초록 글자로 가운데 정렬됩니다. p에는 글자 크기 18px, 연한 초록 배경, 안쪽 여백 12px가 함께 들어 있고, 배경은 padding 영역까지 칠해지므로 글자 둘레에 12px 두께의 색 띠가 생깁니다.
style 속성의 선언은 스타일시트의 어떤 선택자보다 우선하므로, 나중에 class로 색을 바꾸려 해도 반영되지 않는 일이 생기고 이를 이기려면 !important까지 동원해야 합니다. 또 사이트의 Content-Security-Policy가 인라인 스타일을 허용하지 않으면 style 속성은 아예 무시됩니다.
style 속성을 모든 태그에 반복하면 디자인 변경 때 파일 전체를 고쳐야 합니다.
직접 바꿔보세요h1의 color와 p의 padding 값을 바꿔 결과를 비교하세요.