css에서 가장 중요한 요소는 효과(declaration) 와 선택자(selector)이다.
그 중 선택자에 대해서 조금 더 살펴보려고 한다.
(효과는... 그냥 필요한 효과 그때그때 구글링해서 쓰면 되겠더라)
See the Pen Untitled by j1n00000 (@j1n00000) on CodePen.
위의 코드에서 모든 a 태그는 검정으로 해놨다.
html과 css페이지의 태그는 보라색, 현재 페이지는 초록색으로 바꾸고자 한다.
처음에 아무것도 모른채로 생각한건 그냥 속성으로 일일이 넣는 거였는데, 그러면 중복도 생기고 수정하기도 번거롭다.
따라서 그룹으로 묶어서 수정하고 싶다는 생각이 자연스럽게 든다. 이를 위한 HTML 속성은 class이다.
CSS에서 HTML속성인 class를 선택자로 가져올 때는 " . " 과 함께 class 속성 값을 입력하면 된다.
HTML에서 class 속성의 값은 여러 개로 쓸 수 있고 띄어쓰기로 구분된다.
예를 들어 현재 페이지의 class 속성값을 wow fantastic 으로 바꾸면,
CSS 선택자로 .fantastic을 입력해 현재 페이지만 수정할 수 있다.
여기서 .fantastic보다 .wow 가 나중에 쓰이면 현재 페이지 태그의 폰트 색상은 보라색으로 유지된다.
같은 class 끼리는 나중에(최신에) 등장한 명령을 따르기 때문.
이럴 때 class보다 강한 HTML속성이 필요하다. 바로 id 속성이다.
id에 대해 주의해야 할 점은, id의 속성값은 단 한번만 등장해야 한다는 것이다.
개개인의 id가 하나이고, 중요한 정보인 것처럼... 그런 닉값을 하는 속성이다
CSS에서 id를 선택자로 쓸 때는 # 을 붙여야 한다.
위 사진에서 fantastic 보다 wow 가 나중에 왔음에도 fantastic 선택자에 대한 명령이 잘 실행되고 있음을 알 수 있다.
여기까지의 내용을 정리하면
CSS 에서 선택자는 포괄적인 것보다 구체적(예외적)인 것이 더 강하다.
즉, 명령 우선순위는
id > class > 일반적인 다른 선택자들(a 등..) 이다.
선택자는 이외에도 여러 유형이 있으니 효과와 함께 필요할 때 검색해서 적절히 쓰면 될 것이다.
최종 코드: