language/html

[인터넷활용] 02. CSS 스타일링

렁치 2026. 8. 2. 12:30

HTML이 문서의 뼈대라면, CSS는 그 위에 입히는 옷이다. 색·크기·여백·배치 같은 시각적 표현을 모두 CSS가 담당한다. 오늘은 CSS를 적용하는 방법, 어떤 요소를 꾸밀지 고르는 선택자, 그리고 자주 쓰는 속성을 정리했다.

1. CSS를 적용하는 세 가지 방법

CSS는 HTML에 세 가지 방식으로 연결할 수 있다.

 

방법 작성 위치 예
인라인 태그 안 style 속성 <p style="color:red">
내부 <head>의 <style> 블록 <style> p { color:red; } </style>
외부 별도 .css 파일 연결 <link rel="stylesheet" href="style.css">

 

기본 문법은 "어떤 요소를(선택자) 어떻게(속성: 값)" 꾸밀지 적는 구조다.

 

선택자 { 속성: 값; 속성: 값; }
body { font-family: Arial; background-color: #f4f4f4; padding: 20px; }

 

실무에선 외부 CSS를 쓴다
인라인은 간편하지만 태그마다 스타일이 흩어져 관리가 어렵다. 외부 파일로 분리하면 여러 HTML이 하나의 CSS를 공유할 수 있고, 디자인을 한 곳에서 통째로 바꿀 수 있다. "구조(HTML)와 표현(CSS)의 분리"가 웹 개발의 기본 원칙이다.

 

"구조와 표현의 분리"가, 그동안 배운 "관심사 분리"·"계층 분리"와 같은 발상이라는 게 보였다. 분야가 웹으로 바뀌어도 복잡도를 다루는 원칙은 같았다.

2. 선택자: 무엇을 꾸밀지 고르기

선택자는 "스타일을 적용할 대상"을 지정하는 부분이다. 가장 핵심적인 개념이다.

선택자 의미 예
태그 선택자 태그 이름으로 선택 h1 { }
클래스 선택자 .클래스 (여러 요소에 재사용) .box { }
아이디 선택자 #아이디 (문서에 하나) #title { }
후손 선택자 공백·>로 포함 관계 지정 ul li { }

 

클래스와 아이디, 언제 무엇을
클래스(.)는 여러 요소에 같은 스타일을 반복 적용할 때 쓴다. 아이디(#)는 페이지에서 단 하나뿐인 요소를 가리킬 때 쓴다. 원칙적으로 한 페이지에 같은 아이디는 한 번만 등장해야 한다.

 

3. 자주 쓰는 속성

레이아웃과 표현에 자주 쓰는 속성들이다.

 

속성 역할
color / background-color 글자색 / 배경색
font-size / font-family 글꼴 크기 / 종류
width / height 너비 / 높이
padding / margin / border 안쪽 여백 / 바깥 여백 / 테두리
display block / inline / none(숨김)
visibility visible / hidden(공간 유지하며 숨김)

 

여백을 다룰 때 padding과 margin을 헷갈리기 쉬웠다. padding은 테두리 안쪽(내용과 테두리 사이) 여백이고, margin은 테두리 바깥쪽(다른 요소와의 사이) 여백이다.

 

display:none vs visibility:hidden
  • display:none: 요소를 아예 없앤다. 차지하던 공간까지 사라진다.
  • visibility:hidden: 보이지만 않을 뿐, 차지하던 공간은 그대로 유지된다.
같아 보여도 레이아웃에 미치는 영향이 전혀 다르다.

 

display:none과 visibility:hidden을 직접 둘 다 줘보니, 하나는 공간이 사라지고 하나는 빈 자리가 남아서 차이가 확실했다. 눈으로 보고서야 둘을 구분하게 됐다.

오늘 느낀 점

  • "구조(HTML)와 표현(CSS) 분리"가 그동안 배운 관심사·계층 분리와 같은 원칙이라, 웹에서도 복잡도를 다루는 법이 같다는 게 느껴졌다.
  • 선택자가 "무엇을 꾸밀지 고르는" 핵심이라, CSS 공부의 절반이 선택자라는 말이 와닿았다. 클래스(재사용)와 아이디(유일) 구분이 특히 중요했다.
  • display:none과 visibility:hidden을 직접 비교해보고서야 둘의 차이가 박혔다. 비슷해 보이는 속성은 눈으로 확인하는 게 최고였다.

한 걸음 더

  • 여러 선택자가 같은 요소를 가리키면 누구의 스타일이 이길까? CSS는 "명시도(specificity)"라는 우선순위 규칙으로 정한다. 대략 인라인 > 아이디 > 클래스 > 태그 순으로 더 구체적인 선택자가 이긴다. 스타일이 "안 먹히는" 문제의 상당수가 이 우선순위 때문이라, 알아두면 디버깅이 쉬워진다.
  • 화면에 보이는 모든 요소는 사실 사각형 상자(box)로 다뤄진다. 내용 → padding → border → margin이 겹겹이 둘러싼 이 구조를 박스 모델이라 한다. 레이아웃이 의도와 다르게 어긋날 때, 이 박스 모델로 여백 계산을 따져보면 원인이 보인다.
  • 요즘은 화면 크기가 PC부터 스마트폰까지 제각각이다. 그래서 화면 너비에 따라 스타일을 바꾸는 미디어 쿼리(@media)로 반응형 디자인을 구현한다. 같은 HTML이 기기마다 다른 모습으로 적응하는 것이, 현대 웹 CSS의 핵심 과제다.
저작자표시 비영리 변경금지 (새창열림)

'language > html' 카테고리의 다른 글

[인터넷활용] 01. HTML 기초와 주요 태그  (0) 2026.06.30

'language/html'의 다른글

  • 현재글[인터넷활용] 02. CSS 스타일링

관련글

티스토리툴바