생활코딩 웹 제작 스터디 [WEB2 - CSS] - 선택자를 스스로 알아내는 법

생활코딩이라는 유용한 사이트를 통해 웹 만들기 스터디를 시작했습니다. 현재 정보처리기사 실기, 파이썬, 웹 이렇게 세 가지의 방향으로 공부를 진행하고 있습니다. 일상에서 언급했던 것과 같이 제 시간표는 그렇게 움직입니다. 앞으로 이 카테고리에서는 공부했던 웹의 내용을 잊지 않고 기억하기 위해 기록할 것입니다.

---

Class라고 하는 html의 속성을 이용하여 코딩을 합니다. saw(임의 지정하는 것)라고 하는 class의 값을 갖는 태그 2개를 만들고, 웹 페이지에 있는 모든 태그 중에서 saw라는 class값을 갖는 모든 tag에 대해서 font 컬러를 gray로 하고자 합니다. 

saw라는 이름을 갖는 class 값 부여

위와 같이 하고 <style> 태그(CSS)를 포스팅했던 글과 같이 saw라고 써봅니다. 하지만 이 코드는 saw라고 되어있는 모든 태그를 선택하라는 명령을 지닌 선택자가 됩니다. (아래 그림의 왼쪽) 따라서, .(점) 기호를 활용하여 .saw라고 작성하면 class가 모두 saw인 태그를 가리키는 선택자가 되는 것입니다.(아래 그림의 오른쪽) 이것은 html에서의 약속입니다.

 

또한, 전체 코드에서 CSS의 글자 색을 빨간색으로 바꾸려고 합니다. 아래의 사진처럼 class 속성을 이용하여 saw 옆에 active라는 속성 값을 부여합니다.

saw와 active 속성을 추가로 부여

그리고 위에 saw와 마찬가지로 .active를 style 태그 안에 작성한 후, 색깔을 입혀줍니다.

 

class값이 active인 태그에 color:red 효과를 입힌다.

완성된 웹 사이트의 모습과 전체 코드

이를 통해 알 수 있는 점은 크게 3가지입니다.

1. class라는 속성의 값은 여러개의 값이 들어올 수 있습니다.

2. 그 값들은 띄어쓰기로 구분합니다. (본문 예, saw active)

3. 하나의 태그에는 여러개의여러 개의 속성이 들어올 수 있고 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있습니다.(본문 예,. saw와. active를 통해 한 개의 <a> 태그를 제어)

 

하지만 치명적인 문제점이 있다.

 

.saw와 .active의 순서를 바꾼 코드

이렇게 코드가 된다면 결과값은 어떻게 될까요? 결과는 같지 않습니다. 왼쪽의 그림과 같이 코딩을 진행하면 원하는 의도대로 결괏값이 도출됩니다. 하지만 오른쪽 그림의 경우는 전부 회색으로 표시가 됩니다. 그 이유는 바로 우선순위 때문입니다. 같은 .(점)기호를 쓰는 클래스는 나중에 나온 코드가 영향력이 크기 때문에 오른쪽 코드에서 red 값은 우선순위에서 밀려 결괏값에서 도출이 되지 않습니다. 그렇다면 이를 극복하는 것은 바로 ID입니다. 

id="active" 속성값을 입력한 코드

이를 활용하기 위해서 어김없이 <style>태그로 올라가 줍니다.

#(샵)기호를 활용하여 작성한다

ID는 #기호를 활용하여 ID 선택자로 구분 작성할 수 있습니다. ID는 style 태그 내에서 순서를 아무리 바꿔도 웹 페이지는 변함이 없습니다. 그 이유는 고유한 값이기 때문입니다. Identification! 따라서, 정리를 해보자면 우선순위가 가장 높은 순으로 ID > CLASS > TAG이며, 그 내용은 TAG 쪽으로 로 갈수록 구체적에서 포괄적으로 변화합니다. 

 

마지막으로 구글에 css selector라고 검색하면 https://www.w3schools.com/cssref/css_selectors.asp 이 사이트가 나옵니다. 이 사이트를 통해 selector를 구분하고 필요한 선택자를 공부할 수 있는 시야를 기를 수 있습니다.