웹 퍼블리싱에서는 CSS를 HTML 안에 작성하지 않고,
별도의 CSS 파일로 분리해 관리하는 것이 기본 방식입니다.
1. 왜 CSS 파일을 분리할까?
CSS를 분리하면 다음과 같은 장점이 있습니다.
- HTML과 CSS의 역할(관심사) 분리
- 코드 가독성 향상
- 스타일 재사용 및 유지보수 용이
- 여러 HTML 파일에서 같은 CSS 사용 가능
실무 퍼블리싱의 기본 구조입니다.
2. CSS 파일 생성하기
프로젝트 폴더에 style.css 파일을 생성합니다.
index.html
style.css
3. HTML에서 CSS 파일 연결하기
HTML의 <head> 영역에서
<link> 태그를 사용해 CSS 파일을 연결합니다.
<link rel="stylesheet" href="style.css">- rel="stylesheet" → 스타일시트임을 명시(해당 파일과 관계를 명시)
- href → 연결할 CSS 파일 경로
4. CSS 파일에 스타일 작성하기
h3 {
color: #f56513;
}이제 HTML에서는 구조만 작성합니다.
<h3 class="place">우도</h3>
<h3 class="place">한라산 국립공원</h3>스타일은 style.css에서 한 번에 관리됩니다.
정리하면
- HTML ❌ 스타일 작성
- CSS ❌ 구조 작성
- HTML은 구조, CSS는 표현
이 원칙이 유지되면
퍼블리싱 구조가 깔끔해집니다.
CSS는 별도의 파일로 분리하고,
HTML에서는 <link> 태그로 연결해 사용하는 것이
웹 퍼블리싱의 기본 방식이다.
'웹 개발 기본 & 디자인' 카테고리의 다른 글
| [CSS] background-image로 배경 이미지 적용 (0) | 2025.12.14 |
|---|---|
| [CSS] px, 해상도, em, rem란 (0) | 2025.12.14 |
| [CSS] .클래스 선택자 (0) | 2025.12.14 |
| [CSS] #ID 선택자 (0) | 2025.12.14 |
| [CSS] 관심사 분리 및 규칙 정리 (0) | 2025.12.14 |