HTML <style> 태그

정의와 사용법

<style> 태그는 문서의 스타일 정보(스타일 시트)를 정의합니다.

제목: <style> 요소에서, 브라우저에서 HTML 요소가 표시되는 방식을 지정할 수 있습니다.

주의하세요, style 요소는 HTML 문서에 내장된 CSS 스타일을 정의하며, link 요소는 외부 스타일 시트의 스타일을 가져오기 위해 사용됩니다.

style 요소는 HTML 문서의 여러 부분에 나타날 수 있습니다. 문서는 여러 style 요소를 포함할 수 있으므로, 모든 스타일 정의를 head 부분에 모으지 않아도 됩니다. 템플릿 엔진을 사용하여 페이지를 생성하는 경우 이 기능이 매우 유용합니다. 이렇게 하면 페이지 특유의 스타일을 템플릿 정의의 스타일에 추가할 수 있습니다.

추가로 참조:

HTML 강의:HTML CSS

CSS 강의:CSS 강의

HTML DOM 참조 가이드:Style 객체

예제

예제 1

사용 <style> 요소는 간단한 스타일 시트를 HTML 문서에 적용합니다:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>이것은 제목입니다</h1>
<p>이것은 문단입니다.</p>
</body>
</html>

직접 시도해 보세요

예제 2

동일 요소에 대한 여러 가지 스타일:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>이것은 제목입니다</h1>
<p>이것은 문단입니다.</p>
</body>
</html>

직접 시도해 보세요

힌트와 주석

주의:브라우저가 스타일 시트를 읽을 때, 그것은 스타일 시트에 있는 정보를 기반으로 HTML 문서를 포맷합니다. 동일한 선택자(요소)에 대해 다른 스타일 시트에서 여러 가지 속성을 정의했을 경우, 마지막으로 읽은 스타일 시트의 값을 사용합니다!(위의 예시를 참조하세요)!

ヒント:외부 스타일 시트에 링크하려면 <link> 태그.

ヒント:스타일 시트에 대한更多信息를 알고 싶다면, 우리의 CSS 강의.

속성

속성 값 설명
media 미디어 쿼리 스타일 사용하는 미디어를 정의합니다.
type text/css <style> 태그의 미디어 유형을 정의합니다.

전역 속성

<style> 태그는 또한 HTML에서의 전역 속성.

이벤트 속성을 지원합니다

<style> 태그는 또한 HTML에서의 이벤트 속성.

기본적인 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다. <style> 요소:

style {
  display: none;
}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원