1. 기본 선택자

클래스 선택자(.class명)
클래스 선택자는 사용자가 지정한 영역에 서식을 적용하기 위한 선택자로서 한 번 작성된 선택자는 '언제든 다시 사용 할 수 있는 서식'을 적용 할 때 사용한다.
class선택자는 사용자가 이름을 작성하여 적용하는데, 이름을 작성할 때 의미있는 이름으로 작성하여 이름 앞에 '.'기호를 붙여주는 것이 특징이다.(=피그마의 컴포넌트와 같은 기능)

아이디 선택자(#id명)
아이디 선택자는 클래스 선택자와 마찬가지로 지정한 영역에 서식을 적용하기 위한 선택자이다.
클래스 선택자와 다른 점은 서식을 반복해서 사용하지 않고 중복되지 않는 서식을 만들고자 할 때 사용하며,아이디 이름 작성 시 이름 앞에 #'기호를 붙인다.

태그 선택자(tag명)
사용자가 지정한 태그를 문서 안에서 찾아 서식을 적용하기 위한 선택자이다.
서식이 한꺼번에 변경되기 때문에 실제 사용시 원하지 않는 부분까지도 적용되기 때문에 주의해야한다.

2. 그룹 선택자

그룹 선택자란? 선택자(id, class, tag..)를 모아서 한꺼번에 서식을 적용하기 위한 선택자

작성법 A선택자, B선택자, #선택자, .class선택자{속성:값;}

3. 자손, 후손 선택자

html태그는 부모 요소와 자손 요소의 개념으로 작성이 되는데,
부모 요소의 바로 아래 자손 요소를 선택하고자 할 때 '자손선택자',
부모요소의 아래 자손요소를 모두 선택하고자 할 때는 '후손선택자'를 사용한다.

자손선택자 : A선택자 > B선택자
후손선택자 : A선택자 B선택자

4. 링크선택자

link, visited선택자 : href속성을 가진 태그요소(a태그), img태그, 다른 요소의 서식을 적용하기 위한 선택자

선택자 앞에 ' : ' 기호가 들어가는데 이러한 선택자를 '가상클래스'라고 함

link(링크가 걸린 상태), :visited(링크가 걸린 태그요소를 클릭한 적이 있는 경우)

5. 반응선택자

:hover 마우스로 해당하는 요소에 올리면 서식이 적용됨

:active 마우스로 해당하는 요소를 클릭하고 있을 경우 서식 적용

BUTTON01 BUTTON02

6. 구조선택자

구조선택자는 부모와 자식요소 태그 관계에서 자식 요소들을 선택하고자 할 때 사용하는데,
자식요소들 중 첫번째, 마지막, n번째, 짝수/홀수번째를 찾아 서식을 적용하고자 할 때 많이 사용함

구조선택자의 종류1. 일반구조 선택자 2. 형태구조선택자

(1) 일반구조 선택자

부모 요소 안에 같은 태그들의 자식 요소들이 있는 경우 사용

• :first-child - 자식 요소들 중 첫번째를 선택
• :last-child - 자식 요소들 중 마지막을 선택
• :nth-child(n) - 자식 요소들 중 n번째를 선택
• :nth-last-child(n) - 자식 요소들 중 뒤에서 n번째를 선택

(2) 형태구조 선택자

부모요소 안에 각각 다른 태그들의 자식 요소들이 있는 경우 사용

• :first-of-type - 형태가 다른 자식 요소들 중 첫번째를 선택
• :last-of-type - 형태가 다른 자식 요소들 중 마지막을 선택
• :nth-of-type(n) - 형태가 다른 자식 요소들 중 n번째를 선택
• :nth-last-of-type(n) - 형태가 다른 자식 요소들 중 뒤에서 n번째를 선택

7. 동위선택자(+, ~)

동위선택자란 부모요소의 아래 자식요소들의 관계에서 기준을 정하고, 그 기준이 되는 요소의 바로 뒤나 뒤부터 나오는 요소를 모두 선택 또는 뒤에 있는 형제들 중 하나를 선택 하고자 할 때 사용하는 선택자

선택자A + 선택자B : 선택자 A의 바로 뒤에 위치한 선택자B를 선택

선택자A ~ 선택자B : 선택자 A의 뒤에 있는 요소들 중 선택자 B를 선택

1. num1
2. num2
3. num3
4. num4
5. num5

실습예제01_동위선택자를 활용한 아코디언탭

• Question1

  Answer1

• Question2

  Answer2




실습예제02_동위선택자를 활용한 내비게이션 구현

행운 부적

8. 속성선택자

속성선택자는 html 태그요소에 있는 속성(href, src, alt, type, title, ...)을 선택하여 서식을 적용하고자 할 때 사용하는 선택자로서 1.기본속성 2.문자열속성 선택자가 있음

1. 기본속성 선택자

선택자[속성] : 사용자가 선택한 요소 안에 '속성'이 일치하는 요소를 선택한다.

선택자[속성=값] : 사용자가 선택한 요소안에 '속성=값'이 일치하는 요소를 선택. 개별 서식 적용 가능

2. 문자열 속성 선택자 (잘 사용하지 않음)

속성값 안에 있는 '문자열' 값에서 사용자가 찾고자 하는 문자를 선택하여 서식을 적용

• 선택자[속성/(파이프라인)=값] : 특정 값이 포함된 속성을 선택
• 선택자[속성^(써컴플렉스)=값] : 시작하는 단어가 포함된 속성 선택
• 선택자[속성$(달러사인)=값] : 끝나는 단어가 포함된 속성 선택
• 선택자[속성*(아스테리스크)=값] : 문자열 안에서 해당 단어 포함된 속성을 선택
• 선택자[속성~(릴트)=값] : 여러 값들 중 특정 '값'이 포함되어 있을 때 선택

3. 실습예제

이미지 확장자별(jpg, png, gif, bmp)로 테두리 속성을 각각 다르게 넣어서 적용하고, 마우스 오버시 같은 테두리 색상(5px, 노랑색)이 나오게 서식을 적용한다.

• 
• 
• 
• 

9. 상태선택자

입력 양식의 상태를 선택하고자 할 떄 사용하는 선택자이다.

:checked - 양식을 체크한 상태
:focus - 초점이 맞추어진 상태
:enabled - 사용이 가능한 요소를 선택
:disabled - 사용이 불가능한 요소를 선택

'검색양식' ,'id,pw입력방식'을 클릭시 테두리 색상 변경 = focus선택자 사용

로그인 양식 '아이디저장' 체크박스 클릭시 아래 내용 나오거나 숨기기, 본인인증 페이지의 약관동의 클릭시 버튼색 변경 = checked 선택자 사용

로그인 양식

아 이 디 :

패스워드 :

아이디 저장