[CSS] 선택자(Selector) - (1)

css 선택자에 대해서

작업한 내용 코드펜 링크
: css 선택자는 후에 자바스크립트로 DOM 객체를 가져올 때도 사용되기 때문에 제대로 짚고 넘어가는 편이 좋을 것 같아서 포스팅을 하고자 한다. 오늘 배운 내용은 모두 저 위에 코드펜 링크로 연습을 해봤고, 여기서는 그에 대해 요약 및 정리를 하고자 한다. 이걸 모두 외운다기 보다는 알아놓고 나중에 필요한 상황에서 적절히 써먹고, 까먹으면 여기로 돌아오는 방식으로 써먹으면 될 것 같다.

선택자의 종류와 각 종류별 사용법 정리

1. type selector : 유형 선택자는 태그 자체를 선택자로 쓰는 것이다. 예를 들어,

     h1 {
     	color:blue;
       }
       
       

   를 적용해주면, 웹 문서 전체에 h1 태그에 해당 스타일이 적용된다. 따라서, type selector를 써줄 때에는 이 선택자가 웹문서에 있는 모든 해당 태그에 적용된다는 점을 명확히 인식하고 써야한다.
2. id & class : id와 class 선택자는 스타일을 적용하고자하는 태그에 class 속성 혹은 id 속성을 줘서 값으로 이름을 적어주고, css 파일에서 class의 경우에는 '.클래스명' 형태로, 즉, 앞에 .을 붙여서 사용해주고, id의 경우는 '#id명' 이런식으로 '#'을 붙여서 쓴다. 이 때, class와 id의 차이는 class는 복수의 태그에 공통으로 쓸 수 있다는 점이다. 예를 들어, 백신접종자를 class명으로 한다음에 다수의 백신 접종자 명단에 background-color:green;을 적용하고 싶다면, class명을 이용하면 된다. 그러나, 만약에 회사에서 직급체계 등을 표시할 때(table로 만들때), CEO는 회사에 한명이라고 가정할 때, CEO의 row에는 검정색 배경을 주고 싶다면 tr 태그에 id로 "ceo" 이렇게 줘서 #ceo 이렇게 선택자를 사용해 ceo의 명단에 해당하는 row'에만' 검정색 배경을 줄 수 있다. 추가적으로, class를 쓸 때, 예를 들어, css에서 student라는 클래스에 color: blue;를 해놓은 것에 더하여, math라는 클래스에 font-weight:bold; 그리고 english 라는 클래스에 font-style:italic;을 해놨다고 해보자. 이 상태에서 학생 명단 테이블에 모든 학생 row에 class="student"를 디폴트로 하되, 수학을 수강하는 학생에는 class="student math"로 해주고, 영어를 수강하는 학생에게는 class="student english"로 해주고, 마지막으로 둘다 수강하는 학생에게는 class="student math english"로 해주면, 복수의 스타일링이 적용된다.
** class, id는 가장 많이 쓰여지는 선택자이므로 쓰임새를 잘 알아두자!
3. Attribute selector : 속성 선택자는 예를 들어, input의 type속성 혹은 selected 속성과 같이 특정 속성을 걸어준 요소에 대해서 혹은 특정 속성의 값을 걸어준 요소에 대해서만 스타일을 적용할 때 쓴다. 이와 같은 속성 선택자는 유용한 시점이 예를 들어, 로그인 폼을 만들었을 때, input에 대해서 모두 적용하기보다는 input 중에서도 type='password'인 경우에만 적용하고 싶다하면,

     
     	input[type="password"] {
       	background-color:black;
           color:white;
           }
     
     

   이런식으로 줄 수 있다. 이에 더하여, 예를 들어, a 태그의 경우에 활용법이 있는데, a태그에서 href 속성을 이용한다고 했을 때 만약에 naver로부터 가져온 링크에 대해서는 초록색, youtube로부터 가져온 링크에 대해서는 빨강색으로 분기처리하고 싶다면,

   
     a[href*="naver"] {
     	color: lightgreen;
       }
     a[href*="youtube"] {
     	color: red;
       }
     
     

   이런식으로 해주면, 만약 href에 naver가 포함되어만 있어도 연두색으로 스타일링이 되고, youtube가 포함되어만 있어도 빨간색으로 스타일링 된다. 이외에도 ^, $ 특수문자를 위와 같은 위치에 써주면 전자는 시작이 네이버로 시작하는 href 속성을 가진 요소, 그리고 후자는 끝부분이 네이버로 끝나는 href 속성을 가진 요소에만 스타일링이 적용된다. ^, $, *등을 잘 활용하면, 하나하나 class, id를 적용해주지 않아도 좀더 간편하게 이에 대한 분기처리가 가능하다.
