이 글에서 다루는 내용

CSS를 작성하는 방법은 크게 3가지가 있습니다.

HTML 태그 안에 바로 작성하는 방법, HTML 문서 안에 따로 작성하는 방법, 그리고 CSS 파일을 따로 만들어 연결하는 방법입니다.

이번 글에서는 CSS 적용 방법 3가지를 정리합니다.

  • 인라인 스타일
  • 내부 스타일
  • 외부 CSS 파일

그리고 왜 외부 CSS 파일을 많이 사용하는지도 함께 살펴봅니다.

CSS 적용 방법 3가지

CSS는 다음 3가지 방식으로 HTML에 적용할 수 있습니다.

방법작성 위치특징
인라인 스타일HTML 태그 안빠르지만 관리가 어려움
내부 스타일HTML 문서의 style 태그 안한 파일 안에서 관리 가능
외부 CSS 파일별도 .css 파일가장 많이 사용

쉽게 말하면 옷을 입히는 방법이 다릅니다.

인라인 스타일은 옷마다 직접 색을 칠하는 방식이고, 내부 스타일은 한 방 안에서 옷 규칙을 정하는 방식입니다.

외부 CSS 파일은 옷장에 스타일 규칙을 따로 정리해두고 여러 옷에 함께 적용하는 방식에 가깝습니다.

1. 인라인 스타일

인라인 스타일은 HTML 태그 안에 style 속성을 사용해서 CSS를 직접 작성하는 방법입니다.

<p style="color: red; font-size: 20px;">
  빨간색 문장입니다.
</p>

위 코드는 p 태그에 직접 스타일을 넣은 예시입니다.

color: red;는 글자 색을 빨간색으로 만들고, font-size: 20px;는 글자 크기를 20px로 만듭니다.

인라인 스타일의 장점

간단하게 테스트할 때는 빠릅니다.

HTML 태그 안에서 바로 결과를 확인할 수 있기 때문입니다.

<button style="background-color: black; color: white;">
  확인
</button>

인라인 스타일의 단점

하지만 코드가 많아지면 관리하기 어렵습니다.

<p style="color: blue;">문장 1</p>
<p style="color: blue;">문장 2</p>
<p style="color: blue;">문장 3</p>

만약 파란색을 초록색으로 바꾸고 싶다면 모든 태그를 하나씩 수정해야 합니다.

그래서 인라인 스타일은 많이 사용하지 않습니다.

보통 빠른 테스트나 아주 예외적인 상황에서만 사용합니다.

2. 내부 스타일

내부 스타일은 HTML 문서 안의 style 태그에 CSS를 작성하는 방법입니다.

보통 head 태그 안에 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: blue;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <p>파란색 문장입니다.</p>
  </body>
</html>

위 코드에서는 style 태그 안에 CSS를 작성했습니다.

이렇게 하면 해당 HTML 문서 안의 p 태그에 스타일이 적용됩니다.

내부 스타일의 장점

HTML 파일 하나만 보면 구조와 스타일을 함께 확인할 수 있습니다.

작은 예제나 간단한 테스트 페이지를 만들 때는 편합니다.

내부 스타일의 단점

하지만 HTML 파일이 길어지면 구조와 디자인 코드가 섞여서 복잡해집니다.

또 다른 HTML 파일에서도 같은 스타일을 쓰고 싶다면 같은 CSS 코드를 다시 작성해야 합니다.

<style>
  .button {
    background-color: black;
    color: white;
  }
</style>

이 스타일을 여러 페이지에서 사용하려면 페이지마다 복사해야 합니다.

이렇게 되면 나중에 수정할 때 불편합니다.

3. 외부 CSS 파일

외부 CSS 파일은 CSS 코드를 별도 파일로 분리해서 작성하는 방법입니다.

예를 들어 style.css라는 파일을 만들 수 있습니다.

p {
  color: blue;
  font-size: 18px;
}

button {
  background-color: black;
  color: white;
  padding: 10px 16px;
}

그리고 HTML 파일에서 link 태그로 CSS 파일을 연결합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>파란색 문장입니다.</p>
    <button>확인</button>
  </body>
</html>

