[생활코딩] WEB2(CSS_03) CSS 선택자

* Windows 운영체제 기준으로 작성되었습니다.

* vs code editor를 사용합니다.

 

§ CSS 선택자 → Click!

 

모든 링크, 즉 <a>태그는 기본적으로 검은색으로, 방문한 적이 있는 링크는 회색으로, 현재 방문하고 있는 링크는 빨간색으로 수정해봅시다. 이 때, 코드를 중복으로 작성하지 않고, 동일한 값을 줄 태그들을 class라고 하는 html의 속성을 준 후, 속성의 값(이름)으로 saw를 줍니다. 이름은 원하는 것으로 바꿔도 상관 없습니다~!~! 그리고 위의 <style>태그에서 saw라는 class를 속성으로 가진 태그의 색을 gray(회색)으로 바꿔줍니다. 이 때, 그냥 saw라고 쓰면, saw라는 이름의 태그를 가리키는 선택자를 의미하므로, saw 앞에 .을 찍어주어 class가 saw인 태그를 가리키는 선택자로 만들어줍시다.

<style>
	.saw {
		color:gray;
	}
</style>

<ul>
	<li><a href="1st.html" class="saw">1st Grade?</a></li>
	<li><a href="2nd.html"class="saw">2nd Grade?</a></li>
</ul>

class의 값으로 saw를 준 "1st Grade?"와 "2nd Grade?"의 색이 회색으로 바뀐 모습을 볼 수 있습니다. class의 경우 한 번에 여러 속성이 들어올 수 있으며, 띄어쓰기로 구분됩니다. 또한 하나의 태그에는 여러 개의 속성이 들어올 수 있고, 여러 개의 선택자를 통해 하나의 태그를 공동으로 제어할 수 있습니다. 그럼 살짝 변형을 해보겠습니다.

<style>
	.saw {
		color:gray;
	}
    	.active {
    		color:red;
    	}
</style>

<ul>
	<li><a href="1st.html" class="saw">1st Grade?</a></li>
	<li><a href="2nd.html"class="saw active">2nd Grade?</a></li>
</ul>

이런식으로 코드가 짜여있을 때, "2nd Grade"는 어떤 색으로 출력될까요?

빨간색입니다! 이유는 <style> 태그 안의 선택자의 위치 때문인데요. 가까이에 위치한 선택자가 더 큰 영향력을 가지기 때문입니다. 이번에는 id 선택자를 사용해보겠습니다. <style> 태그 안에서 class의 value값에 접근하기 위해 .을 사용하였다면, id에 접근하기 위해서는 #을 사용합니다. id 선택자와 class 선택자가 붙으면 id 선택자가 이기며, class 선택자와  tag 선택자가 붙으면 클래스 선택자가 이깁니다. 즉, id 선택자 > class 선택자 > tag 선택자 순으로 영향력이 큽니다. 같은 선택자 내에서는 가장 마지막에 등장하는 선택자의 영향력이 가장 큽니다.

<style>
    a {
        color:black;
        text-decoration:none;
    }
    #active {
        color:red;
    }
    .saw {
        color:gray;
    }
 </style>

<li><a href="1st.html" class="saw"> 1st Grade?</a></li>
<li><a href="2nd.html" class="saw" id = "active">2nd Grade?</a></li>