CSS3 선택자

▶ 선택자

• 문서 내부의 특정 요소를 선택하는 방법
• 해당 요소에 스타일을 적용하거나 기능을 적용할 때 사용
• h1 { color: red; } -> h1 : 선택자, color : 스타일 속성, red : 스타일 값

▶ *(전체 선택자)

• HTML 페이지 내부의 모든 태그를 선택
• html 태그를 포함해 head 태그, title 태그, style 태그까지 선택(body 태그에 있는 것만 선택하는 것X)

▶ 태그 : 특정한 태그를 선택

 

▶ ,(쉼표) : 여러 개의 선택자를 한꺼번에 선택해서 스타일 속성을 적용할 때 사용

 

▶ #아이디 : 아이디 속성을 가지고 있는 태그를 선택

 

▶ .클래스 : 특정한 클래스를 가지고 있는 태그를 선택

• 공백으로 구분해서 여러 클래스를 사용 가능

• 태그 선택자와 클래스 선택자를 함께 사용해 더 정확하게 태그를 선택 가능(class 속성은 중복 가능하기 때문에)

▶ 후손 선택자, 자손 선택자

• 후손 선택자
  • 선택자A 선택자B -> 선택자A의 후손에 위치하는 선택자B를 선택
  • 주의!)
    • #header h1, h2 { color : red; } -> id 속성값이 header인 태그의 후손 위치에 있는 h1 태그와 h2 태그의 color 속성에 red 키워드를 적용
    • #header h1, #header h2 { color : red; } -> id 속성값이 header인 태그의 후손 위치에 있는 h1 태그와 id 속성값이 header인 태그의 후손 위치에 있는 h2 태그의 color 속성에 red 키워드를 적용
• 자손 선택자
  • 선택자A > 선택자B -> 선택자A의 자손에 위치하는 선택자B를 선택
  • #header > h1 { color : red; } -> id 속성값으로 header를 가지는 태그의 자손 위치에 있는 h1태그의 color 속성에 red 키워드를 적용
  • 주의!)
    • table > tbody > tr> th -> table 태그 아래의 tr태그 아래의 th 태그에 color 속성을 지정하고 싶을 때 이렇게 사용해야함!(tbody를 빼면 안됨!!)

▶ 반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자

• :hover -> 사용자가 마우스를 올린 태그를 선택
• :active -> 사용자가 마우스로 클릭한 태그를 선택

▶ 상태 선택자(★)

• 입력 양식의 상태를 선택할 때 사용하는 선택자
• 웹 페이지 하나당 하나의 input 태그에만 초점을 맞출 수 있음
• 상태 선택자 종류
  • :checked : 체크 상태의 input 태그를 선택
  • :focus : 초점이 맞추어진 input 태그를 선택
  • :enabled : 사용 가능한 input 태그를 선택
  • :disabled : 사용 불가능한 input 태그를 선택

• 상태 선택자와 동위 선택자의 복합 활용(★★)

상단에 있는 checkbox를 클릭하면 아래와 같이 div 전체가 사라짐

▶ 구조 선택자

• 일반 구조 선택자 : 특정한 위치에 있는 태그를 선택하는 선택자
  • :first-child -> 형제 관계 중에서 첫 번째에 위치하는 태그를 선택
  • :last-child -> 형제 관계 중에서 마지막에 위치하는 태그를 선택
  • :nth-child(수열) -> 형제 관계 중에서 앞에서 수열 번째에 태그를 선택
  • :nth-last-child(수열) -> 형제 관계 중에서 뒤에서 수열 번째에 태그를 선택

▶ margin과 padding의 차이

▶ 반응 문자 선택자 : 사용자가 문자와 반응해서 생기는 영역을 선택하는 선택자

• ::selection -> 사용자가 드래그한 글자를 선택