07. css 선택자의 기본

 

css 를 지배하는 두 가지 중요한 토대가 있습니다. 첫번째는 효과 이고 두번째는 선택자 입니다.

선택자에 대한 요모조모를 살펴보면서 여러분이 이제 검색할 수 있고, 질문할 수 있고, 궁금해 할 수 있게 하는 가장 중요한 이야기를 해보겠습니다.

 

모든 링크는 기본적으로 검은색, 사용자가 방문했던 각 글들의 링크색은 회색, 현재 페이지의 링크는 빨간색으로 바꿔보겠습니다 !

1번 모든 링크를 검은색으로 설정하기

 

---

2. html과 css 에 따로 글씨를 blue로 바꿔주기

 

그런데 이렇게 되면 중복이 발생합니다. 그럼 먼저 중복된 코드 먼저 없애겠습니다.

해당하는 두 태그에 대해 class라는 HTML 속성을 지정해주면 된다.

클래스 "saw" 로 묶고 클래스는 . 을 붙여준다. saw 앞에 . 을 붙이는 순간 이 선택자는 웹페이지에서 class 가 "saw" 인 모든 태그를 가리키는 선택자가 된다. 그 선택자를 선택받고 있는 것들은 파란색으로 바뀐다.

 

---

다음으로 'css' 링크, 즉 현재 머물고 있는 페이지의 링크를 빨간색으로 표시 하고 싶다면 active라는 클래스를 추가하고, active 선택자에 폰트 색상을 빨간색으로 지정하면 된다.

이를 통해 class 라고 하는 속성의 값은 여러 개의 값이 올 수 있고, 띄어쓰기로 구분한다는 것 과 하나의 태그에는 여러가지 속성이 들어갈 수 있고, 여러개의 선택자를 통해 하나의 태그를 공동으로 제어 할 수 있다는 사실을 알 수 있습니다.

 

그런데 !!! css 가 왜 빨간색이 됐냐면 css 코드 안에서 .active가 .saw보다 나중에 등장 했기 때문입니다.

만약 둘의 순서가 바뀌었다면 css의 글씨는 파란색으로 나타날 것이다.

즉, 태그에 좀더 가까이 있는 명령이 더 큰 영향력을 갖는다는 것입니다. 말하자면 권력이 같다면 가장 최근에 명령한 사람의 말을 들어야 하는 것처럼 생각하면 됩니다.

그래서 우리는 좀 더 우선순위가 높은 것을 사용할 필요가 있습니다. 그것이 ID선택자 입니다.

ID 선택자 앞에는 #을 붙인다.

 

✔️ 우선순위 순

ID 선택자 > 클래스 선택자 > 태그 선택자

그리고 모두 똑같은 형태의 선택자 라면 맨 마지막에 등장하는 선택자가 우선순위가 높다 !

 

• ID선택자 : id 값은 단 한번만 등장 해야 한다. 중복돼서는 안된다 !
• 클래스 선택자 : 태그 선택자보다 우선순위가 높지만 id 선택자보다 우선순위가 낮다
• 태그 선택자 : 훨씬 더 포괄적이다.