CSS 연결하기

link 요소는 HTML 파일에 CSS 파일을 잇는 줄입니다. 규칙을 style.css처럼 따로 된 파일에 모아 두고, 그 파일을 쓸 페이지마다 head에 link 한 줄을 넣습니다.

규칙의 모양에서 style 요소에 쓴 규칙은 그 페이지 하나에만 닿았습니다. 레시피 노트처럼 페이지가 둘이면 같은 규칙을 두 파일에 두 번 적어야 하고, 색 하나를 바꿀 때도 두 곳을 고쳐야 합니다. 규칙을 파일 하나로 옮기고 두 페이지가 그 파일을 이으면 한 곳만 고쳐도 두 페이지가 함께 바뀝니다. 과목 끝의 할 일 목록 화면도 이렇게 style.css 한 파일을 씁니다.

<style>  h1 {    color: #005bb5;  }</style>

1규칙을 style.css로 옮기기

HTML 파일과 같은 폴더에 style.css라는 파일을 만들고, style 요소 안에 있던 규칙만 옮겨 적습니다. CSS 파일에는 CSS만 씁니다. <style> 태그는 HTML이라 옮기지 않습니다. 첫 줄의 /* style.css */는 파일 이름을 적은 CSS 주석입니다.

/* style.css */
h1 {
  color: #005bb5;
}

그다음 HTML 파일의 head 안, title 바로 아래에 link 줄을 넣습니다.

<link
  rel="stylesheet"
  href="style.css"
/>
<h1>김치볶음밥</h1>

/* style.css */
h1 {
  color: #005bb5;
}

이 레슨부터 예제는 HTML 판 아래에 CSS 판을 둡니다. CSS 판은 그 HTML이 이은 style.css이고, 결과 화면은 둘을 함께 그립니다. 규칙은 그대로이니 화면도 style 요소에 썼을 때와 같습니다.

link 줄을 한 줄로 쓰면 32칸을 넘어서 이 과목은 속성을 한 줄에 하나씩 나눠 씁니다. 한 줄로 써도 같은 요소입니다. link는 화면에 그려지는 내용이 아니라 문서에 딸린 정보라서 head에 둡니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>레시피 노트</title>
  <link
    rel="stylesheet"
    href="style.css"
  />
</head>
<body>
  <h1>레시피 노트</h1>
</body>
</html>

/* style.css */
h1 {
  color: #005bb5;
}

2CSS를 넣는 세 곳과 닿는 범위

CSS를 넣는 곳은 셋이고, 넣은 곳에 따라 닿는 범위가 다릅니다.

style 속성의 값에는 선택자와 중괄호 없이 선언만 적습니다. 그 요소 하나에만 닿으니 고를 필요가 없습니다.

<h1 style="color: #005bb5;">
  김치볶음밥
</h1>
<h1>계란말이</h1>

첫 h1만 파랗고 둘째 h1은 그대로입니다. 이 과목은 CSS를 파일로 모아 link로 잇습니다. style 요소는 짧은 예제를 한 파일에서 쳐 볼 때만 쓰고, style 속성은 쓰지 않습니다.

3link 주소의 출발점

link의 href도 경로 읽기의 상대 주소입니다. 상대 주소는 그 주소를 적은 파일이 있는 폴더에서 출발합니다(브라우저 규칙 1). 레시피 노트는 style.css를 두 HTML 파일과 같은 폴더에 둡니다.

recipe-note/
├── index.html
├── kimchi.html
├── style.css
└── images/

index.html의 폴더가 recipe-note/이니 href="style.css"는 recipe-note/style.css⁠를 가리킵니다. 같은 파일을 두고 href만 css/style.css로 적으면 브라우저는 recipe-note/css/style.css⁠를 찾다가 없어서 그만둡니다. 오류 창은 뜨지 않고, CSS가 하나도 닿지 않은 모양으로 그려집니다.

<link
  rel="stylesheet"
  href="css/style.css"
/>
<h1>김치볶음밥</h1>

브라우저가 style.css를 받지 못했으니 결과 화면도 CSS 판 없이 그렸습니다. 제목은 기본 글자색 그대로입니다.

CSS가 하나도 안 먹으면 먼저 link 주소를 봅니다. 규칙은 규칙의 모양에서 먹는 것을 이미 봤으니, 규칙보다 파일이 닿았는지가 먼저입니다. 이 단원 끝 브라우저 기본 스타일과 Styles 창에서 이 차례를 '안 먹을 때 찾는 차례'로 정리합니다.

예제

두 페이지가 style.css 하나를 함께 쓴다

목록 페이지 index.html과 상세 페이지 kimchi.html이 같은 폴더의 style.css를 잇습니다. 두 파일의 head에는 1절과 같은 link 줄이 있고, 아래 조각은 body 안만 보였습니다. 먼저 목록 페이지입니다.

<h1>레시피 노트</h1>
<p>내가 만든 요리를 기록하는 곳</p>

/* style.css */
h1 {
  color: #005bb5;
}

p {
  color: #6e6e73;
}

상세 페이지도 같은 style.css를 잇습니다.

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

/* style.css */
h1 {
  color: #005bb5;
}

p {
  color: #6e6e73;
}

두 페이지의 제목과 문단이 같은 색입니다. style.css에서 #005bb5를 다른 색으로 바꿔 저장하면, 두 페이지를 새로고침했을 때 두 제목이 함께 바뀝니다. HTML 파일은 한 줄도 고치지 않습니다.

자주 틀리는 곳

틀린 생각: link에 href만 적으면 CSS 파일이 이어진다.

rel은 잇는 파일이 무엇인지 알려 주는 속성입니다. rel="stylesheet"가 없으면 브라우저는 그 파일을 모양을 적은 파일로 쓰지 않습니다.

<link href="style.css" />
<h1>김치볶음밥</h1>

같은 폴더에 style.css가 있어도 제목은 기본 글자색 그대로입니다(크롬 기준). 브라우저가 CSS를 쓰지 않으니 결과 화면도 CSS 판 없이 그렸습니다.

맞는 규칙: link에는 rel="stylesheet"와 href를 함께 씁니다.

틀린 생각: CSS 파일 첫 줄에 HTML 주석으로 파일 이름을 적어도 된다.

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

<!-- style.css -->
h1 {
  color: #005bb5;
}

p {
  color: #6e6e73;
}

문단은 회색인데 제목만 파랗지 않습니다. CSS 파일 안의 <!-- -->는 주석이 아니라 알아듣지 못하는 글입니다. 이 글이 첫 규칙의 선택자 앞에 붙어 선택자째 틀린 글이 되고, 브라우저는 그 규칙을 통째로 버립니다(브라우저 규칙 4). 둘째 규칙부터는 그대로 먹습니다. style 요소의 규칙을 옮길 때 <style> 태그째 붙여 넣어도 같은 일이 생깁니다.

맞는 규칙: CSS 파일에는 CSS만 씁니다. 파일 이름 주석은 CSS 주석 /* style.css */로 씁니다.

틀린 생각: 몇 곳만 꾸밀 거라면 style 속성으로 꾸며도 된다.

<h1 style="color: #005bb5;">
  레시피 노트
</h1>
<p style="color: #6e6e73;">
  내가 만든 요리를 기록하는 곳
</p>

화면은 예제의 목록 페이지와 같습니다. 그러나 모양이 요소마다 흩어져 있어 상세 페이지에도 같은 속성을 요소마다 다시 적어야 하고, 색 하나를 바꿀 때도 그곳을 모두 찾아 고쳐야 합니다.

맞는 규칙: 모양은 style.css 한 곳에 모읍니다. 그러면 한 곳만 고쳐도 그 파일을 이은 모든 페이지가 바뀝니다.

확인 문제

1. 예제의 목록 페이지 index.html에서 link 줄을 지우고 저장했습니다. 두 페이지를 새로고침하면 두 페이지 제목의 글자색은 어떻게 될까요?

• ① 두 제목 모두 검정(기본 글자색)
• ② 목록 제목만 검정, 상세 제목은 파랑
• ③ 두 제목 모두 파랑

<h1>레시피 노트</h1>
<p>내가 만든 요리를 기록하는 곳</p>

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

/* style.css */
h1 {
  color: #005bb5;
}

p {
  color: #6e6e73;
}

2. cafe 폴더가 아래와 같습니다. index.html에 style.css를 잇는 link의 ____ 자리를 채우세요.

cafe/
├── index.html
└── css/
    └── style.css

<link
  rel="stylesheet"
  href="____"
/>

3. 여행 일정 사이트입니다. index.html은 제목이 파란데, days 폴더의 day1.html은 CSS가 하나도 안 먹습니다. day1.html의 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.

trip/
├── index.html
├── style.css
└── days/
    └── day1.html

<link
  rel="stylesheet"
  href="style.css"
/>
<h1>첫째 날</h1>
<p>공항에서 숙소로 갑니다.</p>

<link
  rel="stylesheet"
  href="../style.css"
/>
<h1>첫째 날</h1>
<p>공항에서 숙소로 갑니다.</p>

/* style.css */
h1 {
  color: #005bb5;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절의 index.html과 style.css를 한 폴더에 저장하고 index.html을 브라우저로 엽니다. href의 style.css를 styles.css로 한 글자 틀리게 바꾸면 제목이 어떻게 될지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다. 확인했으면 되돌립니다.