[참고] HTML <head>에서 외부 CSS 로딩

박은서

Feb 05, 2026

Contents

1️⃣ 개념 2️⃣ 태그별 역할 정리 3️⃣ “복사해서 붙여넣기”가 되는 조건 4️⃣ 실습

1️⃣ 개념

HTML 문서의 <head>에는 문서 설정 및 외부 리소스 로딩 정보가 들어간다.

이 중 외부 CSS를 실제로 다운로드하고 렌더링에 적용하는 역할은 <link> 태그가 담당한다.

흔히 “head를 복사하면 다른 사람이 만든 CSS를 쓸 수 있다”는 말은 <link rel="stylesheet"> 기준으로는 맞는 말이다.

2️⃣ 태그별 역할 정리

1) `<meta>`

문서 정보 설정용

예시 역할:

문자 인코딩 (charset)
반응형 뷰포트 (viewport)
SEO, 보안 정책

❌ CSS 다운로드 / 렌더링과는 무관


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

2) `<link>` (핵심)

외부 리소스 연결용

CSS 로딩 시 사용


<link rel="stylesheet" href="https://example.com/style.css">

동작 과정

브라우저가 href URL로 요청

CSS 파일 다운로드

파싱 후 DOM에 스타일 적용

화면 렌더링에 반영

✔️ 다른 사람이 만든 CSS를 그대로 가져와 적용 가능

3) `<script>`

JavaScript 파일을 다운로드하고 실행

직접 CSS를 렌더링하지는 않음

하지만 JS로 CSS를 동적으로 추가할 수 있음


<script src="app.js"></script>


// JS로 CSS 로딩
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://example.com/style.css';
document.head.appendChild(link);

⚠️ 간접적인 방식

3️⃣ “복사해서 붙여넣기”가 되는 조건

✅ 정상 동작 조건

CSS 파일이 공개 URL

인증 없이 접근 가능

현재 HTML 구조와 CSS의 class/id가 맞음

상대경로 리소스(폰트, 이미지)가 올바름

❌ 안 되는 경우

로그인 세션 필요

사내망 / 로컬 경로

빌드 도구(Webpack, Vite 등) 전제

CSS 내부에서 상대경로 깨짐

CSS 변수, JS 의존 스타일

4️⃣ 실습

1) 외부 CSS

2) header.mustache

C:\workspace\spring_lab\boardv1\src\main\resources\templates\header.mustache


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm" style="background-color: grey;">
  <div class="container-fluid">
    <ul class="navbar-nav">
       <li class="nav-item">
        <a class="nav-link" href="/" style="font-weight: bold; color: white">Metacoding</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/boards/save-form" style="color: white">글쓰기</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/logout" style="color: white">로그아웃</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/join-form" style="color: white">회원가입</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/login-form" style="color: white">로그인</a>
      </li>
    </ul>
  </div>
</nav>
</div>

3) index.mustache

C:\workspace\spring_lab\boardv1\src\main\resources\templates\index.mustache


{{> header}} 

<div class="container mt-3">

  <table class="table table-hover">
    <thead>
      <tr>
        <th>번호</th>
        <th>제목</th>
        <th>내용</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>3</td>
        <td>
          <a href="/boards/1" style="color: inherit; text-decoration: none;">            
            제목3
          </a>  
        </td>
        <td>내용3</td>
      </tr>
      <tr>
        <td>2</td>
        <td>
         <a href="/boards/1" style="color: inherit; text-decoration: none;">
            제목2
          </a>
        </td>
        <td>내용2</td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          <a href="/boards/1" style="color: inherit; text-decoration: none;">
            제목1
          </a>
        </td>
        <td>내용1</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>