CSS Selector   CSS 선택자

(2023-12-31)

선택자 , CSS 셀렉터, 가상 선택자, 의사 클래스, 의사 요소, a:link, a:hover, a:visited, a:active, :first-letter, :focus, :first-child, :last-child, :nth-child(n), :after, :before


1. [웹 디자인]  CSS 선택자(selector)HTML 요소 선택용 식별자
     - HTML 요소 태그를 선택 접근하여, 스타일을 지정케함


2. 단순 선택자 (simple selector)

  ㅇ universal selector (모든 요소 선택자)
     -  `*` 기호로 표기, 모든 요소를 한꺼번에 지정 
     - (가장 낮은 우선순위를 갖음)

  ㅇ element selector (특정 요소 선택자)
     -  특정 유형의 요소를 지정하는데에 사용 
        . 例) `a`, `hr`, `div` 등 HTML 태그명 기호를 사용하여 표기

  ㅇ id selector (id 선택자)
     -  `#` 기호를 사용하여 표기, 요소 id를 통해 해당 요소를 지정  (#id명)

  ㅇ class selector (class 선택자)
     -  `.` 기호를 사용하여 표기, 클래스명을 통해 해당 요소를 지정 (.class명)

  ㅇ attribute selector (속성 선택자)
     -  속성자[attr] { } : 단순 속성 선택자
     -  속성자[attr='value'] { } : 지정 속성 선택자
     -  속성자[attr~='value'] { } : 부분 일치 속성 선택자
        . 완전한 단어를 구성할 때 만 선택됨
     -  속성자[attr|='value'] { } : 언어 속성 선택자
        . 주어진 문자열 그대로 포함 또는, 하이픈(-) 붙은 접두어로써 포함될 때 선택됨
     -  속성자[attr^='value'] { } : 시작 일치 속성 선택자
     -  속성자[attr$='value'] { } : 끝 일치 속성 선택자
     -  속성자[attr*='value'] { } : 부분 일치 속성 선택자
     -  [attr] { } : 속성 attr를 갖는 모든 요소들을 선택하는 선택자    

  ㅇ multiple selector (다중 속성 선택자)
     -  속성자[ ][ ] : 여러 개의 속성 선택자를 함께 결합하여 사용

  ※ 우선순위 
     - id 선택자 > 가상 선택자 > 속성 선택자 > class 선택자 > 요소 선택자 (특정요소 > 모든 요소)


3. 그룹 선택자 (group selector)

  ㅇ 여러 요소들을 그룹핑 선택
     -  OR 선택자   : 例) a, hr, div { }
     -  AND 선택자  : 例) a#id { }


4. 결합 선택자 (combinator selector)

  ㅇ descendant selector (하위 선택자)  :  (빈칸)
     -  특정 요소의 하위에 나오는 요소들을 모두 지정할 때 사용            (특정요소명 하위요소명)
        . (모든 자손)  요소명1 요소명2   =>  요소1 하위에 있는 모든 요소2 선택

  ㅇ child selector (직계 선택자)  :  (>)
     -  특정 요소의 직계 하위에 나오는 자식 요소를 지정할 때 사용
        . (바로 직계)  요소명1 > 요소명2  =>  요소1 바로 직속 하위에 있는 요소2 만 선택

  ㅇ 요소 결합 선택자  :  (+, ~)
     -  선택자1 + 선택자2 { } : 이웃 형제 요소 결합 선택자
        . 선택자1 직후 일치하는 형제 요소
     -  선택자1 ~ 선택자2 { } : 범용 형제 요소 결합 선택자
        . 선택자1 뒤 모든 일치하는 형제 요소들


5. 가상 선택자 (pseudo-class selector)         ☞ MDN (Mozilla) : 의사 클래스, 의사 요소 참조

  ㅇ `: (의사 요소)` 또는 `:: (의사 클래스)` 기호를 사용하여, 
     - 선택자에 의한 요소 선택 그 이상으로, 더 정밀한 선택 후에,
     - 그곳에 다양한 스타일을 입히기(지정하기) 위함
        . 주로, 단독으로 사용 않고, 특정 요소 선택자와 함께 사용됨
        . (의사 클래스) 주로, 선택자로 선택된 요소가 특정 상황일 때 (:)
        . (의사 요소) 주로, 그 일부분을 선택할 때 (::)

  ㅇ 링크에 대한 가상 선택자 (의사 클래스)
     -  a:link         : 사용된 적이 없는 링크를 선택할 때
     -  a:hover        : 링크 위에 마우스가 올라갈 때
     -  a:visited      : 이미 방문한 적이 있는 링크일 때
     -  a:active       : 링크를 막 클릭한 순간일 때

  ㅇ 포커스(강조) 피드백 효과를 위한 가상 선택자 (마우스 클릭 등에 의해 유발됨) (의사 클래스)
     -  :focus        : 현재 포커스를 갖고 있으면

  ㅇ 형제 요소 선택을 위한 가상 선택자 (의사 클래스)
     -  :first-child  : 형제 요소 중 첫번째 요소를 선택
     -  :last-child   : 형제 요소 중 마지막 요소를 선택
     -  :nth-child(n) : 형제 요소 중 n번째 요소를 선택 (이때, n의 순서는 0부터 시작)
        . 例) :nth-child(n+4)) => 4번째 이후의 요소

  ㅇ 단락 내 특정 요소의 강조를 위한 가상 선택자 (의사 요소)
     -  :first-letter : 첫 글자 만 선택
     -  :first-line   : 첫 줄 만 선택

  ㅇ 지정된 요소의 앞,뒤에 콘텐츠를 삽입하기 위한 가상 선택자 (주로,콘텐츠 생성용) (의사 요소)
     -  :after        : 지정 요소 내 맨끝에 위치한 공간에 삽입
        . 선택한 요소의 맨 마지막 자식으로써 의사 요소(가상 요소)를 하나 생성
        . 例) p:after { content:" " url(/icons/globe.gif); }
     -  :before       : 지정 요소 내 맨앞에 위치한 공간에 삽입
        . 선택한 요소의 맨 처음 자식으로써 의사 요소(가상 요소)를 하나 생성
        . 例) p:before { content:"p 요소 앞에 이곳 문자들이 생성 삽입됨"; ... }

  ㅇ 해당 요소를 제외하는 선택자
     -  :not(요소)  : 해당 요소 제외(not)
        . 例) :not(:nth-child(3n+3)) => 3의 배수 이외의 요소에 지정 (1,2,5번째 등)

CSS 구문 (선택자,속성,단위)
   1. CSS 선택자   2. CSS 속성   3. CSS 속성값 (단위,지정방식)  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"