목차
Style 태그란
HTML5의 <style> 태그는 HTML 문서 내에 CSS 스타일을 포함하는 데 사용됩니다. 스타일은 HTML 파일에 직접 작성하거나 <link> 태그를 사용하여 외부 파일에서 포함할 수 있습니다.
다음은 <style> 태그를 사용하여 HTML 파일 내에 CSS 스타일을 포함하는 방법의 예입니다.
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>이 예에서 <style> 태그는 CSS 스타일 블록을 묶는 데 사용됩니다. <style> 태그 내부의 스타일은 CSS 선택기와 일치하는 페이지의 요소에 적용됩니다.
또는 다음과 같이 <link> 태그를 사용하여 외부 CSS 파일을 포함할 수 있습니다.
<link rel="stylesheet" href="styles.css">이 예에서 rel 속성은 "stylesheet"로 설정되어 링크된 문서가 CSS 스타일시트임을 나타내고 href 속성은 CSS 파일의 위치를 지정합니다.
<style> 태그는 다음과 같은 다른 속성도 가질 수 있습니다.
- type유형: "text/css"와 같은 스타일시트 유형을 지정합니다.
- media: 스타일시트가 의도된 미디어 유형(예: 화면, 인쇄 또는 음성)을 지정합니다.
페이지가 렌더링되기 전에 스타일이 적용되도록 하려면 HTML 문서의 <head> 섹션에 <style> 태그를 배치해야 합니다.
<style> 태그를 사용하면 개발자가 웹 페이지의 표시를 제어하여 시각적으로 더 매력적이고 읽기 쉽게 만들 수 있습니다. 이것은 개발자가 웹 페이지의 구조에서 프리젠테이션을 분리하고 더 유지하기 쉽게 만들 수 있는 강력한 도구입니다.
Style 태그의 특징
- HTML 문서 내에 CSS 스타일을 포함하는 데 사용됩니다. <style> 태그는 HTML 파일에 직접 작성하거나 <link> 태그를 사용하여 외부 파일에서 포함할 수 있는 CSS 스타일 블록을 묶는 데 사용됩니다.
- HTML 문서의 <head> 섹션에 배치해야 합니다. 페이지가 렌더링되기 전에 스타일이 적용되도록 하려면 <style> 태그를 HTML 문서의 <head> 섹션에 배치해야 합니다.
- type 속성을 가질 수 있습니다. type 속성은 "text/css"와 같은 스타일시트 유형을 지정합니다.
- 미디어 속성을 가질 수 있습니다. 미디어 속성은 스타일시트가 의도된 미디어 유형(예: 화면, 인쇄 또는 음성)을 지정합니다.
- 이를 통해 개발자는 웹페이지의 표시를 제어할 수 있습니다. <style> 태그를 사용하면 개발자가 웹페이지의 표시를 제어하여 시각적으로 더 매력적이고 읽기 쉽게 만들 수 있습니다.
- 웹 페이지 구조에서 프리젠테이션을 분리할 수 있습니다. <style> 태그를 사용하여 개발자는 웹 페이지 구조에서 프리젠테이션을 분리할 수 있으므로 유지 관리가 더 쉬워집니다.
HTML5의 다른 글
'컴퓨터과학/HTML5' 카테고리의 글 목록
모든 분야의 정보를 담고 있는 정보의 호텔입니다.
jkcb.tistory.com