<style>: 스타일 정보 요소

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

<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 (en-US)에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.
title
대체 스타일 시트 세트를 지정합니다.

사용 중단된 특성

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

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

예제

간단한 스타일 시트

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

다수의 <style> 요소

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

<!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 미만일 때에만 스타일을 적용하도록 지정합니다.

<!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.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 메타데이터 콘텐츠를 허용하는 모든 요소
가능한 ARIA 역할 없음
DOM 인터페이스 HTMLStyleElement (en-US)

명세

명세 상태 주석
HTML Living Standard
The definition of 'style' in that specification.
Living Standard HTML5 에서 변화 없음.
HTML5
The definition of 'style' in that specification.
Recommendation scoped 특성이 추가됨
HTML 4.01 Specification
The definition of 'style' in that specification.
Recommendation

브라우저 호환성

BCD tables only load in the browser

같이 보기

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