CSS 기초 완벽 정리 – HTML에 CSS 적용하는 3가지 방법

CSS 기초 완벽 정리 – HTML에 CSS 적용하는 3가지 방법

지금까지 HTML 기초 시리즈를 통해 기본 구조, 표, 폼, 시맨틱 태그, 이미지와 동영상까지 웹페이지의 뼈대를 만드는 방법을 모두 알아보았습니다. 하지만 HTML만으로 만든 페이지는 흰 바탕에 검은 글씨만 나열되어 다소 밋밋하게 느껴졌을 것입니다. 이제부터는 이 뼈대에 색을 입히고, 글꼴을 바꾸고, 보기 좋게 배치하는 CSS를 배워보겠습니다. CSS 시리즈의 첫 번째 글인 오늘은 CSS가 무엇인지, 기본 문법은 어떻게 생겼는지, 그리고 HTML에 CSS를 적용하는 세 가지 방법과 각각의 장단점을 정리해 보겠습니다.

1. CSS란 무엇인가요?

CSS는 Cascading Style Sheets의 약자로, 웹페이지의 디자인과 배치를 담당하는 언어입니다. HTML 기초 첫 글에서 웹을 집에 비유했던 것을 떠올려 보세요. HTML이 기둥과 벽 같은 구조라면, CSS는 벽지 색, 가구 배치, 조명 같은 인테리어에 해당합니다.

같은 HTML이라도 어떤 CSS를 적용하느냐에 따라 완전히 다른 웹사이트처럼 보일 수 있습니다. 실제로 많은 블로그 플랫폼에서 “스킨”이나 “테마”를 바꾸면 글 내용은 그대로인데 디자인만 달라지는 것도, 같은 HTML에 서로 다른 CSS를 적용하기 때문입니다. 이처럼 내용(HTML)과 디자인(CSS)을 분리하는 것이 현대 웹 개발의 기본 원칙입니다.

이름에 들어 있는 ‘Cascading’은 ‘폭포처럼 위에서 아래로 흐른다’는 뜻입니다. 여러 스타일이 겹칠 때 정해진 규칙에 따라 우선순위가 결정되고, 부모 요소의 스타일이 자식 요소에게 이어지는 특징을 표현한 말입니다. 이 개념은 글 후반부에서 다시 설명하겠습니다.

2. CSS 기본 문법 이해하기

CSS 문법은 생각보다 단순합니다. “무엇을, 어떤 속성을, 어떤 값으로 바꿀 것인가”만 적으면 됩니다.

h1 {
  color: blue;
  font-size: 32px;
}

• 선택자(Selector) : 스타일을 적용할 대상입니다. 위 예시에서는 h1로, 모든 h1 제목에 적용됩니다.
• 속성(Property) : 무엇을 바꿀지 정합니다. color는 글자 색, font-size는 글자 크기입니다.
• 값(Value) : 속성을 어떻게 바꿀지 정합니다. blue, 32px가 값입니다.
• 선언(Declaration) : 속성: 값; 한 묶음을 선언이라고 하며, 중괄호 { } 안에 여러 개를 나열할 수 있습니다.

문법에서 꼭 지켜야 할 규칙은 세 가지입니다. 속성과 값 사이에는 콜론(:)을 넣고, 각 선언 끝에는 세미콜론(;)을 붙이며, 선언들은 중괄호로 감쌉니다. 특히 세미콜론을 빠뜨리면 그 다음 줄까지 적용되지 않는 경우가 많으니 주의해야 합니다. 또한 CSS에서 메모를 남길 때는 /* 주석 내용 */ 형식을 사용합니다. HTML의 <!-- -->와 모양이 다르니 헷갈리지 않도록 해 주세요.

3. 방법 ① 인라인 스타일 (Inline Style)

첫 번째 방법은 HTML 태그 안에 style 속성을 넣어 직접 스타일을 적는 방식입니다. 선택자와 중괄호 없이 속성과 값만 적습니다.

<h1 style="color: blue; font-size: 32px;">안녕하세요</h1>
<p style="color: gray;">인라인 스타일로 꾸민 문단입니다.</p>

결과는 다음과 같습니다.

인라인 스타일은 특정 요소 하나만 빠르게 바꿀 때 편리합니다. 하지만 h1이 열 개라면 열 번 모두 같은 코드를 적어야 하고, 나중에 색을 바꾸려면 열 군데를 모두 고쳐야 합니다. 또한 HTML과 디자인 코드가 뒤섞여 코드가 길고 지저분해집니다. 그래서 일반적인 웹사이트 제작에서는 잘 사용하지 않고, 테스트용이나 이메일 템플릿, 그리고 지금 이 글처럼 CSS 파일을 따로 쓸 수 없는 블로그 글에서 주로 사용합니다.

