html 태그와 css를 이어주는 선택자에 대해 알아보려고 한다.
선택자는 여러가지 종류가 있으며 요소를 오직 하나만 선택할 수도 있고 동시에 선택할 수도 있다.
선택자의 종류는 아래와 같이 있다.
- "*" : 전체 선택자. 문서 내 모든 요소를 선택
- 태그명 : 태그 선택자. 특정 태그로 만들어진 모든 요소를 선택
- .클래스값 : 클래스 선택자. 특정 클래스 값이 지정된 모든 요소를 선택
- #아이디값 : 아이디 선택자. 특정 아이디 값이 지정된 요소를 선택
- 선택자, 선택자 ... : 그룹 선택자. 여러 유형의 선택자를 한꺼번에 선택
선택자는 같은 값이 중복 될 경우 가장 나중에 쓴 값이 적용되며 선택자끼리도 우선으로 적용되는 순위가 있다. (id>class>태그명
<style>
*{
color: red;
}
li{
color: red;
}
li.hiphop{
color: red;
}
.hiphop{
color: red;
}
#belly{
color: red;
}
li#jazz{
color: red;
}
li#jazz{
color: red;
}
h1, li{
color: red;
}
</style>
<h1>춤의 장르</h1>
<ul>
<li class="hiphop">비보잉</li>
<li class="hiphop">팝핀</li>
<li class="hiphop">락킹</li>
<li id="belly">벨리</li>
<li id="jazz">재즈</li>
</ul>
hyohyo