HTML style 속성 – 올바른 이해와 사용 방법

`style` 속성의 정의 및 사용법

style 속성으로 해당 요소에 직접 CSS 스타일을 지정할 수 있습니다.
이렇게 style 속성으로 직접 해당 요소에만 스타일링하는 것을 '인라인 스타일'이라고 합니다.

style 속성으로 스타일하는 것은 HTML에서 스타일을 지정하는 여러 방법 중 하나입니다.

style 속성은 HTML의 모든 요소에 적용할 수 있는 전역(글로벌) 속성 중 하나입니다.

예제

HTML

<h2 style="color: white; background-color: black;">
    style 속성
</h2>
<p style="color: gray;">
    CSS로 스타일을 적용할 요소 내에 style 속성을 이용해서
    해당 요소에만 스타일을 적용하는 것을 말합니다.
</p>

구문

style 속성은 CSS에 정의된 속성(property)과 값으로 CSS 스타일을 선언합니다. CSS의 선택자는 사용할 수 없습니다.

여러 스타일을 선언하려면, 세미콜론(;)을 이용하여 구분합니다. 하나의 스타일만을 선언할 때에는 속성(property)과 값 다음에 있는 세미콜론(;)을 생략할 수 있습니다.

여러 스타일을 선언하는 경우

하나의 스타일만을 선언하는 경우

HTML

<h2 style="color: gray;">
    style 속성
</h2>
<p style="color: gray">
    속성(property)과 값 다음에 있는 세미콜론(;)을 생략할 수 있습니다.
</p>

선택자를 사용할 수 없음

style 속성은 이 속성이 포함되어 있는 요소에만 스타일을 직접 지정하는 것입니다. CSS의 선택자를 사용할 수 없습니다.

주의할 점

요소 내에 style 속성으로 직접 스타일을 적용하는 인라인 스타일은 가급적 사용하지 않는 것이 좋습니다.

유지 관리가 좋지 않으며, 문서에 동일한 스타일을 여러 번 사용해야 할 수도 있습니다. 그리고, HTML 문서의 요소 내에 CSS를 직접 작성하기 때문에 CSS 정보와 HTML 구조 정보가 혼합되어 있어서 코드를 읽고 이해하는데 어려움이 많습니다.

또한, CSS 선택자를 사용하지 않고 직접 속성과 값을 열거하기 때문에 예를 들어, :hover, :focus 등의 가상 클래스나, ::before, ::after 등의 가상 요소 등 CSS가 지원하는 선택자를 사용할 수 없는 치명적인 단점이 있습니다.

마지막으로, style 속성으로 직접 스타일을 적용하는 인라인 스타일은 스타일이 적용되는 선택자가 얼마나 구체적으로 선언되어 있냐는 것을 숫자로 나타낸 값인 CSS 선택자의 구체성 값이 매우 높습니다. 인라인 스타일은 다른 선택자들보다 구체성 값이 가장 높습니다. 그러므로 인라인 스타일을 남용하면 다른 스타일 규칙을 덮어쓰게 될 수 있습니다. 인라인 스타일은 최소한으로 사용하고, CSS 파일에 스타일을 정의하여 일관성과 유지보수성을 유지하는 것이 좋습니다.
CSS 선택자의 구체성 값 - 스타일 우선순위를 정확히 이해하기를 참조하세요.

인라인 스타일을 사용해야 할 경우

style 속성으로 직접 스타일을 적용하는 인라인 스타일을 반드시 적용해야 하는 하는 경우도 있습니다.

이메일 발송을 HTML 탬플릿으로 할 경우에는 해당하는 HTML 탬플릿에 오직 인라인 스타일만을 적용할 수 있습니다. 이것은 이메일에서 매우 중요한 보안 정책의 이유로 그 밖의 CSS 적용 방법을 지원하지 않기 때문입니다. 예를 들어, HTML의 <style> 태그 내부에 CSS 언어로 작성된 스타일 코드를 작성해서 HTML에 직접 CSS를 적용하는 방법이나 HTML의 <link> 태그를 이용해서 HTML에 외부 CSS 파일을 연결하는 방법 등은 이메일에서 지원하지 않습니다.