선택자4 CSS-선택자(selector)4 : 가상요소 선택자 가상요소 선택자(Structural pseudo-classes) : 요소에 id나 class명을 부여하지 않고도 위치를 찾아 선택 속성 값 설명 :first-letter 요소의 첫 글자 :first-line 요소의 첫 줄 :first-child 같은 요소 중 첫번째 요소 :last-child 같은 요소 중 마지막 요소 :nth-child(n) 같은 요소 중 앞에서 n번째 요소 :nth-last-child(n) 같은 요소 중 뒤에서 n번째 요소 :first-of-type 해당 요소의 부모 요소의 자식 요소 중 첫번째 요소 :last-of-type 해당 요소의 부모 요소의 자식 요소 중 마지막 요소 :nth-of-type(n) 해당 요소의 부모 요소의 자식 요소 중 앞에서 n번째 요소 :nth-last-of.. 2020. 8. 8. CSS-선택자(selector)3 : 가상클래스/UI 요소 상태 선택자 1. 가상클래스 선택자(Pseudo-Class Selector) : 요소의 특정 상태에 따라 스타일을 정의 - 링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes) 속성 값 설명 a:link 사용자가 방문하지 않은 링크일 경우 a:visited 사용자가 해당 링크를 방문하고 돌아왔을 경우 a:hover 링크 문자에 마우스가 닿았을 경우 a:active 링크 문자가 클릭된 상태일 경우 (활성화) a:focus 링크 걸린 글자에 포커스가 생길 경우 This is a link This is a link This is a link This is a link 2. UI 요소 상태 선택자(UI element states pseudo-classes) 속성 .. 2020. 8. 7. CSS-선택자(selector)2 : 속성선택자 선택자(selector) : style을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일 정의 1. 속성 선택자(Attribute Selector) 속성 값 설명 h1[class] class명을 가진 h1 요소 img[alt] alt 속성을 가진 img 요소 p[class="abc"] class명이 유일하게 'abc'인 p 요소 p[class~="abc"] class명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'로 시작하는 p 요소 p[class|="abc"] class명이 'abc'이거나 'abc~로 시작하는 p 요소 p[class^="abc"] class명이 철자'abc'로 시작하는 p 요소 p[class$="abc"] class명이 철자'abc'로 .. 2020. 8. 7. CSS-선택자(selector) 선택자(selector) : style을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일 정의 selector 패턴 설명 전체 셀렉터 * 페이지의 모든 요소 선택 type 셀렉터 태그명 지정된 태그명 요소 선택 ID 셀렉터 #(id명) id를 이용해 요소에 이름을 부여하여 선택 (id명은 중복 X) class 셀렉터 .(class명) class를 이용해 요소에 이름을 부여하여 선택 (class명은 중복 O) 후손(하위) 셀렉터 공백 요소 내부에 있는 모든 해당 요소 선택 (공백) 자식 셀렉터 > 요소 내부에 있는 자식 요소만 선택 (후손 X) 인접 셀렉터 + 현재 요소의 바로 뒤에 나오는 요소만 선택 형제 셀렉터 ~ 현재 요소와 같은 계층(형제)에 있는 요소만 선택 (자식, 후손 .. 2020. 8. 6. 이전 1 다음
