학습
CSS CSS 문법 및 선택자
CSS CSS 문법 및 선택자 — 초급
CSS 문법 및 선택자
1. 도입 (왜 배워야 하는가)
CSS(Cascading Style Sheets)는 웹 페이지의 시각적 스타일을 정의하는 필수적인 언어입니다. 웹 개발에서 HTML이 콘텐츠의 구조를 정의한다면, CSS는 그 콘텐츠를 어떻게 보여줄지를 결정합니다. 따라서 CSS를 배우는 것은 웹 페이지의 디자인과 사용자 경험을 개선하는 데 매우 중요합니다.
만약 CSS를 제대로 이해하지 못한다면, 웹 페이지의 디자인이 엉망이 되거나, 사용자 경험이 나빠질 수 있습니다. 예를 들어, 버튼의 크기나 색상이 일관되지 않으면, 사용자가 원하는 행동을 취하기 어렵게 만들 수 있습니다. 즉, CSS를 잘 활용하는 것은 웹 사이트의 성공에 직결됩니다.
2. 핵심 개념 설명
CSS 문법은 크게 선택자(selector)와 선언(declaration)으로 구성됩니다. 선택자는 어떤 HTML 요소에 스타일을 적용할지를 결정하며, 선언은 적용할 스타일의 속성과 값을 정의합니다.
선택자
- 선택자: 특정 HTML 요소를 선택하기 위한 방법입니다. 예를 들어,
h1태그를 선택하면 모든 제목에 같은 스타일을 적용할 수 있습니다. - 선택자의 종류:
- 타입 선택자: 특정 타입의 요소를 선택합니다. (div, p, h1 등)
- 클래스 선택자: 특정 클래스가 부여된 요소를 선택합니다. (.classname)
- 아이디 선택자: 특정 아이디가 부여된 요소를 선택합니다. (#idname)
| 선택자 종류 | 설명 | 예시 |
|---|---|---|
| 타입 선택자 | HTML 요소의 타입으로 선택 | h1 |
| 클래스 선택자 | 특정 클래스가 부여된 요소 선택 | .example |
| 아이디 선택자 | 특정 아이디가 부여된 요소 선택 | #header |
3. 기본 코드 예제
아래는 기본적인 CSS 문법과 선택자를 보여주는 예제입니다.
h1 {
color: blue; / 글자 색을 파란색으로 설정 /
font-size: 2em; / 글자 크기를 2배로 설정 /
}
.example {
background-color: yellow; / 배경색을 노란색으로 설정 /
padding: 10px; / 안쪽 여백을 10픽셀로 설정 /
}h1 { ... }: 모든 <h1> 요소에 스타일을 적용합니다.color: blue;: 글자 색상을 파란색으로 변경합니다.font-size: 2em;: 글자 크기를 기본 크기의 2배로 설정합니다..example { ... }: 클래스가 example인 모든 요소에 스타일을 적용합니다.background-color: yellow;: 배경 색상을 노란색으로 설정합니다.padding: 10px;: 요소의 안쪽 여백을 10픽셀로 설정합니다.4. 실전 활용 예제
예제 1: 쇼핑몰에서 장바구니 버튼 스타일링
쇼핑몰 웹사이트에서 장바구니 버튼의 디자인을 설정할 때, 다음과 같은 CSS를 사용할 수 있습니다.
.cart-button {
background-color: green; / 버튼 배경색을 초록색으로 /
color: white; / 글자 색상을 흰색으로 /
padding: 15px 25px; / 버튼 안쪽 여백 설정 /
border: none; / 테두리 없애기 /
border-radius: 5px; / 모서리 둥글게 /
cursor: pointer; / 마우스 커서가 포인터로 변경 /
}예제 2: 블로그 포스트 제목 스타일링
블로그 포스트 제목에 스타일을 추가하는 예제입니다.
.post-title {
font-size: 1.5em; / 제목 크기 설정 /
font-weight: bold; / 글자를 굵게 /
margin-bottom: 20px; / 아래쪽 여백 설정 /
color: darkblue; / 글자 색을 짙은 파란색으로 /
}5. 흔한 실수와 주의사항
1. 선택자 오타
잘못된 코드
h1 {
color: blue;
font-size: 2em
}올바른 코드
h1 {
color: blue;
font-size: 2em; / 세미콜론 누락 주의 /
}2. 클래스와 아이디 혼동
잘못된 코드
#header {
color: red;
}HTML에서 클래스 사용:
<div class="header">Hello</div>올바른 코드
.header {
color: red; / 클래스 선택자를 사용할 때는 .을 붙여야 함 /
}