CSS가 왜 필요한지와 기본 문법 정리하기

이 글에서 다루는 내용

HTML은 웹페이지의 뼈대를 만드는 역할을 합니다.

하지만 HTML만으로는 웹페이지를 보기 좋게 꾸미기 어렵습니다.

글자 색을 바꾸거나, 버튼 모양을 만들거나, 화면 배치를 정리하려면 CSS가 필요합니다.

이번 글에서는 CSS가 왜 필요한지, CSS가 어떤 역할을 하는지, 그리고 CSS의 기본 문법인 선택자, 속성, 값을 정리합니다.

HTML만 사용했을 때의 한계

HTML만 사용해도 웹페이지를 만들 수는 있습니다.

<h1>나의 첫 웹페이지</h1>
<p>HTML만으로 만든 문장입니다.</p>
<button>확인</button>

위 코드는 브라우저에 제목, 문장, 버튼을 보여줍니다.

하지만 화면은 매우 기본적인 모습으로 표시됩니다.

글자 색, 간격, 버튼 모양, 배치 같은 디자인을 세밀하게 조정하기 어렵습니다.

즉, HTML은 내용을 보여주는 데는 충분하지만, 보기 좋게 꾸미는 데는 한계가 있습니다.

CSS는 왜 필요할까?

CSS는 웹페이지의 모양을 꾸미기 위해 사용합니다.

쉽게 말하면 HTML이 집의 구조라면, CSS는 벽지, 조명, 가구 배치에 가깝습니다.

HTML이 “무엇을 보여줄지”를 담당한다면, CSS는 “어떻게 보여줄지”를 담당합니다.

<h1>나의 첫 웹페이지</h1>

h1 {
  color: blue;
  font-size: 32px;
}

위 CSS 코드는 h1 태그의 글자 색을 파란색으로 바꾸고, 글자 크기를 32px로 설정합니다.

CSS의 역할

CSS는 웹페이지의 시각적인 부분을 담당합니다.

대표적으로 다음과 같은 작업을 할 수 있습니다.

웹페이지를 실제 서비스처럼 보이게 만드는 데 CSS는 거의 필수입니다.

CSS 기본 문법

CSS는 보통 다음과 같은 구조로 작성합니다.

선택자 {
  속성: 값;
}

예시를 보면 더 쉽습니다.

p {
  color: red;
}

위 코드는 p 태그의 글자 색을 빨간색으로 바꿉니다.

여기서 각 부분의 의미는 다음과 같습니다.

선택자란?

선택자는 어떤 HTML 요소를 꾸밀지 고르는 부분입니다.

h1 {
  color: blue;
}

위 코드에서 h1이 선택자입니다.

즉, HTML 문서 안에 있는 h1 태그를 선택해서 스타일을 적용하겠다는 뜻입니다.

<h1>제목입니다</h1>
<p>문장입니다</p>

h1 {
  color: blue;
}

이 경우 h1만 파란색이 되고, p 태그는 그대로 유지됩니다.

속성이란?

속성은 무엇을 바꿀지 정하는 부분입니다.

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

위 코드에서 color와 font-size가 속성입니다.

color는 글자 색을 바꾸는 속성이고, font-size는 글자 크기를 바꾸는 속성입니다.

값이란?

값은 속성을 어떻게 바꿀지 정하는 부분입니다.

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

위 코드에서 red와 18px이 값입니다.

즉, 글자 색은 빨간색으로 만들고, 글자 크기는 18px로 만들겠다는 뜻입니다.

선택자, 속성, 값 한 번에 보기

button {
  background-color: black;
  color: white;
  border-radius: 8px;
}

위 코드를 나누어 보면 다음과 같습니다.

이렇게 CSS는 선택한 요소에 여러 스타일을 한 번에 적용할 수 있습니다.

HTML과 CSS를 함께 사용하는 예시

HTML 코드입니다.

<h1>CSS 기초 문법</h1>
<p>CSS는 웹페이지를 꾸밀 때 사용합니다.</p>
<button>시작하기</button>

CSS 코드입니다.

h1 {
  color: navy;
}

p {
  font-size: 18px;
}

button {
  background-color: black;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
}

위 코드처럼 HTML은 내용을 담당하고, CSS는 모양을 담당합니다.

역할을 나누면 코드가 더 깔끔해지고, 나중에 수정하기도 쉬워집니다.

CSS를 사용하면 좋은 점

CSS를 사용하면 같은 스타일을 여러 요소에 반복해서 적용할 수 있습니다.

<p class="notice">첫 번째 안내 문장입니다.</p>
<p class="notice">두 번째 안내 문장입니다.</p>
<p class="notice">세 번째 안내 문장입니다.</p>

.notice {
  color: red;
  font-weight: bold;
}

위 코드처럼 notice라는 class를 가진 문장에 같은 스타일을 적용할 수 있습니다.

만약 색을 바꾸고 싶다면 CSS 코드 한 곳만 수정하면 됩니다.

이 점이 매우 중요합니다.

정리

HTML은 웹페이지의 구조와 내용을 담당합니다.

CSS는 웹페이지의 디자인과 배치를 담당합니다.

CSS 기본 문법은 선택자, 속성, 값으로 구성됩니다.

선택자 {
  속성: 값;
}

처음에는 이 구조만 익혀도 충분합니다.

CSS를 배우면 단순한 HTML 페이지를 실제 웹사이트처럼 보기 좋게 꾸밀 수 있습니다.

또한 스타일을 한 곳에서 관리할 수 있기 때문에 유지보수하기 쉬운 웹페이지를 만들 수 있습니다.