A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ko/docs/Web/HTML/Reference/Elements/style below:

<style>: 스타일 ì •ë³´ 요소 - HTML: Hypertext Markup Language

<style>: 스타일 정보 요소

Baseline Widely available *

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>

<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에 따라 나중에 다시 추가될 수도 있습니다. 지금 사용하고 싶은 경우 폴리필을 추가하세요.

예제 간단한 스타일 시트 
<!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>
기술 요약 명세 브라우저 호환성 같이 보기

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4