실행 가능한 CSS 문서: 외부 CSS

Q: 외부 CSS란 무엇인가요?

별도의 .css 파일에 저장하고 페이지의 에서 로 불러오는 스타일시트예요. 파일을 연결한 모든 페이지가 같은 스타일을 받고, 브라우저는 페이지 사이에서 파일을 캐시해요.

Q: 내부 CSS란 무엇인가요?

내부 CSS(임베디드 CSS라고도 해요)는 HTML 문서 안의 요소에 적은 CSS예요. 보통 에 두고, 그 페이지에만 적용돼요.

Q: HTML에 CSS 파일은 어떻게 연결하나요?

안에 를 넣으세요. href는 HTML 파일 기준의 경로라서 css/styles.css는 옆에 있는 css 폴더를 가리키고, /styles.css는 사이트 루트에서 시작해요.

Q: 외부 CSS가 적용되지 않는 이유는 무엇인가요?

흔한 원인은 잘못된 href 경로(Network 탭에서 404 확인), 빠진 rel="stylesheet", .css 파일 안에 적은 태그, 뒤에 오는 규칙의 덮어쓰기예요. 강력 새로고침을 하면 캐시된 옛 파일 문제를 배제할 수 있어요.

외부 CSS와 내부 CSS: link와 style 사용법

외부 CSS는 .css 파일에 두고 모든 페이지가 <link rel="stylesheet">로 연결해요. 내부 CSS는 한 페이지 안의 <style> 요소에 있어요. 두 방식, 파일 경로가 동작하는 방식, 둘이 만났을 때 어떤 규칙이 이기는지 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

한 줄로 보는 외부 CSS

외부 CSS는 별도의 .css 파일이에요. 필요한 모든 페이지의 <head>에서 연결해요.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

파일 자체에는 HTML 태그 없이 평범한 CSS 규칙만 들어 있어요.

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

아래 미리보기는 두 번째 파일을 불러올 수 없어서 같은 CSS를 <style> 요소에 넣었어요. 이게 내부 CSS이고, 연결한 파일과 똑같이 렌더링돼요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

내부 CSS: style 요소

내부 CSS(임베디드 CSS라고도 해요)는 페이지 안의 <style> 요소예요. body가 렌더링되기 전에 스타일을 알 수 있도록 <head>에 두세요. 페이지 전체에 적용되고, 규칙에 선택자를 쓸 수 있어요. 인라인 style 속성은 그럴 수 없어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

태그에 마우스를 올려 보세요. 진짜 규칙이라서 :hover가 동작해요. 세 번째 방법인 style 속성은 인라인 CSS 페이지에서 다뤄요.

내부 CSS와 외부 CSS 비교

	외부 (`<link>`)	내부 (`<style>`)
위치	`.css` 파일	HTML 페이지 안
범위	파일을 연결한 모든 페이지	한 페이지
캐싱	한 번 받아서 페이지 사이에서 재사용	페이지마다 다시 전송
사이트 디자인 변경	파일 하나 수정	모든 페이지 수정
추가 요청	있어요, 파일당 하나	없어요
어울리는 곳	실제 웹사이트	데모, 한 페이지, HTML 이메일, 핵심 CSS

명시도는 두 방식 모두 같아요. <style> 요소의 규칙과 연결한 파일의 같은 규칙은 무게가 완전히 같아요. 동점이면 문서에서 나중에 오는 쪽이 이겨요.

순서: 나중 스타일시트가 이겨요

스타일시트는 <link>든 <style>이든 문서 순서대로 읽혀요. 명시도가 같은 두 규칙이면 나중 것이 이겨요. 아래 두 <style> 블록은 연결한 파일과 그 뒤에 오는 페이지 수준 덮어쓰기를 대신해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

버튼은 첫 번째 규칙의 padding과 흰 글자를 유지하고 두 번째 규칙에서 배경만 가져와요. 사이트 자체 스타일시트를 프레임워크 스타일시트 뒤에 두는 이유예요. 라이브러리를 먼저 <link>하고 그다음에 내 파일을 연결하세요.

href의 파일 경로

<link>의 href는 URL이고, HTML 파일의 위치를 기준으로 해석돼요.

href	불러오는 것
`styles.css`	페이지와 같은 폴더의 파일
`css/styles.css`	페이지 옆의 `css` 폴더
`../styles.css`	한 단계 위 폴더
`/styles.css`	사이트 루트부터
`https://example.com/a.css`	다른 서버의 전체 URL

페이지가 서로 다른 깊이에 있는 사이트라면 루트 기준 경로(/css/styles.css)를 쓰면 모든 페이지에서 경로 하나로 동작해요.

인쇄와 다른 미디어용 스타일시트

media 속성은 스타일시트를 조건이 맞을 때로 제한해요. <link>와 <style> 모두 받아요.

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

미리보기는 화면이라서 배너가 보여요. 실제 페이지에서는 인쇄물에서 배너가 사라지고, DevTools에서 print 미디어 타입을 에뮬레이션하면(Rendering 패널) 같은 결과를 볼 수 있어요.

자주 하는 실수

경로 오류. href에 오타가 있으면 아무것도 불러오지 않고 페이지가 스타일 없이 렌더링돼요. DevTools의 Network 탭을 열고 .css 파일에 404가 있는지 보세요.
rel="stylesheet" 빠뜨리기. 이게 없으면 <link href="styles.css">는 스타일시트를 불러오지 않아요.
.css 파일 안에 HTML 쓰기. .css 파일에는 규칙만 들어가요. 그 안의 <style> 태그는 올바른 CSS가 아니라서 옆의 규칙을 깨뜨려요.
내 스타일시트를 프레임워크보다 앞에 두기. 명시도가 같으면 나중 파일이 이기니 내 CSS는 마지막에 연결하세요.
옛 버전이 보이는 문제. 브라우저는 스타일시트를 캐시해요. 변경을 배포할 때는 강력 새로고침을 하거나 URL에 버전을 붙이세요(styles.css?v=2).

자주 묻는 질문

외부 CSS란 무엇인가요?

별도의 .css 파일에 저장하고 페이지의 <head>에서 <link rel="stylesheet" href="styles.css">로 불러오는 스타일시트예요. 파일을 연결한 모든 페이지가 같은 스타일을 받고, 브라우저는 페이지 사이에서 파일을 캐시해요.

내부 CSS란 무엇인가요?

내부 CSS(임베디드 CSS라고도 해요)는 HTML 문서 안의 <style> 요소에 적은 CSS예요. 보통 <head>에 두고, 그 페이지에만 적용돼요.

HTML에 CSS 파일은 어떻게 연결하나요?

<head> 안에 <link rel="stylesheet" href="styles.css">를 넣으세요. href는 HTML 파일 기준의 경로라서 css/styles.css는 옆에 있는 css 폴더를 가리키고, /styles.css는 사이트 루트에서 시작해요.

내부 CSS와 외부 CSS 중 무엇이 더 좋나요?

페이지가 둘 이상이면 외부 CSS예요. 고칠 파일이 하나이고, 브라우저가 한 번 받아서 재사용해요. 내부 CSS는 한 페이지, 데모, 첫 응답에 담고 싶은 작은 핵심 스타일에 어울려요.

외부 CSS가 적용되지 않는 이유는 무엇인가요?

흔한 원인은 잘못된 href 경로(Network 탭에서 404 확인), 빠진 rel="stylesheet", .css 파일 안에 적은 <style> 태그, 뒤에 오는 규칙의 덮어쓰기예요. 강력 새로고침을 하면 캐시된 옛 파일 문제를 배제할 수 있어요.