선택자
선택자와 선언
● Selector : 주어
● Declaration : 선언
● property : 속성
● value : 속성 값
● value-Property Separator : 속성과 속성을 구분
● Declaration Separator : 선언과 선언을 구분하는 구분자
선택자의 종류
1. 태그 선택자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <style> li{ color:red; text-decoration:underline; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html> | cs |
● 효과를 여러개 지정 할 때는 세미콜론(;)이 있어야 한다.
li{
color:red;
text-decoration:underline;
}
2. 아이디 선택자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <style> #select{ font-size:50px; } </style> </head> <body> <ul> <li>HTML</li> <li id="select">CSS</li> <li>JavaScript</li> </ul> </body> </html> | cs |
● id 값이 select인 태그에 대해서 효과를 주겠다.
<style>
#select{
font-size:50px;
}
</style>
3. 클래스 선택자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <style> .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> | cs |
● 관리하기 쉽도록 그룹핑 하는것이 클래스다.
● 교실 - 클래스, 학번 - id로 생각하자
학번은 중복되면 안된다. 유일한 식별자로 생각하면 쉽다.
select라는 id가 등장 했기 때문에 더 이상 select라는 id가 존재하면 안된다. (같은 학번이 존재하면 안된다.)
'Web Programming > HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [CSS] 가상 클래스 선택자 (1) | 2018.06.18 |
|---|---|
| [CSS] 부모 자식 선택자 (0) | 2018.05.09 |
| [JavaScript] 달력 만들기 (0) | 2018.04.15 |
| [JavaScript] 계산기 (0) | 2018.04.15 |
| [JavaScript] 이미지 자동 변경 (0) | 2018.04.15 |
