| # | 도전 과제 | 통과 |
|---|---|---|
| 1 | 셀렉터 기본 | |
| 2 | 복합 셀렉터 | |
| 3 | 셀렉터 게임 |
03 CSS와 셀렉터
# CSS와 셀렉터
## 미션
---
HTML문서를 만들고, CSS를 적용하여 아래와 같은 문서를 만드시오.
## 개념
---
#### ⭐️ HTML과 CSS 역할
HTML은 웹 문서를 만든다. 여기에 디자인을 입히려면 CSS를 사용해야 한다.
메이크업에 따라 분위기가 달라지는 것 처럼, HTML도 CSS에 따라 다양한 연출이 가능하다.
#### ⭐️ CSS 셀렉터
CSS로 문서를 꾸미려면, 문법을 알아야 한다. 그 중, 가장 핵심은 셀렉터(selector)이다. 셀렉터는 HTML 요소를 선택하고, 이를 꾸며준다.
## 코드
---
1) html 문서 작성 및 CSS 파일 연결
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="a.css" />
</head>
<body>
<h1>별다방 카페</h1>
<h2>운영진</h2>
<ul>
<li class="male" id="ceo">X</li>
<li class="female">Y</li>
</ul>
<h2>매니저</h2>
<ul>
<li class="male">P</li>
<li class="female">Q</li>
</ul>
<h2>알바</h2>
<ul>
<li class="male">A</li>
<li class="female">B</li>
<li class="male">C</li>
<li class="female">D</li>
</ul>
</body>
</html>
```
2) 글꼴(폰트) 변경
```
/* body 요소를 선택 */
body {
/* 글꼴 변경 */
font-family: "NanumGothic";
}
```
3) 클래스 셀렉터
```
/* "male" 클래스가 부여된 요소를 모두 선택 */
.male {
/* 글자색 변경 */
color: #007bff;
}
/* "female" 클래스가 부여된 요소를 모두 선택 */
.female {
/* 글자색 변경 */
color: #e43681;
}
```
4) 일반 요소 셀렉터
```
/* 모든 ul 태그를 선택 */
ul {
/* 리스트 스타일 없애기! bullet 사라짐 */
list-style: none;
}
```
5) 아이디 선택자
```
/* "ceo" 아이디가 있는 놈, 이를 선택 */
#ceo {
/* 배경색 변경 */
background-color: #dfe0e1;
}
```
## 결과
---
## 질문
---
- HTML과 CSS의 역할?
- CSS 셀렉터란?
- 하나의 HTML 문서가, 다르게 디자인 될 수 있나?
Challenge
개념 실습! 학습 내용을 진짜 내 것으로 만들기!