[CSS] 그래서 CSS 선택자가 뭐라고?
a, h1 등등의 'tag'라는 선택자 말고도
다른 종류의 선택자들이 있다.
1. class
특정 페이지들을 방문했을 때 링크 색깔을 빨간색으로 바뀌게 하려고 한다.
이렇게, 해당 페이지에만 특정 효과를 넣으려고 하는 것이지만
다른 태그에 중복되는 속성을 부여하게 될 경우,
결국 귀찮고, 불편하다.
class 를 지정하면 이러한 귀찮음을 없앨 수 있다.
이렇게 style 속성 대신 class 속성을 지정했다.
'방문'이니까 value를 visit로 정했다.
그 다음 style 태그 안에 class 선택자를 쓴다.
.속성값 으로 적용할 수 있다.
결과
만약, 다른 페이지에서는 빨간색으로 보이지만,
2번 페이지로 이동했을 때는 2번 페이지의 링크를 초록색으로 바꾸고 싶어진다면,
이렇게 추가적으로 값을 지정할 수 있다.
2번 페이지로 갔을 때 그것이 현재 페이지가 되기 때문에, '현재'라는 뜻으로 value를 now로 정했다.
class는 속성값의 구분을 띄어쓰기로 한다.
그리고 style 태그 안에 .now만 새로 쓸 수 있다.
적용이 잘 되었다.
이렇듯,
class 속성의 특징은
값이 여러 개가 들어올 수 있다는 것이다.
이에 따라
태그에도 여러 개의 속성이 들어올 수 있고
여러개의 선택자를 통해 하나의 태그를 공동으로 제어할 수 있다.
2. id
여기서 a 태그는 두 class의 영향을 받고 있다.
그런데 왜 적용받는 건 now의 초록색뿐일까?
만약 now선택자의 순서를 visit선택자의 앞으로 바꿔보면
빨간색이 적용이 되고 초록색은 적용이 되지 않는다.
보다 가까이 있는 명령(더 최근의 명령)이 더 큰 영항력을 갖기 때문이다.
즉 가장 마지막의 선택자의 우선순위가 가장 높다.(중요!)
CSS, Cascading Style Sheet에서
Cascading이 '계단식''폭포가 되어 떨어지는' 등의 뜻이라는 것을 생각해보면 의미심장하다.
아무튼 순서를 매번 신경쓰는 것보다는 어떻게 되든 항상 내 의도대로 적용하도록 하는 것이 더 효율적이다.
그렇다면 우선순위가 더 높은 명령을 적용할 필요가 있다.
그러한 명령이 id 선택자다.
class에서 now 값을 떼어와서 id 속성의 값으로 지정했다.
<style> 태그에서는 #속성 으로 사용한다.
이렇게 적용하면, 다시 내가 원하는 효과가 된다.
이번에는 id 선택자가 어느 순서가 되든 효과가 바뀌지 않는다.
여기서
태그->class->id 선택자의 순서로 갈 수록 힘이 강해진다(명령이 우선적으로 적용된다)는 것을 알 수 있다.
그런데 왜 이렇게 될까?
id의 값은 class와 다르게 단 한 번만 쓸 수 있다. 중복될 수 없고, 유일무이한 값이라는 소리다.
즉
id 선택자의 값은 class 선택자의 값보다 더 구체적인 값이 되고,
class 선택자의 값은 id 선택자의 값보다 더 포괄적인 값이 된다.
당연히 전체적인 설정에서 구체적이고 예외적인 설정으로 갈 수록
디자인을 하는데에 효율적이기 때문에 id의 우선순위가 가장 높은 것이다.
--------
class와 id는 그 값을 내가 임의로 지정할 수 있어서 가지고 노는 기분이 들어 재미있었다.
한 편으로는, 내가 제작하는 과정에서 쉽게 수정할 수 있어야 하기 때문에 이름을 어떤 효과인지 직관적으로 알 수 있게 잘 정해야겠다고도 생각했다.