CSS가 하는 일을 눈으로 이해하기

웹페이지는 내용과 겉모습이 나뉘어 있습니다

웹페이지를 처음 보면 글자, 사진, 버튼, 메뉴가 한 화면에 함께 보입니다. 그래서 모두 한 덩어리처럼 느껴질 수 있습니다. 하지만 웹페이지 안쪽에서는 역할이 나뉘어 있습니다.

HTML은 웹페이지의 뼈대입니다. 사람으로 비유하면 머리, 팔, 다리처럼 "무엇이 있는지"와 "서로 어떤 관계인지"를 정하는 구조입니다. 블로그 글이라면 제목, 본문, 작성자 이름, 댓글 영역이 HTML에 들어갑니다. 쇼핑몰 상품 카드라면 상품 이미지, 상품명, 가격, 구매 버튼이 HTML에 들어갑니다.

CSS는 그 뼈대에 입히는 옷과 인테리어입니다. 글자 색을 바꾸고, 버튼을 둥글게 만들고, 이미지 크기를 맞추고, 요소 사이의 간격과 배치를 정리합니다. 같은 방이라도 벽지, 조명, 가구 배치에 따라 분위기가 달라지듯이, 같은 HTML도 CSS에 따라 전혀 다른 웹페이지처럼 보일 수 있습니다.

간단히 나누면 이렇게 생각하면 됩니다.

예를 들어 "구매하기"라는 버튼이 있다고 해 보겠습니다.

HTML은 "여기에 버튼이 있다"를 말합니다.

<button>구매하기</button>

CSS는 "이 버튼을 파란색으로 칠하고, 글자를 흰색으로 만들고, 모서리를 둥글게 하라"고 말합니다.

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

지금은 코드를 외울 필요가 없습니다. 중요한 것은 HTML은 내용의 종류와 구조를 정하고, CSS는 보이는 모습을 정한다는 점입니다.

AI 생성 이미지

같은 내용도 CSS에 따라 전혀 달라집니다

다음과 같은 상품 카드가 있다고 생각해 봅시다.

<div class="card">
  <img src="bag.jpg" alt="가방 사진">
  <h2>데일리 캔버스 백</h2>
  <p>가볍고 넉넉한 수납공간</p>
  <button>구매하기</button>
</div>

이 HTML은 상품 카드의 재료를 담고 있습니다. 사진, 상품명, 설명, 버튼이 있습니다. 하지만 아직 어떤 분위기인지는 정해지지 않았습니다.

CSS를 어떻게 쓰느냐에 따라 같은 내용이 다르게 보입니다.

여기서 핵심은 HTML을 다시 쓰지 않아도 분위기를 바꿀 수 있다는 점입니다. 물론 내용 자체를 바꾸려면 HTML도 수정해야 합니다. 상품명이 달라지거나 버튼 문구를 "장바구니 담기"로 바꾸는 일은 내용의 변화입니다. 반면 버튼 색을 바꾸거나 카드 간격을 넓히는 일은 CSS의 영역입니다.

비개발자가 CSS를 배우면 좋은 이유가 여기에 있습니다. 이미 만들어진 템플릿이나 웹사이트에서 "내용은 그대로 두고 보기 좋게 고치는 일"을 직접 이해하고 조정할 수 있습니다.

CSS로 바꿀 수 있는 것

CSS는 화면의 겉모습을 다루는 언어입니다. 여기서 "겉모습"은 단순히 예쁘게 꾸미는 것만 뜻하지 않습니다. 사용자가 읽기 편한지, 버튼을 누르고 싶게 보이는지, 중요한 정보가 먼저 눈에 들어오는지도 포함됩니다.

대표적으로 CSS로 바꿀 수 있는 것은 다음과 같습니다.

예를 들어 회사 소개 페이지의 첫 화면을 생각해 봅시다. HTML에는 회사 이름, 한 줄 소개, 문의하기 버튼이 들어갑니다. CSS를 사용하면 회사 이름을 크게 만들고, 배경을 진한 남색으로 바꾸고, 문의하기 버튼을 눈에 띄는 노란색으로 만들 수 있습니다. 이렇게 하면 같은 문구라도 더 신뢰감 있는 첫인상을 줄 수 있습니다.

