1 class 선택자
<li><a href="2.html" style = "color:gray;">명량</a></li>
<li><a href="3.html" style = "color:gray;">극한직업</a></li>
색을 바꾸고 싶을때 style태그를 써서 변경 할 수 있지만 이렇게 되면
중복이 발생하게 된다
중복을 없애기 위해 텍스트를 같은 그룹으로 묶고
그 그룹에 대해 정보를 지정해 주는 방법
-> class라고 하는 html의 속성을 주는것
ex) 속성의 값으로 saw라고 지정
.saw{
color: gray;
}
<li><a href="2.html" class="saw">명량</a></li>
<li><a href="3.html" class="saw">극한직업</a></li>📕"." class 값이 saw 인 태그를 사용하기위해 약속된 특수기호
. 없이 saw를 쓰게되면 웹페이지의 모든 saw태그를 선택하는 선택자 태그가 됨
극한직업의 색상만 빨강으로 바꾸고 싶다면
전에 만들어둔 class="saw"속성 뒤 새로 추가하고싶은 속성의 값을 적고
ex) active
선택자 .active 클래스를 만들어 원하는것을 작성하면됨
.saw{
color: gray;
}
.active{
color: red;
}
<li><a href="2.html" class="saw">명량</a></li>
<li><a href="3.html" class="saw active">극한직업</a></li> - class 속성은 여러개의 값이 들어올수 있고 띄어쓰기로 구분한다
- 하나의 태그에는 여러개의 속성이 들어올수있고
- 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할수있다
위의 방법은 좋은 것은 아닌데
좋은방법이 이제 나온다
2 id 선택자
태그가 나오는 순서에 따라 처리하는 값이 달라진다
가까이에 있는 명령이 더 큰 영향력을 가지므로
우선순위가 높은것을 사용할 필요성
<style>
#active{
color:green;
}
</style>
<body>
<li><a href="2.html" class="saw">명량</a></li>
<li><a href="3.html" class="saw" id="active">극한직업</a></li>
</body>.은 클래스를 의미하고
#을 붙이는건 id를 의미한다
3 선택자의 우선순위
id선택자 > clsaa선택자 > 태그 선택자
📖기억하기 쉽도록 이해할내용
id 선택자는 중복이 되지 않고 유일무이한 값이다
ex) 학번 주민등록번호
클래스라는 말은 무언가를 그룹핑한다는뜻
ex) 1학년 1반
태그 선택자는 id선택자보다 포괄적이다
css제작자들은 구체적인것을 포괄적인 것보다 우선순위를 높였다
태그 선택자를 통해 전체 디자인을 하고
그중에 예외적인 것들의 id를 통해 처리하는것이 효율적이기 때문이다
:)