CSS Selector

Selector-선택자

1.후손선택자★

• 후손선택자는 부모태그 안에 있는 모든 자식태그들을 말한다.
  후손선택자의 표기는 공백으로 표기한다.

  기본형]
  선택자A 선택자B -부모[공백]자식

2. 자손선택자★

• 자손선택자는 부모선택자의 바로 아래계층에 있는 자식태그들을 말하고
  표기는 '>'로 표기한다.

  [기본형]
  선택자A > 선택자B

3. 동위 선택자(= 형제선택자)

• 동위 선택자(형제 선택자)는 형제관계에서 뒤에 위치한 동생태그들을
  선택할때 사용하는 선택자이다.

  [기본형]
  1. 선택자A + 선택자B
  : 선택자A 바로 뒤에 있는 선택자B를 선택함.
  만약 바로 아랫줄에 선택자B가 없으면 적용되지 않는다.
  2. 선택자A ~ 선택자B
  : 선택자A 뒤에 있는 선택자B를 선택함.
  만약 동일한 태그가 여러개 있으면 다중 선택한다.

4. 속성 선택자

• 속성 선택자를 사용하면 특정 속성을 가진 html태그를 선택할 수 있다.
  선택자가 뒤에 []를 붙여 표현한다.

  [기본형]
  1. 선택자[속성]
  : 선택된 태그 중 해당 속성을 가진 태그만 선택한다.
  2. 선택자[속성=값]
  : 선택한 태그 중 해당 속성과 값이 일치하는 태그를 선택한다.

5. 형태 구조 선택자

• 형태 구조 선택자는 부모태그안에 자식태그들이 각각 다른 태그로
  구성되어 있을 때 사용한다.
  
• 구조 선택자는 부모태그안에 자식이 태그가 모두 동일해야 쓸 수 있다.

  [기본형]
  - 선택자:first-of-type
  : 부모태그안에 첫번째에 위치한 자식태그를 선택할 때 사용한다.
  - 선택자:last-of-type
  : 부모태그안에 마지막번째에 위치한 자시태그를 선택할 때 사용한다.
  - 선택자:nth-of-type(수열)
  : 부모태그안에 수열번째 위치한 자식태그를 선택할 때 사용한다.
  수열의 의미는 구조선택자와 똑같다.
  - 선택자:nth-last-of-type(수열)
  : 부모태그안에 아래에서 수열번째 위치한 자식태그를 선택할 때 사용한다.

6. 반응 선택자

• 반응 선택자는 사용자에 행동에 따라 반응하여 css디자인을 바꿀 때 사용하는 선택자이다.

• 예를 들면 사용자가 마우스를 특정 태그 위에 올리거나 클릭했을때 상태를 말한다.

  [기본형]
  - 선택자:hover★
  : 사용자의 마우스 커서가 위치한 태그를 선택한다.
  - 선택자:active
  : 사용자가 마우스로 클릭한 태그를 선택한다.
  단, 클릭하고 있는 동안만 반응한다. 잘 사용x

7. 상태 선택자

• 상태 선택자는 서치바나 로그인창, 체크 박스 등 입력양식의 상태를
  선택할 때 사용하는 선택자이다.

  [기본형]
  - 선택자:checked
  : 체크 상태의 input태그를 선택할때 사용한다.
  - 선택자:focus
  : 포커스 상태(무언가를 입력하거나 클릭할 수 있도록 요소가 활성화 된 상태)
  태그를 선택할때 사용한다.
  - 선택자:enabled
  : 사용가능한(입력 가능한) 상태의 태그를 선택할 때 사용한다.
  - 선택자:disabled
  : 사용불가능한 상태의 태그를 선택할 때 사용한다.

8. 시작문자 선택자

• 시작문자 선택자는 태그 내부의 첫 글자나 첫 문자를 선택하는 선택자이다.

  [기본형]
  - 선택자::first-letter
  : 첫 번째 글자를 선택한다.
  - 선택자::first-line
  : 첫 번째 문장을 선택한다.

9. 가상요소 선택자★

• html코드에는 존재하지 않는 구조요소를 만들어 스타일을 부여하는 선택자이다.

• html문서내에는 보이지 않지만 미리 정의한 위치에 가상의 요소를 넣어 표현할 수 있다.

• 가상요소 선택자로 만들어지는 가상요소들은 inline속성을 갖는다.

  [기본형]
  - 선택자::before
  : 선택자의 앞에 가상요소를 생성한다. 필수 속성으로 content속성을 넣어 표현한다.
  - 선택자::after
  : 선태자의 뒤에 가상요소를 생성한다. 필수 속성으로 content속성을 넣어 표현한다.

10. 부정 선택자

• 부정 선택자는 선택된 태그 중 제외하고 싶은 태그가 있을 경우 사용한다.

  [기본형]
  선택자:not(제외시킬 요소)
  : 태그를 다중 선택하는데 특정 요소는 제외하고 선택한다.
  클래스와 아이디도 포함해서 제외시킬 수 있다.

11. 구조선택자

• 부모태그안에 자식태그들이 동일한 태그로 구성되어 있을 때
  특정 위치에 있는 자식태그만 선택할 때 사용한다.

  [기본형]
  - 선택자:first-child★
  : 부모태그안에 동일한 태그 형제 중 첫 번째 위치한 태그만 선택한다.(첫째)
  - 선택자:last-child★
  : 부모태그안에 동일한 태그 형제 중 마지막번째에 위치한 태그만 선택한다.(막내)
  - 선택자:nth-child(수열)★
  : 부모태그안에 동일한 태그 형제 중 특정 순번째에 위치한 태그를 선택한다.
  이때 수열 자리에 2를 쓰면 형제 중 두번째 위치에 있는 태그만 선택해준다.
  수열자리에는 배수를 이용하여 특정 순번째에 잇는 태그들을 다중 선택할 수 있는데
  2n을 쓰면 '짝수'라는 뜻이고 2n+1은 '홀수'를 뜻한다.
  만약 3의 배수 위치에 있는 태그들을 선택하고 싶다면 3n이라고 쓴다.
  - 선택자:nth-last-child(수열)
  : 부모태그안에 동일한 태그 형제 중 특정 순번째에 위치한 태그를 선택한다.
  단, last가 붙으면 밑에서 위로 순번을 센다. 마찬가지로 수열자리에는 숫자나

  ---

  :nth-child(수식), :nth-of-type(수식) = :nth-of-type 키워드 동일

• 부모태그안에 형제 태그중 홀수번째나 짝수번째 형제를 선택하고싶다면
  even(짝수), odd(홀수)키워드를 이용하여 선택할 수 있다.

• 또한 여러 요소 중 특정 범위의 자식요소들을 선택하고 싶다면
  'n+숫자' 키워드를 통해 선택할 수 있다.

  [기본형]
  :nth-child(even) : 짝수 번째 위치한 자식요소 선택
  :nth-child(odd) : 홀수 번째 위치한 자식요소 선택
  :nth-child(n+숫자) : 숫자 번째에 위치한 자식부터 막내까지 모두 선택
  :nth-child(-n+숫자) : 숫자 번째에 위치한 자식부터 첫째까지 모두 선택

  12. :is선택자

• 같은 스타일을 여러 요소에 적용할때 사용하는 선택자이다.

• 최근에 발표된 선택자로 같은 스타일을 여러 요소에 적용할때 간편하게
  선언할 수 있다.

  [기본형]
  :is(선택자1, 선택자2, 선택자3...){}

13. :has선택자

• has선택자는 태그안에 특정 태그가 있으면 선택해주는 선택자이다.

  [기본형]
  선택자:has(태그)