4. 가상 클래스 선택자(Pseudo class selector) :
   • child를 이용한 선택자 : first-child, last-child, nth-child로 나눠서 쓸 수 있는 이 선택자는 해당 클래스, 아이디, 혹은 요소를 자식요소로 하는 부모요소의 첫번째 자식요소에 스타일을 적용한다. 이러한 룰을 가지고 있기 때문에 만약 해당 요소의 부모요소의 첫번째 자식요소가 지정한 요소 혹은 클래스, 아이디에 속하지 않는다면, 원하는 대로 첫번째 자식요소에 스타일을 적용할 수 없다. 사용법은

           
           	tr:first-child {
             	/*이렇게 쓰거나*/
             }
             tr:last-child {
             	/*이렇게 쓰거나*/
             }
             tr:nth-child(3) {
             	/*이렇게 쓴다 */
             }
             /* 이 때, nth-child의경우 매개변수의 수를 직접 지정할 수도 있지만, 
             여기에 2n-1 or 2n을 써주면 각각 홀수와 짝수에만 적용되고, 
             매개변수에 odd, even을 넣으면 이것도 마찬가지로 홀수 짝수로 적용된다.
           
           

     위와 같다.
   • of-type을 이용한 선택자 : 위의 child와 유사하지만, 약간 다른데, of-type 선택자는 해당 선택자가 가리키는 요소의 부모 요소 중 해당 선택자가 가리키는 '타입'과 일치하는 것 혹은 '클래스 혹은 id 등'과 일치하는 경우에 한해서 적용한다. 예를 들어, tr:first-of-type을 써주면, tr태그의 부모요소인 table 요소의 자식 요소중 tr 태그와 같으면서(and) 첫번째 요소에 스타일을 걸어준다. 이외에도 last-of-type이면 자식요소중 특정 태그와 같으면서(and) 마지막 요소에 걸어주고, nth-of-type(n)은 똑같이 같으면서 n번째 요소에 걸어준다. nth-of-type도 nth-child와 똑같이 odd, even 혹은 2n-1, 2n으로 짝수, 홀수를 함수처럼 적용해줄 수 있다.
   child vs of-type : 둘의 근본적인 차이는 단지 부모요소의 n번째 자식요소에 적용할지(child) 아니면 동일한 타입을 기준으로 n번째에 적용할지(of-type)이다. 그래서, first-child를 쓰면 만약 맨위에(첫번째 자식요소) 태그가 선택자가 선택한 태그가 아닌 경우(혹은 선택한 클래스명 등이 아닐 때에는)에는 적용되지 않는다. 하지만, first-of-type으로 적용하면, 맨위에 요소가 선택한 태그가 아닐 경우에도 그 아래에 선택한 태그가 한개라도 있으면 그중에 첫번째 요소에 적용되게 된다. 즉, 타입을 기준으로 첫번째 요소를 선택하기 때문에 위의 경우와 같이 아무것도 적용되지않는 상황은 발생하지 않는다. 하지만, of-type에도 클래스명으로 선택자를 지정했을 때, 만약 부모요소의 자식요소로 다양한 타입, 예를 들어, div, p태그 등이 있었을 때, 그리고 그 모두의 클래스명이 동일할 때, div 태그중 첫번째 요소, p태그중 첫번째 요소 모두에 적용이 된다는 점이 직관적으로 이해가 어렵기 때문에 이부분에 대한 고려가 필요하다(사용시에).
   • :not() 선택자 : 이것은 간단하게 말하면, 예를 들어, input type="password" 빼고 모든 input에 background-color:blue를 주고 싶을 때 사용할 수 있는데, 이런식으로 사용한다.

     input:not(input[type="password"]) {
           	background-color:blue; 
           }
           /* 혹은 */
     input:not(.passwordInput) {
     	background-color:blue;
     }
     /*이런식으로 클래스명을 넣어줄수도 있다( id도 가능 )*/
           

   • 마지막으로 동적 가상 클래스 선택자가 있다. 동적 가상 클래스 선택자는 유저와의 인터랙션에 쓰이는 부분에 스타일링을 할 때 쓰는데, 예를 들어, 유저가 특정 요소에 hover, 즉, 마우스를 올리는 행동을 했을 때 cursor:pointer 등을 주기위해 사용된다.

     a[href^="https"]:hover {
           cursor:pointer;
           }
           /* 이런식으로 뒤에 :를 붙여서 써준다. */

     이외에도 active, focus(input을 마우스로 눌렀을 경우 혹은 커서가 떠있는 경우에 스타일링을 위한 선택자), enabled, disabled, checked 등이 있는데, 추가적으로 살펴볼 것은 a태그에서 활용 가능한 a:link와 a:visited 그리고 다른 것에도 쓸 수 있는 hover, active이다. a태그에 :link 동적 가상 클래스 선택자를 써주면, 방문기록을 기준으로 해당 링크에 유저가 방문한적이 없는 상태일 때의 링크를 스타일링해준다. 그러나, 만약 방문기록상에 이미 방문이 된 것으로 기록된다면, :visited에 지정해준 스타일이 적용된다. hover는 아까 설명했고, active는 실제로 유저가 링크를 마우스로 눌렀다가 떼기전 단계까지의 스타일링을 지정해준다. 유저가 마우스를 해당 요소에 올리는 것이 hover라면 active는 실제 클릭을 하고 떼기 직전까지의 액션에 해당되는 것이다. 이 때, 여태까지 말한 네가지 선택자는 반드시 순서를 지켜서 써줘야한다(한가지 요소에 모두 적용하는 경우에). LVHA(link, visited, hover, active)순서로 써주면 된다.