HTML을 배우고 나면 자연스럽게 궁금해지는 것이 있습니다. 바로 **"웹페이지는 어떻게 예쁘게 꾸미는 걸까?"**라는 질문입니다.
그 답은 바로 **CSS(Cascading Style Sheets)**에 있습니다.
CSS는 HTML과 함께 웹의 기본을 구성하는 핵심 기술 중 하나로, 웹페이지의 디자인과 스타일을 담당하는 언어입니다. 이 글에서는 CSS의 정의와 역할, 기본 사용법을 입문자 눈높이에 맞춰 이해하기 쉽게 설명하겠습니다.
CSS란 무엇인가?
CSS는 "Cascading Style Sheets"의 약자로, 직역하면 "계단식 스타일 시트"입니다.
이름이 조금 낯설 수 있지만, 핵심은 간단합니다:
HTML이 콘텐츠의 구조를 담당한다면, CSS는 그 콘텐츠의 모양을 꾸미는 역할을 합니다.
예를 들어, HTML로 만든 제목 <h1>나의 블로그</h1>에
- 색상을 빨간색으로,
- 글씨 크기를 크게,
- 글꼴을 바꾸고 싶다면
CSS를 사용해야 합니다.
왜 CSS가 중요한가?
웹페이지는 단순한 정보 제공뿐 아니라 **디자인과 사용자 경험(UX)**이 매우 중요합니다. CSS를 사용하면 다음과 같은 이점을 얻을 수 있습니다:
- ✅ 텍스트 색상, 크기, 정렬 등 세부 디자인 조절 가능
- ✅ 레이아웃 구성 및 요소의 배치 가능
- ✅ 반응형 웹 구현 가능 (모바일/태블릿/PC 모두 대응)
- ✅ 사이트 전체에 일관된 스타일 유지 가능
즉, 웹페이지를 눈에 보기 좋게 만들기 위해 CSS는 반드시 필요한 기술입니다.
CSS 기본 문법 구조
CSS는 기본적으로 아래와 같은 형식으로 작성됩니다:
예시:
- h1 → 어떤 HTML 요소에 적용할지 선택하는 선택자
- color와 font-size → 속성
- blue와 24px → 각각의 속성 값
이 코드는 <h1> 태그로 작성된 제목의 색상을 파란색으로, 글씨 크기를 24픽셀로 설정합니다.
CSS를 HTML에 적용하는 3가지 방법
- 인라인 스타일 (Inline Style)
→ HTML 태그 내부에 직접 CSS 작성 -
<p style="color: red;">이 문장은 빨간색입니다.</p>
- 내부 스타일시트 (Internal CSS)
→ HTML <head> 태그 안에 <style>로 작성 -
<style> p { font-size: 16px; } </style>
- 외부 스타일시트 (External CSS)
→ CSS를 .css 파일로 분리하여 HTML과 연결 -
<link rel="stylesheet" href="style.css">
가장 추천되는 방식은 외부 스타일시트 방식입니다. 유지보수와 재사용성이 뛰어나기 때문입니다.
자주 사용하는 CSS 속성 정리
color | 글자 색상 | red, #333, rgb(0,0,0) |
background-color | 배경색 | lightgray, #f0f0f0 |
font-size | 글자 크기 | 16px, 1.2em |
text-align | 정렬 방식 | left, center, right |
margin | 외부 여백 | 10px, auto |
padding | 내부 여백 | 5px, 20px 10px |
border | 테두리 | 1px solid black |
이 속성들만 잘 익혀도 다양한 스타일링이 가능합니다.
CSS 학습 팁 (비전공자 대상)
- ✅ 코드 실습 중심으로 배우기
직접 CSS 코드를 써보면서 결과를 확인하세요. - ✅ 작은 프로젝트부터 시작하기
- 나만의 프로필 카드, 간단한 소개 페이지 만들기 등을 통해 실습
- ✅ HTML과 함께 공부하기
CSS는 HTML과 함께 사용할 때 진가를 발휘합니다. 따라서 두 언어를 병행해서 학습하는 것이 좋습니다. - ✅ 반응형 웹 디자인 익히기
나중에는 미디어쿼리(Media Query)를 통해 다양한 디바이스에 맞는 웹페이지도 만들 수 있습니다.
마무리: CSS는 웹 디자인의 기본
HTML이 웹페이지의 구조라면, CSS는 그 구조를 아름답고 보기 좋게 만드는 옷과 같습니다.
디자이너가 아니더라도, 마케팅, 기획, 콘텐츠 제작, 블로그 운영 등 다양한 분야에서 CSS는 여러분의 콘텐츠에 전문성과 완성도를 더해줍니다.
처음에는 생소하고 복잡해 보일 수 있지만, 하나씩 코드를 써보며 익혀간다면 누구나 CSS로 멋진 웹페이지를 만들 수 있습니다.
코딩의 두려움을 버리고, 오늘부터 스타일링 기초를 시작해보세요!