CSS 시작하기

🎯 학습 목표

이 강을 마치면 여러분은 HTML로 만든 뼈대에 CSS로 디자인을 입히는 첫걸음을 뗄 수 있게 됩니다. 지금까지 8개 강에 걸쳐 HTML로 구조를 만들었다면, 이제부터는 그 구조에 색·크기·배치 같은 스타일을 더해 보기 좋은 페이지로 바꾸는 CSS를 배웁니다. 이번 강은 그 CSS의 기본 문법과 적용 방법을 다룹니다.

구체적으로는 세 가지를 배웁니다. 첫째, CSS 규칙의 '선택자 { 속성: 값; }' 구조를 이해합니다. 둘째, CSS를 HTML에 연결하는 세 가지 방법을 익힙니다. 셋째, 그중 무엇을 권장하는지 파악합니다.

🎨 CSS란 무엇인가

이 섹션에서는 CSS가 무엇이고 HTML과 어떻게 다른지 다시 정리하겠습니다.

CSS는 'Cascading Style Sheets'의 줄임말로, 웹 페이지의 겉모습(디자인)을 담당합니다. HTML이 '이곳은 제목, 저곳은 문단'이라며 구조와 내용을 정한다면, CSS는 그 제목을 '빨간색으로, 크게, 가운데'처럼 어떻게 보이게 할지를 정합니다. 집에 비유하면 HTML이 뼈대와 벽이라면, CSS는 페인트와 인테리어인 셈입니다.

이렇게 구조(HTML)와 디자인(CSS)을 분리하는 것은 매우 중요한 원칙입니다. 내용은 그대로 두고 디자인만 바꿀 수 있고, 반대로 디자인은 유지하며 내용만 고칠 수 있기 때문입니다. 그래서 HTML 안에 디자인을 섞기보다, CSS로 따로 관리하는 것이 좋습니다. 그 방법은 뒤에서 자세히 보겠습니다.

📐 CSS 규칙의 구조 — 선택자, 속성, 값

이 섹션에서는 CSS를 쓰는 기본 문법을 살펴보겠습니다. 이 구조만 이해하면 CSS의 절반은 배운 셈입니다.

CSS는 '어떤 것을, 어떻게'의 형태로 작성합니다. 아래 예시를 봅시다.

p {
  color: red;
  font-size: 20px;
}

이 짧은 코드가 CSS 규칙 하나입니다. 세 부분으로 나누어 읽습니다. 맨 앞의 p는 선택자(selector)입니다. '누구를 꾸밀 것인가', 즉 스타일을 적용할 대상을 고르는 부분입니다. 여기서는 모든 <p>(문단) 태그를 뜻합니다.

중괄호 { } 안에는 '어떻게 꾸밀 것인가'가 들어갑니다. 각 줄은 속성(property): 값(value);의 형태입니다. color: red;는 '글자 색(color)을 빨강(red)으로'이라는 뜻이고, font-size: 20px;는 '글자 크기(font-size)를 20픽셀로'라는 뜻입니다. 즉 속성은 '무엇을' 바꿀지, 값은 '어떻게' 바꿀지를 나타냅니다.

여기서 꼭 지켜야 할 문법이 있습니다. 속성과 값 사이는 콜론(:)으로 잇고, 각 줄의 끝은 반드시 세미콜론(;)으로 마칩니다. 이 세미콜론을 빠뜨리는 것이 초보자의 흔한 실수이니 주의하세요. 정리하면 CSS 규칙은 '선택자 { 속성: 값; }'이라는 하나의 틀로 이루어지며, 앞으로 배울 모든 CSS가 이 구조를 따릅니다.

🔌 CSS를 HTML에 적용하는 세 가지 방법

이 섹션에서는 이렇게 작성한 CSS를 HTML에 연결하는 방법을 살펴보겠습니다. 세 가지가 있습니다.

첫째는 인라인(inline) CSS입니다. 태그 안에 style 속성으로 직접 스타일을 적는 방법입니다.

<p style="color: red;">빨간 글씨</p>

이 방법은 해당 태그 하나에만 스타일이 적용됩니다. 간단해 보이지만, 태그마다 일일이 써야 하고 HTML과 디자인이 뒤섞여 관리가 어려우므로 권장되지 않습니다.

