07 CSS 선택자의 기본

1.

CSS에서 중요한 2가지 개념이 있다.

 

1) 효과

 

2) 선택자

 

이다.

 

이전 게시글에서, 효과에 대해서 다뤘고,

 

이번 게시글에서는, 선택자 이다.

 

2.

모든 링크는 기본적으로 검은색으로 표현 하고,

사용자가 한번이라도 방문했으면, 각 글들의 링크 색은 회색으로 표현 하고,

현재 페이지의 링크는 빨간색으로 표현 하려고 한다.

 

 

 

 

지금 까지 배운 바로는 style 이라는 인라인 속성을 통해서 이를 처리 했다.

 

하지만, style = "color : gray;" 를 두번이나 반복했는데,

중복이 발생한 것이다.

 

3.

중복을 없애 보기.

 

 

test 라는 속성값을 가지고 있는 class 속성을 사용해보자.

 

그리고, 선택자를 통해서 색 효과를 줘보자 !

 

 

 

엥 ? 색이 변경되지 않은 모습 이다.

 

왜 그럴까 ?

 

이유는, 다음과 같다.

 

선택자 ! 란, 이 웹 페이지에서, "test" 라는 이름의 태그를 선택하기 때문이다.

 

즉, 어떠한 이름을 가진 태그를 찾아서, 해당 태그를 선택하는 것이다.

 

예시

 

ol 태그의 자식 선택자인 li 태그를 선택해서, 해당 태그의 색을 skyblue 로 바꿔줘 ~

 

예시

 

 

 

그렇다면, class = "test" 가 태그일까 ? 

 

아니다.

 

이것은 class 라는 속성이고, 해당 속성의 속성값이 "test" 인것이다.

 

그러면, class 라는 속성의 속성값을 읽으라고 하고 싶으면 어떻게 해야할까 ?

 

바로, 점( . ) 을 붙히면 된다.

 

 

 

색이 변경된 것을 확인 할 수 있다.

 

4.

 

정리 :

test 앞에 점( . ) 을 붙히는 순간,

이 선택자는 웹 페이지에서 class가 "test"인 모든 것을 가리키는 선택자가 된다.

 

5.

class 란 ?

같은 의도에 따라 묶여진 것들을 하나로 묶을 때 사용한다.

 

그루핑 하다. 하나로 묶는다 라는 뜻이 내포 되어 있다.

 

6.

현재 머물고 있는 페이지의 링크를 빨간색으로 표시 해보자.

 

 

 

 

위의 이미 처럼, class = "test red" 라고 적고,

.red { color : red; } 로 나타낸 모습을 확인 할 수 있다.

 

이를 통해, class 라는 속성의 값으로는,

여러 개의 값이 올 수 있고,

띄어쓰기로 구분한다는 것을 알 수 있다.

 

또한,

여러 개의 선택자를 통해, 하나의 태그를 공동으로 제어 하고 있다는 것도 알 수 있다.

 

하지만, 이런 방법은 좋은 방법이 아니다..

 

왜냐하면, <a> 태그는 두 개의 class에 영향을 받고 있기 때문 이다.

 

 

이 선택자의 위치를 서로 바꾸면 어떻게 될까 ?

 

 

 

.red는 먹히지 않고, 회색으로 변한 모습을 볼 수 있다.

 

7.

 

즉, 태그에 좀 더 가까이 있는 명령이 더 큰 영향력을 갖게 된다.

 

더 쉽게 말하자면, 가장 최근에 말한 명령어를 따르게 된다.

 

8.

그러면 어떻게 해결 해야 할까 ?

 

ID 선택자를 사용 해서 해결 할 수 있다.

 

 

 

li 태그 내부에 a 태그 내부에 id 속성의 값을 red 라고 지어줌으로써,

 

상단에 <style> 내부에서는 위의 이미지와 같이 표현 하게 된다.

 

점 (.) 대신에, id 속성을 가리키는 선택자 표현 방법은,

# 이다.

 

 

오,   .test 가 가장 최근에 내린 명령어 인데도,

빨간색 글씨가 반영된 모습이다.

 

이를 통해서, ID 선택자가 class 선택자를 이긴다는 것을 알 수 있다.

 

9.

 

정리 :

 

제일 높은 우선 순위 : ID 선택자. 

 

중간 정도 우선 순위 : class 선택자.

 

가장 낮은 우선 순위 : 태그 선택자.

 

똑같은 선택자 라면 ?   >> 맨 마지막에 등장하는 (명령을 내린) 선택자가 우선 순위가 높다.

 

 

제일 최근 명령어가,

a 태그 선택자랑, h1 태그 선택자랑,

ol 태그의 자식 태그인 li 태그 선택자 인데,

 

모든  a 태그의 글 색이 검은색으로 바뀌는게 아니라,

 

우선 순위가 높은 개념대로 글씨색이 적용 된다.

 

10.

 

보충 정리 :

 

id의 값은 한 웹 페이지에서 단 한번만 등장 한다.

이것은 약속 이다.

 

자바로 따지면, PK (식별자) 에 해당 한다.

 

사람으로 따지면, 주민등록번호 이다.

 

유일 하다.

 

그러기 때문에, 단 한번만 등장 한다. == 중복되면 안된다.

 

태그 선택자는 포괄적이다. == 중복을 방지하고, 효율을 추구 하기 위해서.

 

그래서 예외적인 상황에, 우선 순위가 높은 선택자를 사용 하는 개념으로 생각하자.

 

우선 순위 :

 

id 선택자 >> class 선택자 >> 태그 선택자.