<style>
태그의 정의 및 사용법
<style>
태그는
HTML 문서에서 CSS 스타일을 작성할 수 있는 영역을 나타내는 태그입니다.
이 영역에는 CSS 언어로 작성된 스타일 코드와 주석만을 포함할 수 있습니다.
<style>
태그는 HTML에서 스타일을 지정하는 여러 방법 중 하나입니다.
화면에서는 표시되지 않습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>style 태그</title>
<style> /* CSS 스타일을 작성할 수 있는 영역을 나타내는 태그 */
h1 {
color: white;
background-color: black;
}
p {
color: gray;
}
</style>
</head>
<body>
<h1>style 태그</h1>
<p>
style 태그는 HTML 문서에서 CSS 스타일을 작성할 수 있는
영역을 나타내는 태그입니다.
</p>
</body>
</html>
CSS 스타일시트를 연결해서 HTML에 스타일을 지정하려면 <link>
태그를 사용하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>style 태그</title>
<!-- CSS 스타일시트를 연결해서 HTML에 스타일을 지정 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!---->
</body>
</html>
<style>
태그의 작성 위치
<style>
태그는 HTML 문서에서 원하는 요소의 스타일을 지정할 CSS 영역을 만들기 위해 작성합니다.
몇몇 경우를 제외하고 <style>
태그의 작성 위치는 별 제한이 없지만, HTML 문서는 위에서 아래로 랜더링되기 때문에 스타일링할 요소보다는 먼저 작성되어야 합니다. 그렇지 않으면 스타일링할 요소가 먼저 랜더링된 후 CSS가 적용되어 사용자가 보기에 해당하는 요소의 스타일이 갑자기 변경되는 모습을 볼 수 있습니다. 마치 화면이 깜빡이듯이...
그런데, HTML 문서는 구조적인 마크업을 하는 것이 매우 중요합니다.
화면에 보여지는 요소들은 <body>
태그 내에 작성합니다. 이것이 HTML의 기본 구조입니다.
작성자는 스타일할 요소도 <body>
태그 내에 작성하기 때문에
HTML의 구조적인 마크업을 고려하고 스타일을 적용할 요소보다는 먼저 위치해야 하는 점도 고려해서
<style>
태그는 <head>
태그 내에 위치하는 것을 권장합니다.
<style>
태그가 <head>
태그 내에 위치하면 HTML 문서의 구조가 복잡해지지 않아서 구조를 파악하는데 도움이 되고 , <style>
태그의 위치를 쉽게 인지할 수 있기 때문에 요소의 스타일을 지정과 HTML 문서를 다룰 때 여러모로 더 편리합니다.
다수의 <style>
태그 작성
HTML 문서에는 다수의 <style>
태그를 작성할 수 있습니다.
스타일링을 할 때 편의성, 가독성, 스타일할 대상이나 특성 등을 고려하여 다수의 <style>
태그로 나누어 스타일링할 수 있습니다.
데스크탑과 모바일의 스타일을
<style>
태그로 분리해서 작성한 예
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>다수의 style 태그 작성</title>
<style>
/* 데스크탑 */
h1 {
color: white;
background-color: black;
}
p {
color: gray;
}
</style>
<style>
/* 모바일 */
@media (max-width: 500px) {
h1 {
font-size: 1.8em;
}
p {
font-size: 0.9em;
}
}
</style>
</head>
<body>
<h1>다수의 style 태그 작성</h1>
<p>
HTML 문서에는 다수의 style 태그를 작성할 수 있습니다.
</p>
</body>
</html>
사용되는 속성들
<style>
태그에는 글로벌(전역) 속성을 포함할 수 있으며, 관련 속성으로는 type
과 media
속성이 있습니다.
type
속성
이 속성은 스타일의 콘텐츠 타입(MIME Type)을 정의합니다. CSS에서 콘텐츠 타입은 text/css
입니다.
<style>
태그에서 type
속성의 기본값은 text/css
입니다. <style>
태그에서 type
속성을 지정하지 않아도 text/css
값이 적용된다는 의미입니다. 그리고, <style>
태그에서는 type
속성의 값을 text/css
값만 지정해야 합니다. text/css
값 이외의 값을 지정하면 스타일이 적용되지 않습니다.
이러한 이유로 <style>
태그에서 type
속성을 명시적으로 지정할 필요는 없습니다. 명시적으로 지정하지 않더라도 기본값인 text/css
값이 적용되기 때문입니다.
<!-- 굳이 type 속성을 명시할 필요는 없습니다. -->
<style type="text/css">...</style>
type
속성을 생략합니다.
<!-- type 속성을 생략했습니다. -->
<style>...</style>
media
속성
이 속성은 스타일시트가 적용될 미디어 유형을 지정합니다. 예를 들어, media="screen"
은 화면을 의미하며, media="print"
는 인쇄를 의미합니다.
media
속성의 기본값은 all
입니다.
media
속성을 생략하면 기본값인 all
이 적용되는데 모든 미디어 유형에 지정한다는 의미입니다.
media
속성을 생략하면
모든 미디어 유형에 스타일을 지정합니다.
<style>...</style>
<style media="print">...</style>
명세서
명세서 사양 | |
---|---|
<style>
|
HTML Standard #the-style-element |
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<style>
|
1 | 12 | 1 | 1 |