CSS의 선택자의 기본

CSS의 중요한 토대는 두가지가 있습니다.

1. 효과 2. 선택자

이번 글은 선택자에 대한 토대를 닦는 글이 되겠습니다.

 

기존에 하던 예제가 수업에 조금 맞지 않아 수정을 하겠습니다.

우선 저 안에 있던 style 속성을 다 지워줍니다.

그럼 다른 목록들과 똑같이 생기게 될 겁니다.

그리고 a 선택자에서 텍스트의 크기를 검정색으로 통일을 해라 라고해서 다 검정색으로 보입니다.

이것도 지워주면 됩니다.

지우면 위에 사진과 같이 될 것입니다.

그러면 이 링크들은 각자 링크가 어떤 속성이냐에 따라서 색깔이 나오게 될 것입니다.

방문하지 않았으면 파란색이고 방문을 하면 보라색으로 바뀌게 됩니다.

그러면 우선 여기 있는 웹 페이지에 있는 모든 a 태그들을 기본적으로 검정색 텍스트로 표기를 할겁니다.

그리고 사용자가 방문한 적이 있던 페이지는 회색으로 바꾸겠습니다.

그리고 현재 사용자가 머물고 있는 링크는 현재 방문하고 있다는 뜻에서 빨간색으로 표시를 하겠습니다.

모든 링크는 기본적으로 검은색, 사용자가 방문한 링크는 회색, 현재 페이지는 빨간색으로 하겠습니다.

 

첫번째는 모든 a 태그의 컬러를 black으로 지정을 해줍시다.

이건 배운 내용이였습니다. 

그 다음으로는 방문한 페이지를 회색으로 처리하려고 합니다.

이전 수업으로 배웠던대로 하게 되면 각각의 태그에 가서 style 태그를 인라인으로 적는 것입니다.

인라인으로 적는 것이 무엇이냐면 직접 가서 하나하나 다 적어주는 겁니다.

style ="color:gray;" 이런식으로요. 

그런데 이 방식대로 하면 중복이 발생을 하게 됩니다.

이 중복을 없애는 방법은 우선 중복되는 코드를 지워주고 HTML과 CSS 텍스트를 같은 그룹으로 묶어서

그 그룹에 대한 폰트 색깔을 회색으로 주겠습니다.

그 방법은 바로 class라는 HTML의 속성을 주는 것입니다. 그리고 속성의 값으로 보았다 라는 뜻으로 "saw"라고 하겠습니다.

saw라는 클래스 값을 갖는 태그 두개를 만들었습니다.

이 웹페이지에 있는 모든 태그 중에서 saw라는 클래스 값을 가지고 있는 모든 태그에 대해서

폰트 컬러를 gray로 주고 싶은 상태입니다. 그래서 아래 사진처럼 배웠던 것처럼 해보았습니다.

근데 적용이 안됩니다.

그 이유는 이렇게 우리가 saw라고 쓰게 되면 이 웹페이지의 모든 saw라는 이름의 태그를 선택하는

선택자이기 때문입니다. 우리가 하고싶은 것은 class 값이 saw인 태그입니다.

그 때 사용하도록 약속된 특수한 기호가 바로 점(.) 입니다.

saw 앞에 .을 붙이게 되면 선택자는 어떤 뜻을 갖게 되냐면 이 웹페이지에 있는 모든

class가 saw인 태그를 가리키는 선택자가 되게 됩니다.

저장을 하고 페이지를 갱신해보면 회색으로 바뀐 것을 볼 수가 있습니다.

자 그러면 이 클래스라고 하는 것은 어떤 뜻이 있는 걸까요?

그룹핑하다. 하나로 묶는다 라는 의미입니다.

 

그 다음에 현재 우리가 머물고 있는 페이지에 대해서 빨간색으로 표시하고 싶다면 어떻게 하면 될까요?

 

이런식으로 추가를 해주게 되면 현재 머물고 있는 곳만 빨간색으로 표시되게 됩니다.

이걸 통해서 알 수 있는 것은 class라는 속성의 값은 여러 개의 값이 들어올 수 있는 것이고

띄어쓰기로 구분을 한다. 그리고 하나의 태그에는 여러개의 속성이 들어올 수 있고 여러 개의 선택자를 통해서

하나의 태그를 공동으로 제어할 수 있습니다.

그런데 이방법은 그렇게 좋은 방법이 아닙니다.

여기 있는 이 a 태그는 두 개의 클래스의 영향을 받고 있습니다. 바로 saw와 active입니다.

그렇다면 왜 이 태그가 빨간색으로 표시되는 걸까요? 바로 순서 때문입니다.

 

active가 더 나중에 적용이 되기 때문에 빨간색으로 표시가 되는 것입니다. 순서를 바꾸면 회색으로 표시가 됩니다.

그래서 우선순위가 높은 것을 선택할 필요가 있습니다. 그것이 뭐냐면 바로 ID 선택자 입니다.

아래 사진과 같이 코드를 바꿔 줍니다.

 

그 다음으로는 웹페이지에서 id 값이 active인 태그를 선택하려고 합니다.

그럼 이 코드를 어떻게 바꾸면 되냐면 앞에다가 #을 붙이면 됩니다.

active가 saw보다 뒤에 등장했음에도 불구하고 리로드 했을 때 붉은색이 되는 것을 볼 수 있습니다.

이말은 즉 ID 선택자와 class 선택자가 붙게 되면 ID 선택자가 이긴다는 것과 같습니다.

그리고 class 선택자가 a 태그 선택자를 이기게 됩니다.

ID선택자 > class 선택자 > 태그 선택자

이것들은 전부 다 똑같은 형태의 선택자입니다.

예를 들어, 전부 다 클래스 선택자라고 한다면 가장 마지막에 등장하는 클래스 선택자가 우선순위가 높다는 것입니다.

그런데 이것을 외우려고 한다면 쉽게 까먹을 것입니다.

원리를 이해하면 쉽게 까먹지 않게 됩니다.

왜? 냐는 말이 중요합니다. 왜 저 순서대로 강한 것일까요?

왜 그러냐면 id의 값으로 active가 웹페이지에서 한 번 등장을 하게 되면 그 다음에는 active 라는 값을 쓰면 안됩니다.

즉 id의 값은 단 한 번만 등장을 해야합니다. 마치 개개인의 주민번호와 같다는 것입니다. 유일무이한 값이다.

태그 선택자와 ID 선택자보다 훨씬 더 포괄적입니다. 그래서 이 css를 만든 사람들은

좀 더 구체적인 것을 포괄적인 것보다 우선순위를 높였습니다.

그래야지만 태그 선택자를 통해서 전체적인 디자인을 우선 해놓고 그 중에 예외적인 부분들만

ID를 딱,딱, 찍어 가면서 예외를 두는 것이 아무래도 디자인하고 코딩하는데 훨씬 효율적이기 때문입니다.

 

여기까지 했으면 여러분은 이제 검색을 할 수가 있습니다.

CSS selector 라는 키워드로 검색을 하면 여러가지 정보가 나옵니다.

이제 이것을 해석할 수 있는 기초적인 눈을 가지게 된겁니다.

p라고 적혀있는 예제를 봅시다. 여기서 element는 태그와 같은 뜻입니다.

즉 모든 P 태그를 선택한다라는 말입니다.