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 Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefox
312111
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
14.41841.0
media
IEEdgeChromeSafariFirefox
312111
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
14.41841.0
title
IEEdgeChromeSafariFirefox
312111
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
14.41841.0
MDN BCD에서 가져오는 데이터입니다.

같이 보기

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)