HTML <style> 태그 – 올바른 이해와 사용 방법

`<style>` 태그의 정의 및 사용법

<style> 태그는
HTML 문서에서 CSS 스타일을 작성할 수 있는 영역을 나타내는 태그입니다.
이 영역에는 CSS 언어로 작성된 스타일 코드와 주석만을 포함할 수 있습니다.

<style> 태그는 HTML에서 스타일을 지정하는 여러 방법 중 하나입니다.
화면에서는 표시되지 않습니다.

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>style 태그</title>
        <style> /* CSS 스타일을 작성할 수 있는 영역을 나타내는 태그 */
            h1 {
                color: white;
                background-color: black;
            }
            p {
                color: gray;
            }
        </style>
    </head>
    <body>
        <h1>style 태그</h1>
        <p>
            style 태그는 HTML 문서에서 CSS 스타일을 작성할 수 있는
            영역을 나타내는 태그입니다.
        </p>
    </body>
</html>

CSS 스타일 시트를 연결해서 HTML에 스타일을 지정하려면 <link> 태그를 사용하세요.

HTML <link> 태그

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>style 태그</title>
        <!-- CSS 스타일 시트를 연결해서 HTML에 스타일을 지정 -->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <!---->
    </body>
</html>

`<style>` 태그의 작성 위치

<style> 태그는 HTML 문서에서 원하는 요소의 스타일을 지정할 CSS 영역을 만들기 위해 작성합니다.
몇몇 경우를 제외하고 <style> 태그의 작성 위치는 별 제한이 없지만, HTML 문서는 위에서 아래로 랜더링되기 때문에 스타일링할 요소보다는 먼저 작성되어야 합니다. 그렇지 않으면 스타일링할 요소가 먼저 랜더링된 후 CSS가 적용되어 사용자가 보기에 해당하는 요소의 스타일이 갑자기 변경되는 모습을 볼 수 있습니다. 마치 화면이 깜빡이듯이...

그런데, HTML 문서는 구조적인 마크업을 하는 것이 매우 중요합니다.
화면에 보여지는 요소들은 <body> 태그 내에 작성합니다. 이것이 HTML의 기본 구조입니다.

HTML <body> 태그

작성자는 스타일할 요소도 <body> 태그 내에 작성하기 때문에
HTML의 구조적인 마크업을 고려하고 스타일을 적용할 요소보다는 먼저 위치해야 하는 점도 고려해서
<style> 태그는 <head> 태그 내에 위치하는 것을 권장합니다.

HTML <head> 태그

<style> 태그가 <head> 태그 내에 위치하면 HTML 문서의 구조가 복잡해지지 않아서 구조를 파악하는데 도움이 되고 , <style> 태그의 위치를 쉽게 인지할 수 있기 때문에 요소의 스타일을 지정과 HTML 문서를 다룰 때 여러모로 더 편리합니다.

하지만, 이러한 권장 방법에도 불구하고 <style> 태그가 <head> 태그 내에 위치하지 않고 <body> 태그 내에 위치하는 경우도 종종 있습니다. 이러한 경우는 HTML 문서가 동적으로 구현되는 경우가 대부분인데, HTML 문서를 동적으로 다루는 프로그래밍 언어(예를 들어, PHP)로 구성할 때 개발의 편의성을 좀 더 우선할 때일 것입니다.

다수의 `<style>` 태그 작성

HTML 문서에는 다수의 <style> 태그를 작성할 수 있습니다.
스타일링을 할 때 편의성, 가독성, 스타일할 대상이나 특성 등을 고려하여 다수의 <style> 태그로 나누어 스타일링할 수 있습니다.

HTML 가독성 향상을 목적으로
데스크탑과 모바일의 스타일을 <style> 태그로 분리해서 작성한 예

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>다수의 style 태그 작성</title>
        <style>
            /* 데스크탑 */
            h1 {
                color: white;
                background-color: black;
            }
            p {
                color: gray;
            }
        </style>
        <style>
            /* 모바일 */
            @media (max-width: 500px) {
                h1 {
                    font-size: 1.8em;
                }
                p {
                    font-size: 0.9em;
                }
            }
        </style>
    </head>
    <body>
        <h1>다수의 style 태그 작성</h1>
        <p>
            HTML 문서에는 다수의 style 태그를 작성할 수 있습니다. 
        </p>
    </body>
</html>

`<style>` 태그의 속성

<style> 태그에는 글로벌(전역) 속성을 포함할 수 있으며, 관련 속성으로는 type과 media 속성이 있습니다.

`type`

이 속성은 스타일의 콘텐츠 타입(MIME Type)을 정의합니다. CSS에서 콘텐츠 타입은 text/css입니다.
<style> 태그에서 type 속성의 기본값은 text/css입니다. <style> 태그에서 type 속성을 지정하지 않아도 text/css 값이 적용된다는 의미입니다. 그리고, <style> 태그에서는 type 속성의 값을 text/css 값만 지정해야 합니다. text/css 값 이외의 값을 지정하면 스타일이 적용되지 않습니다.

이러한 이유로 <style> 태그에서 type 속성을 명시적으로 지정할 필요는 없습니다. 명시적으로 지정하지 않더라도 기본값인 text/css 값이 적용되기 때문입니다.

`media`

이 속성은 스타일 시트가 적용될 미디어 유형을 지정합니다. 예를 들어, media="screen"은 화면을 의미하며, media="print"는 인쇄를 의미합니다.

media 속성의 기본값은 all입니다.
media 속성을 생략하면 기본값인 all이 적용되는데 모든 미디어 유형에 지정한다는 의미입니다.

명세서

style 태그의 명세서 사양
명세서 사양
`<style>`	HTML Standard #the-style-element

브라우저 호환성

style 태그의 브라우저 호환성
태그	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<style>`	1	12	1	1

참고문헌

MDN - <style>: The Style Information element

<style> 태그의 정의 및 사용법

<style> 태그의 작성 위치

다수의 <style> 태그 작성

<style> 태그의 속성

type

media

명세서