CSS 선택자

  • 선택자란 HTML 요소의 한 부분을 선택하여 스타일을 바꾸는 등의 작업을 수행할 수 있게 하는 것이다.
  • 선택자의 종류로는 기본 선택자, 복합 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자가 있다. 이들은 섞어서 사용할 수 있다.
  • 선택자는 되도록 자세하고 정확하게 지정해주는 것이 좋다.
  • css 선택자의 문법은 다음과 같다.
  • 위 예시에서 선택자를 어떤 것을 쓰느냐에 따라 글자색이 빨간색이 되는 부분이 달라진다.
  • 속성과 속성값을 지정하여 다양한 스타일을 정의할 수 있다. 속성(Property) 사이는 ;(세미콜론)으로 구분한다.

    • 기본 선택자

  • 전체 선택자 : *
  • 태그 선택자 : 해당 태그의 이름(e.g. p)
  • Class 선택자 : .class(클래스 이름)
  • ID 선택자 : #id(아이디 이름)

    • 복합 선택자

  • 특수한 요소를 호출하고 싶을 때, 기본 선택자만으로는 선택이 불가능한 경우에 사용한다.
  • 복합 선택자는 여러번 중첩하여 쓸 수 있다.
  • 종류에는 일치 선택자, 자식 선택자, 후손 선택자, 인접 형제 선택자, 일반 형제 선택자가 있다.
  • 일치 선택자 (Basic Combinator)
  • 자식 선택자 (Child Combinator)
  • ❗️하위(후손) 선택자 (Descendant Combinator)
  • 인접 형제 선택자 (Adjacent Sibling Combinator)
  • 일반 형제 선택자 (General Sibling Combinator)

    • 가상 클래스 선택자

  • 사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 사용한다.
  • 각 요소의 상황에 따라 사용자가 원하는 요소를 선택할 때 사용한다.
  • 또는 특정 요소를 부정할 때 사용한다.
  • 이는 붙여서 쓰며, 상황을 추가하므로 일치 선택자 문법의 범주에 포함된다.
  • 사용자의 행동에 따라 변화
  • 요소의 상황
  • 부정 선택

    • 가상 요소 선택자

  • 선택된 요소의 앞・뒤에 별도의 Content를 삽입하는 선택자
  • 반드시 content라는 속성을 사용한다.
  • 빈 값(””)이라도 넣어 주어야 적용된다.
  • 종류에는 before과 after이 있다.
  • 이는 실제로는 글자를 넣지 않고 빈 요소를 삽입할 때 많이 사용한다.
  • ABC::before
  • ABC::after

    • 속성 선택자

  • 지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자
  • [ABC]
  • [ABC=”XYZ”]

    • 선택자 우선 순위

  • CSS 참조 방식 우선 순위와는 다른 개념
  • 같은 HTML 요소가 여러 선택자에 의해서 선택되었을 경우 어떤 선택자의 CSS 속성을 우선 적용할지 결정하는 방법이다.
  • 1순위 : 점수가 높은 선택자가 우선!
  • 2순위 : 점수가 같으면, 가장 마지막에 읽힌 선택자가 우선!
  • 우선 순위 점수
  • 예제 (합산해서 산출)

    • 스타일 상속

  • 자식 요소가 별도의 Style 속성이 없을 경우, 부모의 속성 값을 그대로 상속하는 CSS의 특성이다.
  • 상속이 되는 속성과 상속이 안되는 속성으로 구분된다.
  • 상속되는 CSS 속성들은 모두 글자/문자 관련 속성들이다.
  • 자동 상속 되지 않는 속성의 값을 “inherit”을 주어 부모의 CSS 속성값을 그대로 상속하게 하는 강제 상속도 존재한다.

    • [참고] 선택자 연습 게임

    클래스 이름을 이용하여 선택

    [class*="col"] {
    	border: 1px solid black;
    }
  • 위와 같이 작성하면 class 이름에 col이 포함된 모든 요소를 선택한다.