[자율학습] 6일차

5.1 기본 선택자 사용하기

5.1.1 전체 선택자

• html에서 사용할 수 있는 모든 요소들을 한 번에 선택자로 지정하는 방법
• • 기호 사용해 표시

형식

*{/*css 코드*/}

5.1.2 태그 선택자

• html 태그명으로 선택자를 지정하는 방법

태그명{/*css 코드*/}

5.1.3 아이디 선택자

• html 태그에서 사용할 수 있는 id 속성값을 이용해 선택자를 지정
• 속성값 앞에는 # 기호를 붙여 구분

#id속성값{/*css 코드*/}

5.1.4 클래스 선택자

• html 태그에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정하는 방법
• 속성값 앞에 .을 붙임

.class속성값{/*css 코드*/}

5.1.5 기본 속성 선택자

• html 태그에서 사용할 수 있는 속성과 값을 사용해 선택자 지정하는 방법

[속성]{/*css 코드*/}
[속성=값]{/*css 코드*/}

5.1.6 문자열 속성 선택자

• 태그가 가진 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정하는 방법
  [속성~=문자열] : 속성값에 문자열이 포함되어 있으면 선택(단어 기준)
  [속성:=문자열] : 속성값이 문자열과 같거나 문자열-으로 시작하면 선택
  [속성^=문자열] : 속성값이 문자열로 시작하면 선택
  [속성$=문자열] : 속성값이 문자열로 끝나면 선택
  [속성*=문자열] : 속성값에 문자열 포함되면 선택(전체 값 기준)

/
/

5.2 조합 선택자 사용하기

5.2.1 그룹 선택자

• 여러 선택자를 하나로 그룹 지을 때 사용
• 선택자와 선택자는 , 기호로 구분

선택자1, 선택자2,... 선택자n{/*css 코드*/}

5.2.2 자식 선택자

• 부모 요소의 하위에 있는 자식 요소에 스타일 적용할 때 사용
• 2개 이상의 선택자 사용
• 선택자와 선택자는 > 기호로 구분

부모 선택자 > 자식 선택자{/*css 코드*/}

5.2.3 하위 선택자

• 선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법
• 2개 이상의 선택자 사용
• 선택자와 선택자는 공백으로 구분

선택자1 선택자2 선택자3 ... {/*css 코드*/}

5.2.4 인접 형제 선택자

• 앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정
• 2개 이상의 선택자 사용
• 선택자와 선택자는 + 기호로 구분

이전 선택자 + 대상 선택자{/*css 코드*/}

5.2.5 일반 형제 선택자

• 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정
• 2개 이상의 선택자 사용
• 선택자와 선택자는 ~ 기호로 구분

이전 선택자 ~ 대상 선택자{/*css 코드*/}

/
/

5.3 가상 요소 선택자 사용하기

• html 문서에 명시적으로 작성된 구성 요소는 아니나, 마치 존재하는 것처럼 취급해 선택하는 선택자 지정 방법
• 앞에 :: 기호를 붙여서 사용, 기준 선택자와 함께 사용

기준 선택자::가상요소 선택자{/*css 코드*/}

::before = 콘텐츠 앞의 공간 선택
::after = 콘텐츠 뒤의 공간 선택

5.4 가상 클래스 선택자 사용하기

기준 선택자::가상요소 선택자{/*css 코드*/}

5.4.1 링크 가상 클래스 선택자

• a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법
  :link = 한 번도 방문하지 않은 링크일 때 선택(주황)
  :visited = 한 번이라도 방문한 적이 있는 링크일 때 선택(초록)

5.4.2 동적 가상 클래스 선택자

• 사용자의 어떤 행동에 따라 동적으로 변하는 상태 이용해 선택자 지정
  :hover = 요소에 마우스 올리면 해당 태그가 선택자로 지정됨
  :active = 요소를 마우스로 클륵하고 있는 동안 해당 태그가 선택자로 지정

5.4.3 입력 요소 가상 클래스 선택자

• 입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법
  :focus = 입력 요소에 커서 활성화되면 선택자로 지정
  :checked = 체크박스 표시되어 있으면 선택자로 지정
  :disabled = 상호작용 요소가 비활성되면 선택자로 지정
  :enabled = 상호작용 요소가 활성화되면 선택자로 지정

5.4.4 구조적 가상 클래스 선택자

• html 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법
  E:first-child : E 요소의 첫 번째 자식 요소를 선택자로 지정
  E:last-child : E 요소의 마지막 자식 요소를 선택자로 지정
  E:nth-child(n) : E 요소가 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택
  E:nth-last-child(n) : E 요소가 부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 E 요소를 선택
  E:nth-of-type(n) : 부모 요소의 자식 요소 중 n번째로 등장하는 E요소 선택
  E:nth-last-of-type(n) : 부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 E요소 선택
  E:first-of-type : 부모 요소의 자식 요소 중 첫 번째로 등장하는 E요소 선택
  E:last-of-type : 부모 요소의 자식 요소 중 마지막으로 등장하는 E요소 선택

/
/

5.5 다양한 선택자 조합하기

div.box{} /*class 속성값이 box인 div 태그*/
section#main /*id 속성값이 main인 section 태그*/

#main.box{} /*id 속성값이 main이고, class 속성값이 box인 요소*/

div:hover button{} /*div 태그에 마우스를 올린 상태일 때, 해당 div 태그 하위에 있는 button 태그 선택*/
div:hover > button{} /*div 태그에 마우스 올린 상태일 때, 해당 div 태그와 자식 관계에 있는 button 태그 선택*/