CSS 강좌 / CSS를 HTML에 적용시키는 방법

CSS를 HTML에 적용하는 방법은 요소의 style 속성에 쓰는 인라인 스타일, style 요소에 쓰는 내부 스타일시트, 별도 CSS 파일을 link로 연결하는 외부 스타일시트로 나눌 수 있습니다. 한 문서의 짧은 실습에는 내부 스타일시트가 편하고, 여러 페이지가 같은 디자인을 쓴다면 외부 스타일시트로 관리하는 편이 좋습니다.

세 가지 방법의 작성 위치와 용도

세 방법 모두 CSS를 적용하지만 “외부 파일이므로 가장 약하다”처럼 작성 위치만으로 모든 우선순위를 정하지는 않습니다. 내부와 외부의 일반 규칙은 선택자와 연결 순서 등의 영향을 받습니다. 인라인 스타일은 같은 작성자 출처의 일반 규칙보다 보통 우선하지만 !important 등 다른 조건을 포함하면 비교가 달라집니다. 충돌의 자세한 판단은 상속·우선순위·캐스케이드에서 다룹니다.

인라인 스타일과 내부 스타일시트

인라인 스타일에서는 꾸밀 요소의 style 속성 안에 선언을 적습니다. 선택자나 바깥 중괄호를 넣지 않습니다. 다음 코드에서는 안내 문장 한 개에만 색과 배경을 지정합니다.

<p style="color: #087f5b; background-color: #e9f7ef;">
  매일 오전 9시에 문을 엽니다.
</p>

내부 스타일시트에서는 head 안의 style 요소에 선택자와 중괄호를 포함한 규칙을 적습니다. 같은 클래스가 붙은 여러 문장을 한 규칙으로 꾸밀 수 있습니다. 아래 예제에서 HTML의 class 값은 notice, CSS 선택자는 .notice입니다.

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">매일 오전 9시에 문을 엽니다.</p>
</body>

두 예제는 작성 위치를 비교하기 위한 HTML 조각입니다. 이 실습에서 방법을 바꿀 때는 이전 방법으로 넣은 같은 속성의 선언을 제거하세요. 여러 방식을 동시에 남겨 두면 연결 실패와 규칙 충돌을 구별하기 어려워집니다.

외부 CSS 파일 연결하기

빈 garden 폴더를 만들고 다음 세 파일을 저장합니다. CSS 파일에는 CSS만 적으며 <style> 태그를 넣지 않습니다. HTML 파일 두 개는 모두 같은 폴더의 style.css를 연결합니다.

garden/
├─ index.html
├─ visit.html
└─ style.css

index.html

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>작은 정원</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>작은 정원</h1>
  <p class="notice">매일 오전 9시에 문을 엽니다.</p>
  <a href="visit.html">방문 안내 보기</a>
</body>
</html>

visit.html

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>방문 안내</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>방문 안내</h1>
  <p class="notice">물병과 편한 신발을 준비하세요.</p>
  <a href="index.html">정원 소개로 돌아가기</a>
</body>
</html>

style.css

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet"는 연결한 파일이 스타일시트라는 뜻이고, href="style.css"는 읽어 올 파일의 위치입니다. HTML5 문서에서는 일반적인 CSS 연결에 type="text/css"를 따로 적을 필요가 없습니다. 로컬 파일을 직접 여는 이 실습에는 서버나 추가 라이브러리가 필요하지 않습니다.

index.html을 브라우저에서 열면 초록색 제목과 연한 안내 상자가 보입니다. “방문 안내 보기”를 누르면 visit.html로 이동하고, 내용은 달라도 제목 색과 안내 상자의 모양은 같습니다. style.css의 제목 색을 #1d4ed8로 바꾼 뒤 두 페이지를 각각 새로고침하면 두 제목이 모두 파란색으로 바뀝니다. 이것이 공통 파일을 사용하는 이점입니다.

폴더 위치에 맞게 href 작성하기

아래 경로는 HTML 문서의 위치를 기준으로 읽습니다. 예제처럼 base 요소로 기준 URL을 바꾸지 않은 일반 문서가 전제입니다. CSS 파일을 옮기면 파일 이름뿐 아니라 href도 함께 바꾸어야 합니다.

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

마지막 배치에서는 pages/index.html에 <link rel="stylesheet" href="../css/style.css">를 적습니다. ../는 상위 폴더로 한 단계 이동한다는 뜻입니다. 웹 경로에는 역슬래시 대신 슬래시를 사용하세요. /css/style.css처럼 앞에 슬래시를 붙이면 사이트 루트 기준 경로가 되어 이 로컬 폴더 실습의 상대 경로와 의미가 다릅니다. 상대 경로 예시는 MDN의 외부 CSS 연결 설명에서도 확인할 수 있습니다.

적용되지 않을 때는 연결·선택·충돌을 구분하기

1. 파일 연결부터 확인합니다. 확장자가 .css.txt로 저장되지 않았는지, href와 실제 폴더 배치가 일치하는지 봅니다. 배포 서버에서는 파일 이름의 대소문자도 맞춥니다. 웹 서버에서 연 페이지라면 개발자 도구의 Network에서 CSS 요청과 응답을 확인할 수 있습니다. 로컬 파일은 같은 HTTP 상태 코드가 표시되지 않을 수 있습니다.
2. 대상 요소가 맞는지 확인합니다. HTML에는 class="notice"인데 CSS에 .notcie를 썼다면 파일이 정상적으로 읽혀도 안내문이 바뀌지 않습니다. 개발자 도구의 Elements에서 실제 클래스 이름을 보고 Styles에서 규칙을 찾습니다.
3. 규칙이 덮어써졌는지 확인합니다. 다른 색 선언이 나중에 이긴 경우 Styles에 원래 선언이 취소선으로 나타날 수 있습니다. CSS 파일이 없는 문제와 구분해서 최종 적용 규칙을 확인하세요.

마지막으로 CSS 파일의 맨 아래에 body { background-color: #fff4cc; }를 임시로 넣어 보세요. 새로고침 후 페이지 배경이 노란빛으로 바뀌면 파일 연결은 된 것입니다. 그 다음 안내문 선택자와 충돌을 살펴봅니다. 진단이 끝나면 임시 배경 규칙을 지우고 저장하세요. 연결을 고치기 위해 !important를 추가해도 존재하지 않는 CSS 파일이나 틀린 선택자는 해결되지 않습니다.