4. 방법 ② 내부 스타일 시트 (Internal Style Sheet)

두 번째 방법은 HTML 문서의 <head> 안에 <style> 태그를 넣고, 그 안에 CSS를 모아 적는 방식입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내부 스타일 시트</title>
  <style>
    h1 {
      color: blue;
      font-size: 32px;
    }
    p {
      color: gray;
    }
  </style>
</head>
<body>
  <h1>안녕하세요</h1>
  <p>내부 스타일 시트로 꾸민 문단입니다.</p>
  <p>이 문단도 자동으로 회색이 됩니다.</p>
</body>
</html>

이 방식은 한 번만 적어도 문서 안의 모든 h1과 p에 스타일이 적용됩니다. 문단이 백 개라도 CSS는 한 줄이면 충분하고, 수정할 때도 style 태그 안만 고치면 됩니다. 앞선 시리즈의 로그인 화면이나 블로그 페이지 실습에서 사용했던 방식이 바로 이것입니다.

다만 내부 스타일 시트는 그 HTML 문서 한 장에만 적용됩니다. 웹사이트에 페이지가 열 개라면 열 개의 문서에 똑같은 style 코드를 복사해 넣어야 하고, 디자인을 바꿀 때마다 모든 페이지를 수정해야 하는 불편함이 있습니다. 그래서 페이지가 하나뿐인 간단한 사이트나 연습용 코드에 적합합니다.

5. 방법 ③ 외부 스타일 시트 (External Style Sheet)

세 번째 방법은 CSS를 별도의 .css 파일로 만들고, HTML에서 그 파일을 불러와 연결하는 방식입니다. 실제 웹사이트에서 가장 많이 사용하는 방법입니다.

먼저 style.css라는 파일을 만들고 CSS만 적습니다. CSS 파일 안에는 style 태그를 쓰지 않는다는 점에 주의하세요.

/* style.css */
h1 {
  color: blue;
  font-size: 32px;
}
p {
  color: gray;
}

그다음 HTML의 head 안에 <link> 태그로 CSS 파일을 연결합니다.

<head>
  <meta charset="UTF-8">
  <title>외부 스타일 시트</title>
  <link rel="stylesheet" href="style.css">
</head>

rel="stylesheet"는 연결하는 파일이 스타일 시트라는 뜻이고, href에는 CSS 파일의 경로를 적습니다. 경로를 적는 방법은 지난 글에서 배운 이미지의 상대 경로와 똑같습니다. 폴더 구조는 보통 다음과 같이 구성합니다.

my-site/
├── index.html
├── about.html
├── contact.html
└── css/
    └── style.css   ← 세 페이지가 모두 이 파일을 공유

이렇게 하면 index, about, contact 세 페이지 모두 <link rel="stylesheet" href="css/style.css"> 한 줄로 같은 디자인을 사용할 수 있습니다. 사이트 전체의 제목 색을 바꾸고 싶다면 style.css 파일 하나만 수정하면 모든 페이지에 즉시 반영됩니다. 또한 브라우저는 한 번 내려받은 CSS 파일을 저장(캐시)해 두기 때문에, 다른 페이지로 이동할 때 다시 받지 않아 로딩 속도도 빨라집니다.

6. 세 가지 방법 한눈에 비교하기

정리하면, 처음 공부할 때는 결과를 바로 확인하기 쉬운 내부 스타일 시트로 연습하고, 실제 사이트를 만들 때는 외부 스타일 시트를 기본으로 사용하는 것을 추천합니다. 인라인 스타일은 꼭 필요한 경우에만 제한적으로 쓰는 것이 좋습니다.

7. 스타일이 겹치면 어떤 것이 적용될까? – 우선순위

세 가지 방법을 동시에 사용해 같은 요소에 서로 다른 스타일을 지정하면 어떻게 될까요? 예를 들어 외부 파일에서는 h1을 파란색, 내부 style에서는 초록색, 인라인으로는 빨간색으로 지정했다고 가정해 보겠습니다.

<!-- style.css : h1 { color: blue; } -->
<link rel="stylesheet" href="style.css">

<style>
  h1 { color: green; }
</style>

<h1 style="color: red;">무슨 색일까요?</h1>

정답은 빨간색입니다. 기본적으로 대상에 더 가깝고 구체적으로 지정한 스타일이 우선합니다. 인라인 스타일은 태그에 직접 붙어 있으므로 가장 강력합니다. 내부 스타일과 외부 스타일은 같은 조건이라면 나중에 작성된 쪽이 이깁니다. 위 코드에서 인라인을 지우면 link보다 아래에 있는 style 태그의 초록색이 적용되고, link와 style의 순서를 바꾸면 파란색이 적용됩니다.

