HTML <style>: 스타일 정보 요소

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

<style>
  p {
    color: red;
  }
</style>

<p>빨간색 글씨!</p>

불러오는 중...

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

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

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

특성

전역 특성을 포함합니다.

media: 스타일을 적용할 매체를 나타내는 미디어 쿼리입니다. 기본 값은 all입니다.
nonce: Content-Security-Policy style-src에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(일회용 숫자 값)입니다. 서버는 정책을 매번 전송할 때마다 항상 고유 논스를 생성해야 합니다. 논스 값을 예측할 수 있으면 매우 쉽게 리소스 정책을 우회할 수 있으므로, 알아낼 수 없는 값을 생성하는 것이 중요합니다.
title: 대체 스타일 시트 세트를 지정합니다.

예제

미디어 쿼리

media 특성을 사용해 스타일 시트 레벨의 미디어 쿼리를 지정하는 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: red;
      }
    </style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>화면 너비가 500픽셀 이하면 파랗게 됩니다!</p>
  </body>
  <html></html>
</html>

명세

HTML Standard

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`style`
`blocking`
`media`
`type`

같이 보기

외부 스타일 시트 연결: <link>
스크립트: <script>