1. 🎨 CSS 기초 문법과 스타일 적용 방식 완벽 이해하기

frontend/css

1. 🎨 CSS 기초 문법과 스타일 적용 방식 완벽 이해하기

mirabo01 2025. 11. 5. 20:55

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 요소를 정밀하게 선택하고 제어하는 방법을 배워보자.