[CSS] 선택자(selector)

고근호·2023년 9월 8일
post-thumbnail

선택자

클래스 선택자

  • 클래스 선택자(Class Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 클래스의 이름을 활용하되, 그 이름 앞에 마침표(.)를 붙인다.
  • 다음과 같이 작성한다. ("는 없는 것으로 한다.)
    "클래스 이름" {
    "속성" : "속성 값";
    "속성" : "속성 값";
    "속성" : "속성 값";
    }
클래스 선택자
애플
애플 & 바나나
애플 & 바나나 & 코코넛
클래스 선택자 김씨 이씨 박씨

ID 선택자

  • ID 선택자(ID Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 아이디의 이름을 활용하되, 그 이름 앞에 샾(#)을 붙인다.
  • 다음과 같이 작성한다.("는 없는 것으로 한다.)
    "#아이디 이름" {
    "속성" : "속성 값";
    "속성" : "속성 값";
    "속성" : "속성 값";
    }
  • CSS 스타일을 주기 위해 ID를 부여하는 것은 추 후에 ID가 겹칠 가능성을 제공함으로 사용을 자제한다.
ID 선택자
DIVDIV

전체 선택자

  • 전체 선택자(Universal Selector)는 주로 모든 요소를 선택할 때 사용한다.
  • 다음과 같이 작성한다.("는 없는 것으로 한다.)
  • {
    "속성" : "속성 값";
    "속성" : "속성 값";
    "속성" : "속성 값";
    }
전체 선택자 나는 노터치
a도 바뀌고 b도 바뀌고 i도 바뀌고 strong도 바뀌고 u도 바뀌고

그룹 선택자

  • 그룹 선택자(Group Selector)는 동일한 한 개 이상의 CSS 속성들을 여러 선택자에 적용하고자 할 때 사용한다.
  • 다음과 같이 작성한다. 콤마(,)로 구분하여 여러개 나열 가능.("는 없는 것으로 한다.
    "선택자 1", "선택자 2", "선택자 3" {
    "속성" : "속성 값";
    "속성" : "속성 값";
    "속성" : "속성 값";
    }
그룹 선택자 나는 노터치
a도 바뀌고 b도 바뀌고 i는 안 바뀌고 strong은 안 바뀌고 u도 바뀌고
profile
rootgo 매일, 꾸준히 성장하는 사람🌱

0개의 댓글