07. css 선택자의 기본
css 를 지배하는 두 가지 중요한 토대가 있습니다. 첫번째는 효과 이고 두번째는 선택자 입니다.
선택자에 대한 요모조모를 살펴보면서 여러분이 이제 검색할 수 있고, 질문할 수 있고, 궁금해 할 수 있게 하는 가장 중요한 이야기를 해보겠습니다.
모든 링크는 기본적으로 검은색, 사용자가 방문했던 각 글들의 링크색은 회색, 현재 페이지의 링크는 빨간색으로 바꿔보겠습니다 !
그런데 이렇게 되면 중복이 발생합니다. 그럼 먼저 중복된 코드 먼저 없애겠습니다.
해당하는 두 태그에 대해 class라는 HTML 속성을 지정해주면 된다.
클래스 "saw" 로 묶고 클래스는 . 을 붙여준다. saw 앞에 . 을 붙이는 순간 이 선택자는 웹페이지에서 class 가 "saw" 인 모든 태그를 가리키는 선택자가 된다. 그 선택자를 선택받고 있는 것들은 파란색으로 바뀐다.
다음으로 'css' 링크, 즉 현재 머물고 있는 페이지의 링크를 빨간색으로 표시 하고 싶다면 active라는 클래스를 추가하고, active 선택자에 폰트 색상을 빨간색으로 지정하면 된다.
이를 통해 class 라고 하는 속성의 값은 여러 개의 값이 올 수 있고, 띄어쓰기로 구분한다는 것 과 하나의 태그에는 여러가지 속성이 들어갈 수 있고, 여러개의 선택자를 통해 하나의 태그를 공동으로 제어 할 수 있다는 사실을 알 수 있습니다.
그런데 !!! css 가 왜 빨간색이 됐냐면 css 코드 안에서 .active가 .saw보다 나중에 등장 했기 때문입니다.
만약 둘의 순서가 바뀌었다면 css의 글씨는 파란색으로 나타날 것이다.
즉, 태그에 좀더 가까이 있는 명령이 더 큰 영향력을 갖는다는 것입니다. 말하자면 권력이 같다면 가장 최근에 명령한 사람의 말을 들어야 하는 것처럼 생각하면 됩니다.
그래서 우리는 좀 더 우선순위가 높은 것을 사용할 필요가 있습니다. 그것이 ID선택자 입니다.
ID 선택자 앞에는 #을 붙인다.
✔️ 우선순위 순
ID 선택자 > 클래스 선택자 > 태그 선택자
그리고 모두 똑같은 형태의 선택자 라면 맨 마지막에 등장하는 선택자가 우선순위가 높다 !
- ID선택자 : id 값은 단 한번만 등장 해야 한다. 중복돼서는 안된다 !
- 클래스 선택자 : 태그 선택자보다 우선순위가 높지만 id 선택자보다 우선순위가 낮다
- 태그 선택자 : 훨씬 더 포괄적이다.