이것이 이름의 ‘Cascading’이 의미하는 바입니다. 실제 우선순위는 다음 글에서 배울 선택자의 종류(태그, 클래스, 아이디)에 따라서도 달라지므로, 지금은 “가까울수록, 나중일수록 우선한다”는 원리만 기억해 두면 충분합니다.

8. 처음 배울 때 알아두면 좋은 기본 속성

CSS 속성은 수백 가지가 있지만, 처음에는 자주 쓰는 몇 가지만 익혀도 페이지 분위기를 크게 바꿀 수 있습니다.

색상은 red, blue 같은 영어 이름으로도 적을 수 있지만, 실무에서는 #333333처럼 # 뒤에 여섯 자리 숫자와 알파벳을 쓰는 16진수 색상 코드를 주로 사용합니다. 색상과 글꼴은 시리즈의 10편에서 자세히 다룰 예정입니다.

9. 실습: 자기소개 페이지에 외부 CSS 적용하기

HTML 기초 첫 글에서 만들었던 자기소개 페이지(profile.html)를 기억하시나요? 이제 그 페이지에 외부 스타일 시트를 연결해 꾸며 보겠습니다. 먼저 profile.html과 같은 폴더에 style.css 파일을 만들고 아래 코드를 저장합니다.

/* style.css */
body {
  background-color: #f5f7fb;
  font-family: sans-serif;
  line-height: 1.8;
  color: #333;
}

h1 {
  color: #264de4;
  text-align: center;
}

h2 {
  color: #444;
  border-bottom: 2px solid #264de4;
  padding-bottom: 4px;
}

p {
  font-size: 17px;
}

a {
  color: #e44d26;
  font-weight: bold;
}

그다음 profile.html의 head 안, title 아래에 다음 한 줄을 추가합니다.

<link rel="stylesheet" href="style.css">

저장 후 브라우저에서 새로고침하면 아래처럼 연한 배경 위에 파란 제목, 밑줄이 그어진 소제목, 주황색 링크가 적용된 페이지로 바뀐 것을 확인할 수 있습니다.

HTML 코드는 단 한 줄만 추가했을 뿐인데 페이지 분위기가 완전히 달라졌습니다. 이것이 내용과 디자인을 분리하는 외부 스타일 시트의 힘입니다. 색상 값을 자유롭게 바꿔 보면서 나만의 디자인을 만들어 보세요.

10. CSS가 적용되지 않을 때 확인할 것

• 파일 경로 오류 : 가장 흔한 원인입니다. link 태그의 href 경로와 실제 CSS 파일 위치가 일치하는지 확인하세요. CSS 파일이 css 폴더 안에 있다면 href="css/style.css"로 적어야 합니다.
• 세미콜론·중괄호 누락 : 한 곳의 문법 오류 때문에 그 아래 스타일이 모두 무시될 수 있습니다. 괄호의 짝과 세미콜론을 꼼꼼히 확인하세요.
• CSS 파일 안에 style 태그 작성 : .css 파일에는 순수한 CSS만 적어야 합니다. <style> 태그를 넣으면 오류가 납니다.
• 속성 이름 오타 : colour, font-szie처럼 철자가 틀리면 브라우저는 오류 없이 그냥 무시합니다. VS Code 같은 편집기를 쓰면 자동 완성으로 오타를 줄일 수 있습니다.
• 수정이 반영되지 않음 : 브라우저가 예전 CSS 파일을 저장해 두고 있는 경우입니다. Ctrl + F5(맥은 Cmd + Shift + R)로 강력 새로고침을 해 보세요.

마무리하며

오늘은 웹페이지의 디자인을 담당하는 CSS의 개념과 기본 문법, 그리고 HTML에 CSS를 적용하는 세 가지 방법인 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트를 비교해 보았습니다. 각각 장단점이 있지만, 실제 웹사이트를 만들 때는 유지보수가 쉽고 속도도 빠른 외부 스타일 시트를 기본으로 사용한다는 점을 꼭 기억해 두세요. 또한 여러 스타일이 겹칠 때는 “가까울수록, 나중일수록 우선한다”는 우선순위 원리도 함께 알아두면 CSS가 예상대로 적용되지 않을 때 원인을 쉽게 찾을 수 있습니다.

다음 글에서는 원하는 요소만 골라서 스타일을 적용하는 방법인 CSS 선택자를 다루겠습니다. 태그 선택자, 클래스 선택자, 아이디 선택자의 차이와 사용법을 예제와 함께 알아볼 예정입니다. 궁금한 점은 댓글로 남겨 주세요!