CSS: HTML과의 차별화, ID와 Class의 정확한 사용법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보 웹 개발자 및 CSS를 학습 중인 사람

난이도: 중간 (기초 HTML 이해 필수)

핵심 요약

• id와 class의 차이점: id는 페이지 내 유일한 요소를 식별하는 고유 식별자이며, class는 반복 가능한 스타일링 그룹을 위한 도구
• 스타일링 최적화: class를 사용해 반복 가능한 컴포넌트(card, cta-button)를 생성해야 하며, id는 JavaScript 호크나 프래그먼트 식별자로 활용
• 기존 HTML의 한계: 태그와 bgcolor 속성 사용 시 유지보수의 어려움과 CSS의 등장으로 내용과 표현 분리가 가능해짐

섹션별 세부 요약

1. HTML과 CSS의 관계

• HTML은 의미 있는 구조를 제공하지만, 시각적 표현은 CSS가 담당
• id와 class 속성은 HTML 요소에 스타일링 규칙을 연결하는 핵심 도구
• id의 중복은 CSS/JS 동작 불확실성으로 이어짐

2. `id`와 `class`의 사용 목적

• id:

- 특정 요소에 고유 식별자 부여 (예:

- 프래그먼트 식별자로 사용 (#section-about)

• class:

- 반복 가능한 스타일 적용 (예: .cta-button, .card-text)

- 컴포넌트 기반 설계 (카드, 모달 등) 가능

3. CSS의 역사와 필요성

• 1990년대 브라우저 전쟁 시기 CSS 구현 불일치로 인한 호환성 문제
• !important 사용은 기술적 부채 유발, 대체로 class 기반 스타일링 권장
• CSS는 내용과 표현 분리를 통해 유지보수성을 극대화

4. 실무 적용 팁

• 스타일링 우선순위: class를 사용해 반복 가능한 스타일 적용
• ID 사용 시기: JavaScript 이벤트 처리, 프래그먼트 식별자 필요 시
• 코드 예시:

```css

.cta-button { background-color: blue; }

#section-about { margin-top: 50px; }

```

결론

• class는 반복 가능한 스타일링, id는 고유 요소 식별 및 프래그먼트 식별자로 사용
• CSS는 의미 있는 HTML과 결합해 유지보수성과 확장성을 향상시키는 핵심 도구
• 기존 font 태그 방식 대신 CSS를 통해 내용과 표현 분리를 실현해야 함