CSS(씨에스에스, Cascading Style Sheets)는 웹페이지를 예쁘고 보기 좋게 만들어주는 스타일 언어입니다. HTML이 웹페이지의 뼈대를 만들었다면, CSS는 그 뼈대에 색을 입히고 꾸미는 역할을 합니다. 처음 웹 개발을 배우는 학생에게 CSS는 웹 디자인의 첫걸음이 되는 중요한 기술입니다. 이 글에서는 CSS의 기본 개념, 문법, 적용 방법, 자주 쓰이는 속성 등을 2500자 이상의 분량으로 자세히 설명합니다.
1. CSS란 무엇인가요?
CSS(Cascading Style Sheets)는 HTML로 만든 웹페이지에 디자인을 추가하는 스타일 언어입니다. 글자의 색, 크기, 간격, 배경색, 여백, 위치, 애니메이션 등 웹페이지의 시각적인 부분을 제어할 수 있습니다.
CSS의 역할은 다음과 같습니다:
- 텍스트 스타일 지정: 글자 색, 크기, 정렬 방식, 줄 간격 등
- 배경 꾸미기: 배경색, 배경 이미지, 투명도 등
- 레이아웃 구성: 박스 정렬, 위치 지정, 화면 분할 등
- 애니메이션 적용: 움직임, 전환 효과 등
2. CSS를 어떻게 사용하나요?
CSS는 크게 세 가지 방식으로 HTML에 적용할 수 있습니다.
1) 인라인 스타일 (Inline)
HTML 태그 안에 직접 스타일을 작성합니다. (잘 쓰이지 않음)
<p style="color: red;">이 글자는 빨간색입니다.</p>2) 내부 스타일 (Internal)
<style> 태그를 사용해 HTML 문서 안에 CSS를 작성합니다.
<head>
<style>
p {
color: blue;
}
</style>
</head>
3) 외부 스타일시트 (External)
.css 파일을 따로 만들어 연결합니다. 가장 많이 쓰이는 방식입니다.
<link rel="stylesheet" href="style.css">
3. CSS의 기본 문법
CSS는 선택자(selector)와 선언(declaration)으로 구성됩니다.
선택자 {
속성: 값;
속성: 값;
}
예제:
h1 {
color: green;
font-size: 30px;
}
이 코드는 모든 <h1> 태그의 글자를 초록색, 크기는 30픽셀로 지정합니다.
4. 선택자(Selector)의 종류
CSS에서 선택자는 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다.
- 태그 선택자: 특정 HTML 태그에 적용 →
p { ... } - 클래스 선택자: class 속성이 있는 요소에 적용 →
.box { ... } - ID 선택자: id 속성이 있는 요소에 적용 →
#header { ... } - 전체 선택자: 모든 요소에 적용 →
* { ... } - 자식 선택자: 특정 구조 안에 있는 요소에 적용 →
div p { ... }
클래스와 ID 예시:
<p class="highlight">이 문장은 클래스에 적용된 스타일입니다.</p>
<p id="unique">이 문장은 ID에 적용된 스타일입니다.</p>
.highlight {
color: orange;
}
#unique {
font-weight: bold;
}
5. 자주 쓰이는 CSS 속성
1) 글자 스타일
color: 글자 색상font-size: 글자 크기font-family: 글꼴text-align: 정렬 (left, center, right)line-height: 줄 간격
2) 배경
background-color: 배경색background-image: 배경 이미지background-size: 이미지 크기
3) 여백
margin: 요소 바깥쪽 여백padding: 요소 안쪽 여백
4) 테두리
border: 테두리 두께, 색상, 모양border-radius: 테두리 둥글게
5) 레이아웃
display: 요소의 박스 유형 지정 (block, inline, flex 등)position: 위치 설정 (relative, absolute, fixed 등)width, height: 가로, 세로 크기
6. 반응형 웹이란?
CSS를 이용하면 웹페이지가 스마트폰, 태블릿, PC 등 다양한 화면 크기에 맞춰 자동으로 변형되도록 만들 수 있습니다. 이를 반응형 웹(Responsive Web)이라고 합니다.
미디어 쿼리 사용 예:
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
이 코드는 화면 너비가 600픽셀 이하일 때 배경색을 연회색으로 바꿉니다.
7. CSS 예제 실습
<style>
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
color: #333;
line-height: 1.6;
margin: 20px;
}
.button {
background-color: green;
color: white;
padding: 10px 20px;
display: inline-block;
border-radius: 5px;
}
</style>
<h1>CSS 배우기</h1>
<p>이것은 스타일이 적용된 문장입니다.</p>
<a href="#" class="button">버튼 클릭</a>
8. CSS 학습 팁
- 기초 속성부터 익히기: color, margin, padding, font-size 등 자주 사용하는 속성부터 연습
- 직접 따라 해보기: 예제를 직접 타이핑하며 결과 확인
- 개인 프로젝트로 실습: 나만의 포트폴리오 페이지, 소개 페이지 만들어보기
- 개발자 도구 활용: 브라우저에서 요소 검사(F12)로 CSS 확인 및 수정
결론
CSS는 HTML에 스타일을 입혀 멋진 웹페이지를 만들 수 있게 해주는 필수 도구입니다. 글자색을 바꾸거나, 배경을 넣거나, 버튼을 디자인하는 등 웹을 아름답게 꾸미는 데 사용됩니다. 처음에는 많은 속성과 규칙이 어렵게 느껴질 수 있지만, 자주 사용되는 속성부터 연습하고 작은 프로젝트를 만들면서 익히다 보면 금방 익숙해질 수 있습니다. 꾸준히 실습하면서 나만의 스타일을 만들어 보세요!
'IT' 카테고리의 다른 글
| 자바스크립트(JavaScript)란? (0) | 2025.04.25 |
|---|---|
| HTML(HyperText Markup Language)이란? (0) | 2025.04.24 |
| 프론트엔드와 백엔드 (0) | 2025.04.23 |
| Data Structure(자료구조)란 (0) | 2025.04.23 |
| HSRP의 기능, 역할 및 사용 예시 (고가용성, 라우터, 네트워크 장애 대비) (0) | 2025.04.15 |
