[CSS] 관심사 분리 및 규칙 정리

웹 퍼블리싱에서는 HTML과 CSS를 역할에 따라 분리하는 것이 기본 원칙입니다.

• HTML: 문서의 구조와 의미를 담당
• CSS: 화면에 어떻게 보일지를 담당

이렇게 분리하면
구조와 스타일이 뒤섞이지 않아 가독성·유지보수성·재사용성이 크게 좋아집니다.

 

1, CSS 규칙(CSS Rule)이란?

CSS는 규칙(rule) 단위로 스타일을 적용합니다.
하나의 CSS 규칙은 크게 두 부분으로 나뉩니다.

h3 {
  color: #f56513;
}

 

1️⃣ 선택자(Selector)

h3

 

• 어떤 HTML 요소에 적용할지를 지정
• 위 예시는 모든 <h3> 태그를 선택

2️⃣ 선언(Declaration)

color: #f56513;

• 실제로 어떤 스타일을 적용할지를 정의
• 속성(property) + 값(value)의 형태
• 여러 선언을 동시에 작성할 수도 있음

2. HTML과 CSS의 연결 방식

 HTML에서는 구조만 작성합니다.

<h3>우도</h3>
<h3>한라산 국립공원</h3>

 

CSS에서는 해당 구조를 선택해 스타일을 입힙니다.

h3 {
  color: #f56513;
}

결과적으로 모든 h3 요소가 동일한 스타일을 갖게 됩니다.

 

 

정리하면

 

HTML은 “무엇인지”를 정의하고,
CSS는 “어떻게 보일지”를 정의한다.
CSS 규칙은 선택자와 선언으로 구성된다.