CSS의 구조와 적용 방법

작성일: at 오전 04:15

Table of contents

Open Table of contents

HTML에 CSS를 적용하는 세 가지 방법

내부 스타일 시트

<style> tag를 통해 HTML 문서 내부에 스타일을 정의하는 방법

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>내부 스타일 시트 적용</title>
    <style>
        p {
            color: red;
        }
    </style>
  </head>
  <body>
    <h1>Hello world!</h1>
    <p>내부 스타일 시트 방식으로 서식 적용하기</p>
  </body>
</html>

외부 스타일 시트

CSS 파일을 별도로 작성한 다음, <link> 태그로 파일을 참조하는 방법.

<link rel='stylesheet' href='../styles/style.css'/>

rel 속성으로 href에 링크된 파일이 스타일 시트임을 명시한다.

인라인 스타일

마지막은 태그 내부에 style 속성을 사용하는 방법이다.

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
    Hello World!
</h1>

이 방식은 유지보수가 힘들고 중복을 피할 수 없는 방식이므로 일반적인 웹 페이지를 개발할 때에는 사용하지 않는 것이 좋다.

그러나 CMS(Content Management System)에 의해 수정 범위가 제한되거나 이메일처럼 높은 호환성이 요구되는 곳에서는 인라인 방식을 사용하기도 한다.