css 선택자
● 선택자 우선순위
html문서 내부에서의 css 선택자는 우선순위를 갖는다
여기서 모든 링크를 검은색 색상으로 변경으로 변경하고,
현재 선택된 페이지는 붉은색으로 표시하고 읽었던 페이지는 회색으로 표시하려 한다.
색상이 변경된 것을 볼 수 있다.
● 방법 1 (인라인 속성 이용)
방법 1은 코드의 중복이 발생하기 때문에 좋지 못한 방법이다.
html태그의 속성중에는 class 속성이 있는데 위 방법을 사용하면 더 중복을 없앨 수 있다.
● 방법 2 (class 속성 이용)
html 속성중 class를 사용하여 전체 색상을 변경할 수 있다.
스타일태그 내부에서 클래스 값이 saw인 경우를 불러오고 싶다면 . 을 꼭 앞에 작성해줘야 한다.
여기서 실제 머무르는 페이지는 빨간색으로 추가적으로 표시해주고 싶다면 클래스를 하나 더 주어 해결할 수 있다.
위처럼 클래스는 여러 개의 값이 들어올 수 있고 공백을 기준으로 구분된다는 점을 알 수 있다.
한개의 태그에는 여러개의 속성이 들어올 수 있고, 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
하지만 위의 방법은 문제점이 있다.
● 문제
결과에서 볼 수 있듯이 후에 입력된 명령이 더 큰 영향력을 갖게된다
위 처럼 선택자의 순서에 따라서 결정되기 때문에 좋지 못한 방법이다.
이럴때는 우선순위가 높은 선택자를 사용하면 된다.
class보다 우선순위가 높은 id 속성을 사용하면 된다.
위의 결과에서 볼 수 있듯이 스타일 태그 내부 순서에 상관없이 의도대로 잘 되는 것을 볼 수 있다.
id 속성을 style태그 내부의 선택자로 불러오기 위해선 .이 아닌 # 기호를 이용한다.
위의 실습에서 알 수 있듯이 id선택자와 class 선택자 중에서는 id 선택자가 우선순위가 높다.
또한 class선택자와 태그 선택자 중에서는 class 선택자가 우선순위가 높다.
스타일 태그 내부의 선택자 < class 선택자 < id 선택자 순서로
선택자에서 우선순위가 존재한다.
id의 값은 중복될 수 없는 값이다. 그렇기 때문에 우선순위가 더 높다.
※ 해당 글은 https://www.youtube.com/watch?v=8-rCMmamtDE&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=7 를 활용하여 작성하였습니다. ※