HTML이 웹의 ‘뼈대’라면,
CSS는 그 위에 살과 피부를 입히는 디자인 언어다.
이번 글에서는 CSS의 핵심 개념부터
스타일이 HTML에 적용되는 3가지 방식까지
기초를 완벽히 다지고 실무로 넘어갈 수 있도록 정리했다.
💡 1. CSS란 무엇인가?
“CSS는 Cascading Style Sheets의 약자 — HTML을 꾸며주는 언어다.”
HTML이 내용(content) 을 담당한다면,
CSS는 표현(presentation) 을 담당한다.
즉, HTML은 ‘무엇을 보여줄지’를 정의하고,
CSS는 ‘어떻게 보여줄지’를 결정한다.
예를 들어 👇
<p>이 문장은 평범합니다.</p>
<p style="color: tomato;">이 문장은 CSS로 꾸몄습니다.</p>
💬 두 번째 문장은 CSS 스타일 속성이 적용되어 색상이 바뀌었다.
🧱 2. CSS 기본 문법 구조
CSS는 아래와 같은 선택자(selector) + 선언(declaration) 구조로 이루어진다.
선택자 {
속성: 값;
}
예시 👇
p {
color: blue;
font-size: 18px;
}
구성 요소 설명
| 선택자(selector) | 어떤 HTML 요소에 스타일을 적용할지 지정 |
| 속성(property) | 변경할 스타일 항목 (예: color, font-size) |
| 값(value) | 속성에 적용할 구체적인 값 |
| 세미콜론(;) | 각 선언의 끝 표시 (필수!) |
💡 한 줄이라도 세미콜론을 빠뜨리면 스타일이 무시될 수 있다.
🧩 3. CSS를 HTML에 적용하는 3가지 방법
✅ ① 인라인 스타일 (Inline Style)
HTML 요소 안에 직접 작성하는 방식 👇
<p style="color: green; font-size: 20px;">인라인 스타일 예시</p>
특징
- 빠르고 간단
- 단, 코드 유지보수가 어려움 (HTML과 디자인이 섞임)
💬 인라인은 “한두 개 수정용”으로만 쓰는 게 좋다.
✅ ② 내부 스타일 (Internal Style Sheet)
HTML <head> 태그 안에 <style> 블록으로 작성 👇
<head>
<style>
h1 {
color: navy;
text-align: center;
}
</style>
</head>
특징
- 한 문서 안에서만 적용됨
- HTML과 분리되지 않아, 규모가 커지면 관리 어려움
✅ ③ 외부 스타일 (External Style Sheet)
가장 권장되는 방식 👇
<link rel="stylesheet" href="style.css">
/* style.css */
h1 {
color: royalblue;
font-size: 32px;
}
특징
- 여러 HTML 문서에 공통 적용 가능
- HTML과 CSS가 분리되어 유지보수에 최적
- 실무에서는 거의 100% 이 방식 사용
⚙️ 4. CSS 적용 우선순위 (Cascading)
“Cascading”은 ‘위에서 아래로 흘러내리는 우선순위 규칙’을 의미한다.
같은 요소에 여러 스타일이 적용될 때,
어떤 것이 우선되는지 결정하는 규칙이다.
우선순위 순서 적용 예시
| 1️⃣ 인라인 스타일 | <p style="color:red"> |
| 2️⃣ 내부/외부 스타일 (나중에 작성된 것) | <style> 또는 link |
| 3️⃣ 브라우저 기본 스타일 | <p>의 기본 검정색 |
✅ 가장 구체적인 규칙이 우선 적용된다.
즉, 인라인 > 내부/외부 > 브라우저 기본 순서.
💡 추가 규칙: “나중에 읽힌 CSS가 이긴다”
같은 선택자라면, CSS 파일이나 <style> 태그 안에서 나중에 선언된 스타일이 덮어쓴다.
p {
color: blue;
}
p {
color: red;
}
➡️ 결과: 빨간색 적용
🎯 5. CSS 선택자 맛보기
CSS는 “누구에게 스타일을 입힐지”를 선택하는 언어다.
/* 태그 선택자 */
p { color: gray; }
/* 클래스 선택자 */
.text-red { color: red; }
/* 아이디 선택자 */
#main-title { font-size: 32px; }
💬 기본 선택자 세 가지는 다음 편에서 깊게 다룰 예정이다.
🧮 6. 단위(Unit) 이해하기
단위 설명 예시
| px | 절대 단위 (픽셀 기준) | font-size: 16px; |
| % | 부모 요소 기준 비율 | width: 50%; |
| em | 부모 폰트 크기 기준 배수 | padding: 1.5em; |
| rem | 루트(html) 기준 배수 | font-size: 1rem; |
| vh, vw | 화면(viewport) 비율 단위 | height: 100vh; |
💡 실무에서는 rem과 %, vh/vw 조합이 반응형 웹에서 가장 많이 쓰인다.
🖥️ 7. 개발자 도구로 스타일 확인하기
크롬 기준:
1️⃣ 요소 우클릭 → 검사(Inspect) 클릭
2️⃣ 오른쪽 Styles 탭에서 적용된 CSS 확인 가능
3️⃣ 우선순위, 상속된 속성, 오버라이드 상태를 실시간 확인
💬 개발자 도구는 CSS 실습의 필수 도구다.
브라우저마다 적용 결과를 즉시 테스트할 수 있다.
⚡ 8. CSS 상속의 개념 (Inheritance)
일부 속성은 부모 요소의 스타일을 자식이 자동으로 물려받는다.
<div style="color: blue;">
<p>이 문장도 파란색으로 표시됩니다.</p>
</div>
💡 상속되는 대표 속성
- color
- font-family
- line-height
단, margin, padding, border 같은 레이아웃 관련 속성은 상속되지 않는다.
🧠 9. CSS 작성 시 자주 하는 실수
❌ 잘못된 예 💡 올바른 예
| color = red | color: red; |
| font-size: 16 px; | font-size: 16px; |
| {color:red} | p { color: red; } |
| 세미콜론 생략 | 속성마다 ; 꼭 붙이기 |
💬 CSS는 문법이 단순하지만, 세세한 규칙이 엄격하다.
🏁 10. 마무리 — “CSS는 디자인이 아니라 구조적 언어다”
CSS는 단순히 예쁜 색을 입히는 도구가 아니라,
웹페이지의 정보 구조를 시각적으로 표현하는 언어다.
💬 “HTML이 말하는 내용을, CSS가 보여준다.”
다음 편에서는
✅ 2. CSS 선택자(Selector) 정복 — 태그부터 가상 클래스까지
를 통해 HTML 요소를 정밀하게 선택하고 제어하는 방법을 배워보자.
'frontend > css' 카테고리의 다른 글
| 6. 📱 반응형 웹 디자인 완벽 가이드 — 미디어쿼리부터 실전 예제까지 (0) | 2025.11.05 |
|---|---|
| 5. 🧱 CSS Grid로 레이아웃 설계하기 — 2차원 배치의 끝판왕 (0) | 2025.11.05 |
| 4. 🧭 Flexbox 완전 이해하기 — 가로·세로 정렬 스트레스 탈출 (0) | 2025.11.05 |
| 3. 📦 박스 모델(Box Model)과 레이아웃의 기본 — margin, padding, border 완벽 정리 (0) | 2025.11.05 |
| 2. 🧩 CSS 선택자(Selector) 정복 — 태그부터 가상 클래스까지 완벽 가이드 (0) | 2025.11.05 |