본문으로 건너뛰기
실습하기

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 파일을 참조할 필요가 없지만, 복잡한 웹 사이트에서는 유지 관리가 어려울 수 있습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!