웹 개발에서 CSS(Cascading Style Sheets)는 빠질 수 없는 기술이다. HTML이 웹 페이지의 구조(Structure)를 담당한다면, CSS는 그 구조를 디자인(Style)으로 꾸며주는 역할을 한다. 그리고 JavaScript는 웹 페이지를 동적(Dynamic)으로 만들어준다.
CSS란?
- HTML: 콘텐츠(데이터, 구조)를 정의한다.
- CSS: 콘텐츠를 보기 좋게 꾸미는 스타일을 정의한다.
- JavaScript: 웹 페이지를 동적으로 변화시키는 로직을 제어한다.
즉, HTML + CSS + JS 세 가지가 합쳐져야 웹 페이지가 완성된다.
- HTML만 있으면 → “뼈대만 있는 문서”
- CSS가 더해지면 → “보기 좋은 웹 페이지”
- JS까지 더해지면 → “사용자와 상호작용 가능한 웹 애플리케이션”
CSS를 분리해서 사용하는 이유
과거에는 HTML 태그 안에 직접 디자인 속성을 적기도 했다. 하지만 이렇게 하면 유지보수성이 떨어지고, 코드 재사용이 어렵다. 예를 들어, 같은 스타일을 수십 개의 페이지에 적용해야 한다고 해보자. 한 페이지마다 스타일을 고치면, 유지보수가 악몽이 된다.
CSS 분리의 장점
- 유지보수성: 한 파일만 수정하면 전체 페이지에 적용된다.
- 재사용성: 여러 HTML 문서가 하나의 CSS를 공유한다.
- 역할 분리: HTML(구조)와 CSS(스타일)를 분리하여 코드 가독성이 향상된다.
네이버 같은 대형 사이트도 index.html, news.html, mail.html 등 여러 페이지에서 하나의 CSS 파일을 불러와 동일한 디자인을 유지한다.
CSS 적용 방법 3가지
① 외부 스타일 시트 (External CSS)
가장 권장되는 방식이다. 별도의 .css 파일을 만들어 HTML에 <link>로 연결한다.
<!-- style.css 파일 연결 -->
<link rel="stylesheet" href="style.css">- 장점: 여러 페이지에서 공유 가능하며, 유지보수가 쉽다.
- 단점: 외부 파일을 로드해야 해서 첫 로딩 속도는 약간 느려질 수 있다.
② 내부 스타일 시트 (Internal CSS)
HTML 문서의 <head> 안에 <style> 태그로 작성한다.
<style> h1 { color: blue; font-size: 24px; } </style>- 장점: 외부 파일 없이 간단히 적용 가능하다.
- 단점: 해당 HTML 문서에만 적용되며, 재사용이 불가능하다.
③ 인라인 스타일 (Inline CSS)
HTML 태그 안에 style 속성으로 직접 작성한다.
<p style="color:red; font-weight:bold;">중요 문구</p>- 장점: 특정 요소 하나에만 바로 스타일 적용 가능하다.
- 단점: 유지보수 측면에서는 최악이다. (HTML과 CSS가 섞여 코드가 지저분해짐)
실무에서 권장되는 적용 방법
외부 스타일 시트(External CSS) 방식이 가장 권장된다.
- 대규모 프로젝트 → CSS를 분리해서 관리할 수 있다.
- 협업 → HTML/JS 담당과 CSS 담당을 나눌 수 있다.
- 성능 → 브라우저 캐싱 덕분에 같은 CSS 파일을 재사용할 수 있다.
인라인 스타일은 테스트용이나 특수한 경우(이메일 템플릿 등)가 아니면 피하는 게 좋다.
정리하자면...
- CSS는 HTML의 구조를 꾸며주는 언어이며, JS와 함께 웹을 완성시킨다.
- CSS 분리는 유지보수성과 재사용성을 높이는 핵심이다.
- 적용 방법 3가지: 외부 스타일(권장) / 내부 스타일 / 인라인 스타일.
- 실무에서는 외부 스타일 시트를 표준처럼 사용한다.
'Front > css' 카테고리의 다른 글
| CSS 레이아웃 속성 정리 (Flexbox 중심) (3) | 2025.08.31 |
|---|---|
| Bootstrap 활용 가이드 (4) | 2025.08.31 |
| CSS 단위 & 박스 모델 정리 (1) | 2025.08.31 |
| DOM Tree & CSS 선택자 원리 (0) | 2025.08.31 |
| CSS 선택자 정리 (4) | 2025.08.31 |
