<![CDATA[
<p>네, **당연히 따로 저장하여 `index.html`에서 불러와도 전혀 문제 없습니다.** <br>오히려 실제 웹 개발에서는 CSS 스타일 코드를 **외부 파일로 분리**하는 것이 **권장되는 방식**입니다. <br><br>--- <br><br>## ✅ 방법 요약 <br><br>### 1. 위의 CSS 코드를 예를 들어, 파일로 저장 <br><br>예: `style.css` 라는 이름으로 저장 <br><br>```plaintext <br>/your-project/ <br>├── index.html <br>└── style.css      ← 여기에 CSS 코드 저장 <br>``` <br><br>--- <br><br>### 2. `index.html`에서 불러오기 <br><br>HTML의 `<head>` 태그 안에 다음처럼 링크를 추가합니다: <br><br>```html <br><!DOCTYPE html> <br><html lang="ko"> <br><head> <br>  <meta charset="UTF-8" /> <br>  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <br>  <title>반응형 웹</title> <br>  <span style="color: #ee2323;"><b><link rel="stylesheet" href="style.css" /></b></span> <br></head> <br><body> <br>  <div class="container"> <br>    <div class="card">카드 1</div> <br>    <div class="card">카드 2</div> <br>    <div class="card">카드 3</div> <br>  </div> <br></body> <br></html> <br>``` <br><br>--- <br><br>## ✅ 외부 CSS 파일로 분리하면 좋은 점 <br><br>| 장점               | 설명                    | <br>| ---------------- | --------------------- | <br>| **유지보수 용이**      | CSS만 따로 수정 가능         | <br>| **코드 재사용 가능**    | 여러 HTML 파일에 적용 가능     | <br>| **가독성 향상**       | HTML과 CSS가 분리되어 깔끔    | <br>| **캐싱 효과로 속도 향상** | 브라우저가 CSS 파일을 캐시로 저장함 | <br><br>--- <br><br>## ✅ 결론 <br><br>> ✔️ 질문하신 CSS 코드는 `style.css` 같은 외부 파일로 분리해도 아무 문제 없고, <br>> 오히려 **모범적인 구조**입니다. 안심하고 분리해서 사용하세요! <br><br>필요하시다면 JavaScript 분리 방식도 안내해드릴 수 있습니다. </p>
<!-- -->
]]>
카페 게시글
도사의컴퓨터강의
반응형 웹에서 index.html과 CSS파일을 분리하면 좋은 이유?
김종록
추천 0
조회 66
25.06.08 23:27
댓글 0
다음검색
