선택자의 타입들
이번 수업에서는 다양한 형태의 선택자를 알아봅니다.
- 태그 선택자
- 클래스 선택자
- 아이디 선택자
3가지의 선택자를 알아볼 것인데 여러분은 이미 1가지 선택자를 알고 계시고 2개만 더 배우면 됩니다.
1) 태그 선택자
태그를 선택합니다. 아래 코드는 이 문서의 모든 li 태그라는 뜻입니다.
li{color:red}
2) 아이디 선택자
아이디 속성의 값에 해당하는 태그를 선택하는 선택자입니다. 아래의 코드는 이 문서에서 id값이 select인 태그라는 뜻입니다.
#select{font-color:50px;}
selector_1.html
<!DOCTYPE html>
<html>
<head>
<style>
li{
color:red;
text-decoration:underline;
}
#select{
font-size:50px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li id="select">CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
실행 화면
다음과 같이 id가 select인 값만 font-size 가 적용됨을 알 수 있다.
3) 클래스 선택자
클래스 속성의 값에 해당하는 태그들을 선택하는 선택자입니다.
클래스 속성을 선택하려면 .클래스명 으로 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
li{
color:red;
text-decoration:underline;
}
#select{
font-size:50px;
}
.deactive{
text-decoration: line-through;
}
</style>
</head>
<body>
<ul>
<li class="deactive">HTML</li>
<li id="select">CSS</li>
<li class="deactive">JavaScript</li>
</ul>
</body>
</html>
실행 화면
클래스가 deactive인 요소들은 취소선이 지정되었음을 알 수 있다.
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 9. font (0) | 2017.10.03 |
|---|---|
| 생활코딩 css 정리 - 8. color 그리고 text-align (0) | 2017.09.30 |
| 생활코딩 css 정리 - 7. font-size (0) | 2017.09.26 |
| 생활코딩 css 정리 - 6. 속성을 공부하는 방법 (0) | 2017.09.25 |
| 생활코딩 css 정리 - 5. 가상 클래스 선택자 (0) | 2017.09.25 |
| 생활코딩 css 정리 - 4. 부모 자식 선택자 (0) | 2017.09.21 |
| 생활코딩 css 정리 - 2. 선택자와 선언 (0) | 2017.09.18 |
| 생활코딩 CSS 정리 - 1. inline과 style태그를 이용한 css 적용하기 (0) | 2017.09.14 |