[CSS] CSS 선택자의 기본

CSS 선택자의 기본

교재: 생활코딩! HTML+CSS+자바스크립트

229p ~ 238p

 

CSS를 지배하는 두 가지 중요한 토대가 있다.

첫 번째는 효과이고, 두 번째는 선택자이다.

CSS 06 에서 효과에 대한 토대를 닦았고, 이번에 선택자에 대한 토대를 닦아보자.

​

* 예제 코드

... 생략 ...
<ol>
     <li><a href="1.html">HTML</a></li>
     <li><a href="1.html">CSS</a></li>
     <li><a href="1.html">JavaScript</a></li>
</ol>
... 생략 ...

 

예제 코드의 모든 <a> 태그를 기본적으로 검은색으로 바꾸고,

사용자가 방문한 적이 있었던 페이지는 회색으로 바꾸고 싶다.

또, 현재 사용자가 머물고 있는 페이지의 링크는 현재 방문하고 있다는 뜻에서 빨간색으로 표시하고 싶다.

즉, 모든 링크는 기본으로 검은색이며, 방문했던 링크는 회색, 현재 페이지 링크는 빨간색으로 하겠다.

 

웹 페이지의 모든 <a> 태그를 검은색으로 지정하기

... 생략 ...
<style>
      a {
           color : black;
           text-decoration : none;
       }
</style>
... 생략 ...

방문했던 페이지 링크 회색으로 지정하기

<li><a href="1.html" style="color:gray;">HTML</a></li>
<li><a href="2.html" style="color:gray;">CSS</a></li>

style 인라인 속성을 통해 처리하면 중복이 발생하게 된다.

'HTML'과 'CSS' 라는 두 텍스트를 같은 그룹으로 묶고, 그 그룹에 대해 폰트 색상을 회색으로 지정하려면,

해당하는 두 태그에 대해 class 라는 HTML 속성을 지정하면 된다.

 

<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>

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

단순히 "saw" 라고 쓰면 웹 페이지에서 "saw"라는 이름의 태그를 선택하는 선택자가 되므로,

class 값인 "saw" 태그를 선택한다고 알려주려면 태그 이름 앞에 점(.)을 붙여야 한다.

​

​

* class 뜻

반을 뜻하는 class와 같은 의미이다.

즉 클래스라는 것은 같은 의도에 따라 묶여진 것들을 뜻한다.

클래스란 말에는 '그루핑하다', '하나로 묶는다' 라는뜻이 포함돼 있다.

 

현재 머물러 있는 페이지 링크 빨간색으로 지정하기

<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active">CSS</a></li>

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

※ .active가 .saw 보다 나중에 위치해있으면 태그에 좀 더 가까이 있는 명령(.saw)가 더 큰 영향력을 갖게 되므로,

.active의 빨간색 스타일이 적용되지 않는다.

이럴 때 우선순위를 높여서 사용하는 방법으로는 ID선택자가 있다.

 

 

<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>

<style>
      #active {
              color: red;
       }
</style>

태그 이름 앞에 #을 붙여 .saw가 #active보다 뒤에 있어서 "CSS" 링크가 빨간색으로 바뀌는 것을 볼 수 있다.

ID 선택자 >>> class 선택자 >>>>> 태그 선택자

만약 모든 선택자가 똑같은 형태라면, 맨 마지막에 등장하는 선택자가 우선순위가 높다.

ID 선택자는 단 한 번만 등장해야 하며, 중복돼서는 안 된다.