본문으로 건너뛰기

<style> 태그

style 태그

<style> 태그는 HTML 문서 내 요소들을 꾸미기 위한 CSS 스타일을 정의합니다.


사용 방법

<style> 태그는 HTML <head> 섹션 내에 위치해야 합니다.

style 태그 내에 아래와 같이 CSS 규칙을 추가하여 웹 페이지의 다양한 요소에 스타일을 적용할 수 있습니다.

(참고: CSS에 대한 자세한 내용은 HTML 강의 이후에 소개됩니다)

style 태그 사용 예제
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>

위 style 태그는 웹 페이지의 배경색(background-color)을 연한 파란색(lightblue)으로 만들고, <h1> 태그의 텍스트를 중앙 정렬합니다.


style 태그 장점

  • 웹 페이지에 직접 스타일을 적용하기 때문에 별도의 CSS 파일을 참조할 필요가 없습니다.

  • 특정 페이지에만 스타일을 적용할 때 유용합니다.


style 태그 단점

  • 복잡한 웹 사이트에서는 여러 페이지에 동일한 스타일을 반복적으로 적용해야 할 수 있기 때문에 유지 관리가 어려울 수 있습니다.

  • 웹 페이지의 로딩 시간에 영향을 줄 수 있습니다. 스타일 정보가 많으면 페이지의 크기가 커지게 됩니다.


style 태그 정리

  • style 태그는 <head> 섹션 내에 위치합니다.

  • CSS 스타일 규칙을 HTML 문서에 직접 포함하기 때문에 별도의 CSS 파일을 참조할 필요가 없지만, 복잡한 웹 사이트에서는 유지 관리가 어려울 수 있습니다.