둘째는 내부(internal) CSS입니다. HTML 문서의 <head> 안에 <style> 태그를 두고 그 안에 CSS를 모아 쓰는 방법입니다.

<head>
  <style>
    p { color: red; }
  </style>
</head>

이 방법은 한 페이지 안의 모든 <p>에 스타일이 적용되어 인라인보다 낫습니다. 다만 그 페이지 하나에만 적용된다는 한계가 있습니다.

⭐ 외부 CSS — 가장 권장되는 방법

이 섹션에서는 실무에서 가장 널리 쓰이는 외부(external) CSS를 살펴보겠습니다.

외부 CSS는 스타일을 별도의 .css 파일에 따로 작성하고, 그 파일을 HTML에 연결하는 방법입니다. 먼저 style.css라는 파일을 만들어 CSS를 적습니다.

/* style.css 파일 */
p {
  color: red;
  font-size: 20px;
}

그런 다음 HTML의 <head> 안에서 <link> 태그로 이 CSS 파일을 불러옵니다.

<head>
  <link rel="stylesheet" href="style.css">
</head>

여기서 <link> 태그는 외부 파일을 연결하는 빈 요소이고, rel="stylesheet"는 '이것은 스타일시트다'라는 뜻, href="style.css"는 5강에서 배운 것처럼 CSS 파일의 경로입니다.

왜 이 외부 방식이 가장 권장될까요? 첫째, 구조(HTML)와 디자인(CSS)이 완전히 분리되어 관리가 깔끔합니다. 둘째, 하나의 CSS 파일을 여러 HTML 페이지가 함께 사용할 수 있어, 사이트 전체의 디자인을 한 곳에서 통일해 관리할 수 있습니다. 디자인을 바꿀 때 CSS 파일 하나만 고치면 연결된 모든 페이지가 한꺼번에 바뀝니다. 이런 이유로 이 강좌에서도 앞으로는 외부 CSS를 기본으로 삼겠습니다.

⚠️ 자주 하는 실수

이 섹션에서는 CSS를 처음 쓸 때 흔한 실수를 정리하겠습니다.

첫 번째, 세미콜론을 빠뜨리는 것입니다. 각 '속성: 값' 줄의 끝에는 반드시 세미콜론(;)이 있어야 합니다. 빠뜨리면 그 뒤의 스타일까지 적용되지 않을 수 있으니, 습관처럼 붙이세요.

두 번째, link의 경로를 틀리는 것입니다. 외부 CSS가 적용되지 않는다면 href의 파일 경로가 틀렸을 가능성이 큽니다. 파일 이름과 위치가 정확한지 확인하세요. 이미지 경로와 똑같은 규칙입니다.

세 번째, 인라인 CSS를 남용하는 것입니다. 간편하다고 태그마다 style을 붙이면 나중에 관리가 매우 어려워집니다. 특별한 경우가 아니면 외부 CSS를 쓰는 습관을 들이세요.

📝 핵심 요약

이번 강에서는 CSS를 시작했습니다.

• CSS — HTML의 구조에 디자인(색·크기·배치)을 입히며, 구조와 디자인을 분리하는 것이 원칙입니다.
• 규칙 구조 — '선택자 { 속성: 값; }' 형태로, 속성과 값은 콜론으로 잇고 줄 끝은 세미콜론으로 마칩니다.
• 세 가지 적용법 — 인라인(태그 style), 내부(head의 style 태그), 외부(별도 .css 파일)가 있습니다.
• 외부 CSS 권장 — link 태그로 .css 파일을 연결하며, 구조·디자인 분리와 여러 페이지 공유가 가능해 가장 권장됩니다.

이제 CSS를 쓰고 연결하는 법을 익혔습니다. 그런데 예시에서는 p처럼 태그 이름으로만 대상을 골랐습니다. 다음 강에서는 특정 요소를 콕 집어 고르는 다양한 선택자를 배워, 원하는 곳에 정확히 스타일을 줄 수 있게 하겠습니다. 다음 강 「선택자」에서 이어가겠습니다.

📚 참고 자료

• CSS란 무엇인가 — MDN Web Docs
• CSS 적용 방법과 구조 — MDN Web Docs
• <link> 요소 — MDN Web Docs