위 코드에서 link 태그는 HTML과 CSS 파일을 연결하는 역할을 합니다.

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

각 속성의 의미는 다음과 같습니다.

코드의미
link외부 파일을 연결하는 태그
rel="stylesheet"연결할 파일이 CSS 스타일시트라는 뜻
href="style.css"연결할 CSS 파일의 경로

외부 CSS 파일의 장점

외부 CSS 파일을 사용하면 HTML과 CSS의 역할을 분리할 수 있습니다.

HTML은 구조를 담당하고, CSS는 디자인을 담당합니다.

<!-- index.html -->
<h1>CSS 적용 방법</h1>
<p>외부 CSS 파일을 연결해서 스타일을 적용합니다.</p>

/* style.css */
h1 {
  color: navy;
}

p {
  font-size: 18px;
}

이렇게 나누면 코드가 더 깔끔해집니다.

또한 여러 HTML 파일에서 같은 CSS 파일을 함께 사용할 수 있습니다.

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

index.html, about.html, contact.html 같은 여러 페이지가 같은 style.css를 사용할 수 있습니다.

그러면 디자인을 수정할 때 CSS 파일 하나만 고치면 됩니다.

왜 외부 CSS 파일을 많이 사용할까?

웹페이지가 하나로 끝나지 않는 경우가 많습니다.

홈 화면, 소개 페이지, 게시글 페이지, 로그인 페이지처럼 여러 화면이 있습니다.

이때 각 HTML 파일마다 CSS를 따로 작성하면 유지보수가 어려워집니다.

외부 CSS 파일을 사용하면 공통 디자인을 한 곳에서 관리할 수 있습니다.

예를 들어 모든 버튼 디자인을 바꾸고 싶을 때 CSS 파일 하나만 수정하면 됩니다.

.button {
  background-color: black;
  color: white;
  border-radius: 8px;
}

이런 방식은 코드 중복을 줄이고, 수정 실수를 줄이는 데 도움이 됩니다.

그래서 외부 CSS 파일을 많이 사용합니다.

3가지 방법 비교

구분인라인 스타일내부 스타일외부 CSS 파일
작성 위치HTML 태그 안HTML의 style 태그 안별도 .css 파일
재사용성낮음낮음높음
유지보수어려움보통좋음
사용 상황빠른 테스트간단한 예제실제 웹페이지 제작
사용 빈도적음제한적가장 많이 사용

처음 공부할 때는 3가지 방식을 모두 알아두는 것이 좋습니다.

하지만 실제 프로젝트를 만들 때는 외부 CSS 파일 방식에 익숙해지는 편이 좋습니다.

간단한 연습 예시

파일을 두 개 만들어 봅니다.

index.html
style.css

index.html입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>CSS 적용 방법</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>CSS 적용 방법 3가지</h1>
    <p>외부 CSS 파일을 연결해서 스타일을 적용합니다.</p>
    <button>시작하기</button>
  </body>
</html>

style.css입니다.

h1 {
  color: navy;
}

p {
  font-size: 18px;
}

button {
  background-color: black;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
}

브라우저에서 index.html을 열면 CSS가 적용된 화면을 확인할 수 있습니다.

만약 스타일이 적용되지 않는다면 href="style.css" 경로가 맞는지 먼저 확인해야 합니다.

정리

CSS를 HTML에 적용하는 방법은 3가지입니다.

첫 번째는 HTML 태그 안에 직접 작성하는 인라인 스타일입니다.

두 번째는 HTML 문서 안의 style 태그에 작성하는 내부 스타일입니다.

세 번째는 CSS 파일을 따로 만들고 link 태그로 연결하는 외부 CSS 파일 방식입니다.

보통 외부 CSS 파일 방식을 가장 많이 사용합니다.

이 방식은 HTML과 CSS의 역할을 분리할 수 있고, 여러 페이지에서 같은 스타일을 재사용하기 좋기 때문입니다.

처음에는 인라인 스타일이 가장 쉬워 보일 수 있습니다.

하지만 실제 웹페이지를 만들 때는 외부 CSS 파일을 사용하는 습관을 들이는 것이 좋습니다.