[참고] 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>

header.mustache 파일의 head부분, index.mustache 파일의 class="container mt-3", class="table table-hover" → 외부 CSS를 로딩할 수 있음

CSS 참고 사이트

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/bootstrap5/index.php

Contents

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

<!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>

{{> 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>

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

1️⃣ 개념

2️⃣ 태그별 역할 정리

1) <meta>

2) <link> (핵심)

3) <script>

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

✅ 정상 동작 조건

❌ 안 되는 경우

4️⃣ 실습

1) 외부 CSS

2) header.mustache

3) index.mustache

CSS 참고 사이트

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

1️⃣ 개념

2️⃣ 태그별 역할 정리

1) <meta>

2) <link> (핵심)

3) <script>

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

✅ 정상 동작 조건

❌ 안 되는 경우

4️⃣ 실습

1) 외부 CSS

2) header.mustache

3) index.mustache

CSS 참고 사이트

1) `<meta>`

2) `<link>` (핵심)

3) `<script>`

1) `<meta>`

2) `<link>` (핵심)

3) `<script>`