week 7
7주차
10 CSS 고급 선택자
10-1 연결 선택자
연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정. 선택자를 둘 이상 조합하므로 '조합 선택자'라고도 하고 '콤비네이션 선택자', '콤비네이션 셀렉터' 등으로 부름.
하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자
하위 요소 : 특정 요소를 기준으로 그 안에 포함된 요소
자식 요소 : 현재 요소를 기준으로 바로 한 단계 아래 요소
손자 요소 : 그 자식 요소의 한 단계 아래
하위 선택자 (descendant selector)
부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 함.
즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용.
하위 선택자는 상위 요소와 하위 요소를 공백으로 구분
기본형 상위요소 하위요소
예제 section 요소 안에 포함된 p 요소를 모두 선택하려면 section과 p 사이에 공백 한 칸을 두고 나란히 써줌. 그리고 중괄호 안에 스타일 규칙 작성.
section p { ... }
자식 선택자 (child selector)
하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자
두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분
기본형 부모요소 > 자식요소
예제 section 요소 안에 포함된 p 요소 중 자식 요소만 선택하려면 section과 p 사이에 '>'를 넣음
section > p { ... }
형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자
형제 관계 : 웹 문서에서 부모 요소가 같을 경우
형 요소 : 형제 관계인 요소에서 먼저 나오는 요소
동생 요소 : 나중에 나오는 요소
인접 형제 선택자 (adjacent selector)
형제 요소 중 첫 번째 동생 요소만 선택하는 것
요소1과 요소2는 같은 레벨이면서 요소1 이후 가장 먼저 오는 요소2를 선택
기본형 요소1 + 요소2
예제
h1 + p { color: blue; }h1의 형제인 p 요소 중 첫 번째 p
형제 선택자 (sibling selector)
형제 선택자는 형제 요소의 스타일을 정의하는데 인접 형태 선택자와 달리 모든 형제 요소에 적용
형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 '~' 기호를 표시
기본형 요소1 ~ 요소2
예제
h1 ~ p { color: blue; }h1의 형제인 p 요소 모두 선택
10-2 속성 선택자
태그 안에서 사용하는 속성값에 따라 요소를 선택하는 역할 속성값의 조건에 따라 특정 부분만 선택하기 쉬우므로 상황에 맞는 스타일을 지정하기 쉬움
특정 속성이 있는 요소를 선택하는 [속성] 선택자
속성값에 따라 원하는 요소를 선택 대괄호([ ]) 사이에 원하는 속성 입력
예제
a[href] { ... }a 요소 중에서 href 속성이 있는 요소를 선택
특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자
[속성 = 속성값] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정
예제
a[target = _blank] { ... }a 요소 중에서 target 속성값이 '_blank'인 것만 선택
여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자
[속성 ~= 값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리 !주의! 'button' 값과 정확하게 일치하는 요소를 선택 (flat-button이나 buttons는 안됨)
예제
[class ~= button] { ... }class값 중에 button 스타일이 있는 요소 찾기
특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자
[속성 |= 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용 이 때 속성값은 한 단어로 일치해야 함 [속성 ~= 값]은 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않는다는 점에서 차이
예제
a[title |= us] { ... }title 속성값에 us가 있거나 us-로 연결된 속성값이 있는 a 요소
특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]
속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾으려면 [속성 ^= 값] 선택자를 사용
예제
a[title ^= eng] { ... }title 속성값이 eng로 시작하는 a 요소
특정 속성값으로 끝나는 속성 요소를 선택하는 [속성 $= 값]
예제
[href $= xls] { ... }링크한 파일 이름의 마지막 단어가 xls인 요소
일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값]
속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택
예제
[href *= w3] { ... }href 속성값 중에 'w3'가 포함된 요소
10-3 가상 클래스와 가상 요소
사용자 동작에 반응하는 가상 클래스
사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자 사용
방문하지 않은 링크에 스타일을 적용하는 '
:link가상 클래스 선택자'방문한 링크에 스타일을 적용하는 '
:visited가상 클래스 선택자'특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 '
:hover가상 클래스 선택자'웹 요소를 활성화(클릭)했을 때 스타일을 적용하는 '
:active가상 클래스 선택자'웹 요소에 포커싱(포인터나 입력 커서) 되었을 때 스타일을 적용하는 '
:focus가상 클래스 선택자'
1 ~ 4의 가상 클래스 선택자는 메뉴 링크에서 자주 사용
이 때 정의 순서를 기억해둘 것!
:link :visited :hover :active *LoVe HAte로 외우기
요소 상태에 따른 가상 클래스
웹 사이트나 애플리케이션 화면에서 요소의 상태에 따라 스타일을 적용할 수 있음 이때 가상 클래스 선택자를 사용
앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'
같은 문서 안에서 다른 위치로 이동할 때는 앵커(anchor)를 이용
이 때 :target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있음
요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'
해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용
반대로 사용할 수 없는 상태일 때 스타일을 지정하려면 :disbled 선택자를 사용
선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'
폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked라는 속성이 추가됨.
이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리
예제
#signup input:checked + label { ... }input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일
특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자'
예제
#signup input:not([type=radio]) { ... }텍스트, 전화번호 필드, 라디오 버튼 중 텍스트와 전화번호 필드에 스타일 적용
구조 가상 클래스
웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자
특정 위치의 자식 요소 선택하기
343p 표 10-2 구조 가상 클래스의 선택자 참고
수식을 사용해 위치 지정하기
1, 3, 5번째처럼 위치가 계속 바뀌면 반복된 규칙을 찾아내 an+b처럼 수식을 사용할 수도 있음 (이때 n값은 0부터 시작)
홀수 번째에 스타일을 줄 때는 :nth-child(odd), 짝수 번째에 스타일을 줄 때는 :nth-child(even)을 사용할 수 있음
가상 요소
가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면, 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가 불필요한 태그를 사용하지 않도록 하기 위함 가상 요소는 가상 클래스와 구별하도록 가상 요소 이름 앞에 콜론 2개(::)를 붙여서 표시
자주 사용하는 가상 요소
첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 '
::first-line요소,::first-letter요소'내용 앞뒤에 콘텐츠를 추가하는 '
::before요소,::after요소'
Last updated