CSS는 사용자가 화면을 이해하는 순서에도 영향을 줍니다. 큰 글자는 먼저 보이고, 진한 색은 더 눈에 띄며, 넓은 여백은 중요한 내용을 돋보이게 만듭니다. 그래서 CSS는 단순한 장식이 아니라 정보를 읽기 쉽게 정리하는 도구이기도 합니다.

CSS로 바꾸기 어려운 것

CSS가 많은 것을 바꿀 수 있지만, 모든 것을 할 수 있는 것은 아닙니다. CSS의 한계를 알고 있으면 어디를 고쳐야 할지 덜 헷갈립니다.

CSS로 바꾸기 어려운 대표적인 것들은 다음과 같습니다.

여기서 JavaScript라는 말이 나왔습니다. JavaScript는 웹페이지의 행동을 담당하는 언어입니다. 비유하면 HTML이 뼈대, CSS가 옷과 인테리어라면, JavaScript는 스위치를 눌렀을 때 불이 켜지고 문이 열리는 동작에 가깝습니다.

예를 들어 버튼을 빨갛게 만들고 크게 보이게 하는 것은 CSS가 잘합니다. 하지만 버튼을 눌렀을 때 장바구니에 상품이 실제로 담기게 하려면 CSS만으로는 부족합니다. CSS는 "어떻게 보이는가"에 강하고, "무엇이 실제로 일어나는가"는 다른 기술의 도움이 필요합니다.

이 구분을 알면 수정 요청도 더 분명해집니다.

• "버튼 색을 브랜드 색상으로 바꾸고 싶어요" → CSS 수정

• "버튼을 누르면 상담 신청이 접수되게 하고 싶어요" → 기능 수정

• "카드 사이 간격을 넓히고 싶어요" → CSS 수정

• "상품 목록을 인기순으로 자동 정렬하고 싶어요" → 기능 또는 데이터 수정

CSS를 알면 비개발자에게 생기는 장점

CSS를 배운다고 해서 반드시 개발자가 되어야 하는 것은 아닙니다. 오히려 비개발자에게 CSS는 작은 수정의 답답함을 줄여 주는 실용적인 도구가 될 수 있습니다.

첫째, 템플릿을 더 안전하게 수정할 수 있습니다. 블로그, 쇼핑몰, 홈페이지 제작 도구에는 이미 만들어진 디자인 템플릿이 많습니다. CSS를 조금 알면 어떤 값을 바꿔야 글자 크기나 버튼 색이 달라지는지 감을 잡을 수 있습니다. 무작정 여러 설정을 눌러 보는 시간을 줄일 수 있습니다.

둘째, 브랜드 색상을 일관되게 적용할 수 있습니다. 회사나 개인 브랜드에는 자주 쓰는 색이 있습니다. 버튼은 초록색인데 배너는 파란색이고 링크는 빨간색이면 화면이 어수선해 보일 수 있습니다. CSS를 알면 주요 색을 맞추고, 같은 스타일을 여러 곳에 반복해서 적용하는 흐름을 이해할 수 있습니다.

셋째, 랜딩페이지를 더 읽기 쉽게 개선할 수 있습니다. 랜딩페이지는 광고나 링크를 통해 방문자가 처음 도착하는 페이지입니다. 전단지의 첫 장처럼 짧은 시간 안에 핵심을 보여 주어야 합니다. CSS를 알면 제목을 더 잘 보이게 하고, 버튼을 눈에 띄게 만들고, 문단 사이 간격을 조정해 방문자가 내용을 편하게 읽도록 도울 수 있습니다.

넷째, 개발자나 디자이너와 대화가 쉬워집니다. "뭔가 답답해 보여요"라고 말하는 대신 "카드 안쪽 여백을 조금 늘리고, 버튼 색을 브랜드 색상으로 맞추고 싶어요"라고 말할 수 있습니다. 요청이 구체적이면 결과도 더 빨리 가까워집니다.

