1. 개발자를 위한 웹 기술
  2. HTML: Hypertext Markup Language
  3. HTML 참고서
  4. HTML 요소 참고서
  5. <style>

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

<style>: 스타일 정보 요소

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.

* Some parts of this feature may have varying levels of support.

HTML <style> 요소는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.

시도해 보기

<style>
  p {
    color: #26b72b;
  }
  code {
    font-weight: bold;
  }
</style>

<p>
  This text will be green. Inline styles take precedence over CSS included
  externally.
</p>

<p style="color: blue">
  The <code>style</code> attribute can override it, though.
</p>

p {
  color: #f00;
}

<style> 요소는 문서의 <head> 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, <link> 요소로 연결하는 편이 좋습니다.

문서가 다수의 <style>과 <link> 요소를 포함하면 서로의 순서대로 DOM에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라 <style> 및 <link> 요소를 배치해야 합니다.

<link> 요소와 동일하게, <style> 요소도 미디어 쿼리를 값으로 가지는 media 특성을 포함할 수 있습니다. 이를 통해 뷰포트 너비 등 매체 기능에 따라 선택적으로 스타일 시트를 적용할 수 있습니다.

특성

이 요소는 전역 특성을 포함합니다.

type

스타일 언어의 MIME 유형. 문자셋은 지정하지 않아야 합니다. 선택 사항이며, 기본값은 text/css입니다. 빈 문자열과 text/css 외의 값은 사용하지 않습니다.

참고 : 현대적인 웹 문서에서 이 특성을 포함할 이유는 거의 존재하지 않습니다.

media

스타일을 적용할 매체. 값은 미디어 쿼리이며, 누락할 경우 기본값은 all입니다.

nonce

style-src Content-Security-Policy에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.

title

대체 스타일 시트 세트를 지정합니다.

사용 중단된 특성

scoped

지정한 경우, <style> 요소의 부모 및 부모의 자식에만 스타일을 적용합니다.

참고 : scoped 특성은 https://github.com/w3c/csswg-drafts/issues/3547에 따라 나중에 다시 추가될 수도 있습니다. 지금 사용하고 싶은 경우 폴리필을 추가하세요.

예제

간단한 스타일 시트

html
<!doctype html>
<html>
  <head>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

다수의 <style> 요소

다음 예제는 두 개의 <style> 요소를 사용합니다. 같은 명시도를 가진 경우, 뒤쪽 <style>이 앞쪽을 덮어쓰는 것에 주목하세요.

html
<!doctype html>
<html>
  <head>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

미디어 쿼리 포함

이번 예제에서는 앞선 코드의 두 번째 <style> 요소에 media 특성을 추가하고, 뷰포트의 너비가 500px 미만일 때에만 스타일을 적용하도록 지정합니다.

html
<!doctype html>
<html>
  <head>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

기술 요약

콘텐츠 카테고리 메타데이터 콘텐츠. scoped 특성이 존재하면 플로우 콘텐츠.
가능한 콘텐츠 type 특성에 맞는 텍스트, 즉 text/css.
태그 생략 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소 메타데이터 콘텐츠를 허용하는 모든 요소
가능한 ARIA 역할 없음
DOM 인터페이스 HTMLStyleElement

명세

Specification
HTML
# the-style-element

브라우저 호환성

같이 보기

  • 외부 스타일 시트를 사용하기 위한 <link> 요소.

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content