더북(TheBook)

4.2.2 외부 스타일 시트 사용하기

외부 스타일 시트(external style sheet)는 CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방법입니다. 이때 별도 파일의 확장자는 css여야 합니다. 별도로 작성한 CSS 파일을 HTML 문서에서 연결할 때는 link 태그를 사용합니다.

형식

<link rel="stylesheet" href="css 파일 경로">

외부 스타일 시트 방법을 실습해 보겠습니다. 먼저 프로젝트 폴더(CODE)에 style.css 파일을 만듭니다. 그리고 다음과 같이 작성합니다.

04/02/style.css

h1{
  color:red;
}

그런 다음 같은 폴더에 index.html 파일을 만들어 다음과 같이 작성합니다.

04/02/index.html

<head>
  <title>외부 스타일 시트(External Style Sheet)</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>외부 스타일 시트</h1>
</body>

그림 4-3 실행결과

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.