3일차 : CSS 선택자를 스스로 알아내는 법

3일차 : CSS 선택자를 스스로 알아내는 법

 

지난 시간에는 CSS 속성을 알아내는 법을 배웠는데, 이번에는 CSS 선택자를 알아내는 법에 대해 공부합니다.

 

 

선생님께서 내용이 많고 복잡하다고 미리 경고를 하고 있어요!

시작도 전에 두려워지는군요..

 

시간을 충분히 확보하라는데.. 시간은 많으니 시작해보죠!

 

○ 선택자란?

지난 시간에 style 태그에 등장한 a 가 선택자였습니다.

즉, 속성을 적용시킬 대상이 선택자였죠.

 

선택자가 간단하게 a와 같이 하나의 속성을 갖고 있는 경우, CSS 선택자를 입력할 때 그냥 그 속성만 입력하면 됩니다.

지난 시간에 a를 입력하여 모든 하이퍼링크들의 글자 색상이나 밑줄 여부를 한꺼번에 적용시켜줄 수 있었죠.

 

 

○ 전체가 아니라 몇 가지 태그만 변경해주고 싶다면?? 선택자를 그룹으로 지정해주면 된다!

 

지난 시간에 한가지 태그만 속성을 변경하고 싶을 때, 속성을 적용할 곳으로 가서 바로 style 태그를 사용해주었죠.

전체는 아니지만 몇군데 부분을 한꺼번에 속성을 변경시키고 싶을 때는 어떻게 할까요?

 

바로 class 태그를 이용하여 태그들을 그룹으로 묶어준 후, 그 그룹에 대해 속성을 변경해 주면 됩니다.

 

☆ class 태그(html) - 태그들을 그룹으로 묶을 때 사용

 

class 태그를 사용하려면, 그룹으로 묶고 싶은 태그들 안에 class="??" 를 삽입해 주면 됩니다.

예시로, 첫번째와 두번째 하이퍼링크에 이미 본 페이지를 뜻하는 saw를 넣어줍시다.

 

 

그러나 이것을 선택자로 입력할 때에는 그냥 saw를 입력하면 안되고 앞에 .을 붙여줘야 합니다.

왼쪽 아래에서도 saw에 .을 안붙이니 색이 이상하죠? .saw는 아주 멀쩡한데 말입니다.

 

앞에 .을 붙이는 순간, 웹페이지에 있는 모든 class값이 .뒤에 있는 단어인 태그를 선택하는 선택자가 됩니다.

 

정리하자면,

1. class="saw"라고 이미 방문한 페이지 들을 그룹화

2. .saw로 선택자를 지정

=> class 값이 saw인 모든 태그를 선택

 

그런데 여기서 과거에 방문한 페이지는 회색으로, 현재 보고 있는 페이지는 빨강으로 표시하고 싶으면 어쩌죠?

두 번째 페이지를 현재 보고 있다고 가정하면, class 안에 active라는 새로운 값을 넣어주면 됩니다.

 

☆여기서 알 수 있듯 class라는 속성은 여러 개의 값을 넣어줄 수 있으며, 띄어쓰기로 구분합니다.

 

하지만 CSS 안에 적용시키는 속성이 여러개 있을 때는 순서에 따라 가장 나중에 적힌 명령을 따르게 됩니다.

 

 

saw -> active 인 경우, 마지막 명령이 active 이기 때문에 빨강, active -> saw인 경우 반대로 회색이 됩니다.

 

 

요리조리 순서를 다 바꿔보았는데요. a 태그 선택자와 class 선택자의 위치는 변경하여도 결과는 같더라구요.

☆ 여기서 알 수 있는 사실 : 클래스 선택자는 태그 선택자보다 우선순위가 높습니다.

 

그럼 클래스 선택자(.)보다 더 강한 명령어가 있다면, 위치 순서에 관계없이 우선순위를 정해줄 수 있겠죠?

 

클래스 선택자보다 우선순위가 높은 선택자는 바로 아이디 선택자(#)입니다.

 

아이디 선택자도 마찬가지로 id="??"를 사용하여 태그 안에 삽입해 주면 됩니다.

하지만 ID라는 이름에서 볼 수 있듯, ID는 여러 개를 넣어주면 안되고, 유일해야 합니다.

 

즉, id값은 단 한개! 매우 구체적이죠.

 

아이디 선택자보다 클래스 선택자가 포괄적이고, 이보다 더 포괄적인 것은 태그 선택자입니다.

 

 

◎ 결론 : 아이디 선택자 > 클래스 선택자 > 태그 선택자

 

전체 부분을 디자인 하는 것은 태그선택자, 부분 부분 그룹으로 묶어서 변경해 줄 때는 클래스 선택자, 특정한 것만 쏙 골라서 수정해주고 싶을 때는 아이디 선택자를 사용하면 되겠죠.

 

다른 선택자를 알아보고 싶다면, CSS selector를 검색해보면 됩니다.

방금 배운 class와 id가 보이고, 태그선택자에 해당하는 element도 보이네요.

선택자 종류가 수십가지가 있기 때문에 원하는 만큼 세분화해서 적용시키면 될 것 같습니다.