처음 보는 CSS를 읽는 아주 간단한 방법

CSS 코드는 보통 이런 모양입니다.

.card {
  background-color: white;
  padding: 24px;
  border-radius: 16px;
}

처음 보면 낯설지만, 구조는 단순합니다.

.card는 "card라는 이름이 붙은 요소를 고르겠다"는 뜻입니다. 이처럼 어떤 요소를 꾸밀지 고르는 부분을 선택자라고 합니다. 선택자는 무대 조명과 비슷합니다. 여러 배우 중 누구에게 조명을 비출지 정하는 역할을 합니다.

중괄호 { } 안에는 꾸미는 규칙이 들어갑니다.

• background-color: white; → 배경색을 흰색으로

• padding: 24px; → 안쪽 여백을 24px로

• border-radius: 16px; → 모서리를 둥글게

여기서 px은 화면에서 길이를 재는 단위입니다. 자로 센티미터를 재듯이, 웹 화면에서는 픽셀이라는 작은 점 단위로 크기를 정합니다. 지금은 숫자가 커지면 대체로 더 커지고 넓어진다고 이해하면 충분합니다.

CSS를 처음 배울 때는 모든 속성 이름을 외우려고 하기보다 이렇게 물어보면 좋습니다.

• 지금 무엇을 고르고 있지?

• 어떤 모습을 바꾸고 있지?

• 숫자를 키우면 화면에서 무엇이 커지지?

• 색 이름을 바꾸면 어느 부분의 색이 바뀌지?

CSS는 암기 과목처럼 시작하면 금방 지칩니다. 대신 작은 값을 바꾸고 화면이 어떻게 달라지는지 보는 방식으로 익히는 편이 훨씬 편합니다.

작은 실습: 버튼 하나를 다르게 보이게 하기

아래 HTML이 있다고 생각해 봅시다.

<button class="main-button">무료 상담 신청</button>

처음에는 브라우저의 기본 버튼처럼 보입니다. 회색 배경에 평범한 테두리가 있는 모습입니다.

이제 CSS를 조금 입혀 보겠습니다.

.main-button {
  background-color: #1f6feb;
  color: white;
  padding: 14px 22px;
  border: none;
  border-radius: 999px;
}

완성 결과는 이렇습니다.

각 줄이 하는 일은 간단합니다.

• background-color는 버튼의 배경색을 바꿉니다.

• color는 글자색을 바꿉니다.

• padding은 버튼 안쪽 여백을 넓힙니다. 글자 주변에 숨 쉴 공간을 주는 느낌입니다.

• border는 테두리를 조정합니다.

• border-radius는 모서리를 둥글게 만듭니다. 숫자가 커질수록 더 둥글어집니다.

마지막으로 직접 바꿔 보면 좋은 값입니다.

• 파란색이 너무 강하면 #1f6feb을 #3b82f6처럼 바꿔 보기

• 버튼이 작으면 padding의 숫자를 조금 키우기

• 덜 둥글게 만들고 싶으면 999px을 8px이나 12px로 바꾸기

• 글자를 검은색으로 보고 싶으면 color: black;으로 바꾸기

이번 챕터 체크리스트

• HTML은 웹페이지의 내용과 구조를 맡는다.

• CSS는 색, 크기, 여백, 테두리, 배치 같은 겉모습을 맡는다.

• 같은 HTML도 CSS에 따라 블로그, 쇼핑몰, 포트폴리오처럼 다른 분위기가 될 수 있다.

• CSS는 버튼 색이나 카드 간격은 잘 바꾸지만, 결제나 로그인 같은 실제 기능은 담당하지 않는다.

• CSS를 알면 템플릿 수정, 브랜드 색상 적용, 랜딩페이지 개선을 더 구체적으로 다룰 수 있다.

다음부터 CSS 코드를 볼 때는 "이 코드는 무엇을 꾸미고 있고, 어떤 모습을 바꾸고 있을까?"라는 질문으로 시작하면 됩니다. 그 질문만 잡아도 CSS는 훨씬 덜 낯설게 보입니다.