Chap 1. 연결 선택자
하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기
하위선택자는 부모 요소에 포함된 하위 요소 모두 스타일이 적용되는 것으로
자손 선택자라고도 한다. 즉. 자식 요소뿐만 아니라 손자,손자의 손자요소 등
모든 하위 요소까지 적용된다.
지정한 모든하위 요소에 스타일을 적용 할 경우 상위요소와 하위요소 사이를 띄어쓰기로 구분해야 된다.
div p {
color : blue;
}- div 태그 부모 요소 안에 있는 p 태그 ❗️
모든 자식 요소를 파란 글자색으로 적용
자식 선택자 - 직속 자식 요소에만 스타일 적용하기
ul > li{
list-style: none
}이는 공백을 넣은 것과 비슷하지만, 두 태그 사이에 다른 태그가 없는 순수 부모-자식 태그간의 관계만 적용된다.
하위 요소 전체에 스타일을 적용하는 것이 아니라 바로 아래 요소, 즉 ❗️직속 자식 요소에만 스타일이 적용된다.
div > p {
color : blue;
}- div 요소안에 포함 된 자식p 요소에만 파란 글자색으로 적용
인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용하기
같은 부모 요소를 가지는 요소들을 형제관계라고 부르고 형제 관계인 요소들에서 먼저 나오는 요소를 '형 요소', 나중에 나오는 요소를 '동생 요소' 라고 한다.
인접 형제 선택자는 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용된다.
이 선택자를 정의할 때는 요소 1과 요소 2 사이에 '+'를 표시한다.
h1 + p {
text-decoration: underline;
}- h1 태그 다음에 오는 p 태그들 중 첫 번째 p태그만 밑줄 적용
형제 선택자 - 형제 요소에 스타일 적용하기
형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 ~(틸드)를 표시한다.
h1 ~ p {
text-decoration: underline;
}- h1 태그 다음에 오는 모든 형제 p 태그에 밑줄 적용
Chap2. 속성 선택자
속성 선택자는 선택자 속성으로 특정 속성을 가진 요소들을 선택한다.
p[title] {
color: red;
}title 속성을 가진 <p>태그 모든 요소의 스타일을 빨간색으로 적용한다. 선택자[속성=값]으로 특정 속성이 특정 값인 요소들을 선택한다.
- 문서 내에서, for="input-text"인
label을 찾으려면?
document.querySelector('label[for="input-text"]')
이렇게 찾을 수 있다.
p[title=korea] {
color: red;
}title 속성의 값이 korea인 <p> 태그 모든 요소의 스타일을 빨간색으로 적용한다.
선택자[속성~=문자열] :
해당 속성의 값에 해당 문자열이 완전한 단어로 포함된 선택자의 요소들을 선택한다.
선택자[속성|=문자열] :
해당 속성의 값이 해당 문자열이거나 그 뒤에 하이픈(-)이 붙는 것으로 시작하는 선택자의 요소들을 선택한다.
선택자[속성*=문자열] :
해당 속성의 값에 해당 문자열이 포함되어 있는 선택자의 요소들을 선택한다.
선택자[속성^=문자열] :
해당 속성의 값이 해당 문자열로 시작하는 선택자의 요소를 선택한다.
선택자[속성$=문자열] :
해당 속성의 값이 해당 문자열로 끝나는 선택자의 요소를 선택한다.
Chap3. 가상 클래스와 가상 요소
3-1. 사용자 동작에 반응하는 가상 클래스
:link
: 방문하지 않은 링크에 스타일 적용
텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시되는데 링크의 밑줄을 없애거나 색상을 바꾸려고 할 때 :link 선택자를 사용한다.
:visited
: 방문한 링크에 스타일 적용
방문한 텍스트 링크는 기본적으로 자주색으로 표시되는데 사용자가 방문했던 링크도 일반 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해 조절한다.
:hover
: 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
이미지 위로 마우스 커서를 올려놓으면 다른 이미지로 바뀌었다가 마우스 커서를 치우면 원래 이미지로 돌아오는 롤오버 효과(rollover)를 만들 수있다.
:active
: 요소를 활성화했을 때의 스타일 적용
링크를 클릭했을 때 스타일을 적용한다.
:focus
: 요소에 초점이 맞추어졌을 때의 스타일 적용
input 태그 안에 입력하기 위해 텍스트 필드안에 마우스 커서를 갖다 놓거나 버튼을 클릭했을 때, Tab키를 눌러 초점(focus)을 이동했을 때의 스타일을 지정한다.
가상 선택자를 링크와 관련해 사용할 때는 선택자 순서에 주의해야 한다. 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않는다.
:link
:visited
:hover
:focus
:active
- 가상 클래스에도 querySelectorAll을 사용할 수 있다!
querySelectorAll에는 :hover나 :active 같은 CSS 선택자의 가상 클래스(pseudo-class)도 사용할 수 있다. document.querySelectorAll(':hover')을 사용하면
마우스 포인터가 위에 있는(hover 상태인) 요소 모두를 담은 컬렉션이 반환된다.
3-2. UI 요소 상태에 따른 가상 클래스
ui요소의 상태에 따른 가상 클래스는 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 사용한다.
:enabled 와 :disabled
: 요소를 사용할 수 있을 때와 없을 때의 스타일 지정
:enabled
:해당 요소가 사용 가능한 상태일 때의 스타일을 지정할 때 사용한다.
:disabled
:해당 요소가 사용 불가능한 상태일 때의 스타일을 지정할 때 사용한다.
:checked
: 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정
3-3. 구조 가상 클래스
웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상클래스 선택자다.
:root
: 문서 전체에 적용하기
문서 안의 루트 요소에 스타일을 적용한다. HTML 문서에서는 루트 요소가 HTML이므로 HTML 요소에 스타일이 적용된다. 전체적으로 문서 안에 똑같이 적용할 스타일이 있는 경우, :root 선택자를 이용해 지정한다.
:nth-child(n)와 :nth-last-child(n)
: 자식 요소의 위치에 따라 스타일 적용하기
class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지를 따져 스타일을 적용할 때 사용한다. 주로 메뉴 항목이든 원하는 위치에 따라 요소를 찾아 스타일을 지정할 때 이 선택자를 많이 사용한다.
:nth-child(n) - 앞에서부터 n번째 자식 요소에 스타일을 적용
:nth-last-child(n) - 끝에서부터 n번째 자식 요소에 스타일을 적용
이렇게 위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모 요소를 갖고 있어야만 한다. 즉, 문서 구조로 표시했을 때 모두 같은 레벨의 요소여야 한다.
div p:nth-child(3)
- div 요소 안에서 세번째 자식 요소인 p 요소에 스타일 적용
div p:nth-child(odd), div p:nth-child(2n+1)
- div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용
div p:nth-child(even), div p:nth-child(2n+0), div p:nth-child(2n)
-
div 요소 안에서 짝수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용
적용 우선순위
CSS 스타일은 중복되어 적용될 수 있는데
기본적으로 나중에 적용되는 값이 이전에 적용된 값을 바꾼다.
하지만, 그보다 우선되는 아래의 우선순위에 따라 다르다.
- 선택자의 속성값 뒤에 !important가 붙은 스타일
- HTML 태그에서 style 속성에 직접 지정한 스타일
- 아이디 선택자 #ID로 지정한 속성값 스타일
- 클래스 선택자 .CLASS로 지정한 속성값 스타일
- 태그 선택자로 지정한 속성값 스타일
- 상위 요소에 지정된 속성값에 의해 상속된 스타일
- 브라우저 기본 속성 스타일 (브라우저별/버전별로 약간의 차이가 있음)
- 우선순위가 같다면 개수가 많은 스타일이 우선순위가 높다.
중복으로 적용되거나 우선순위가 낮은 경우
원하는 스타일을 적용하기 위해 속성의 값 뒤에 !important를 붙여주면 된다.
