13-1 연결 선택자
13-2 속성 선택자
13-3 가상 클래스와 가상 요소
13-4 CSS 함수 살펴보기
13-1 연결 선택자
하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자
하위 선택자(자손 선택자)
- 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택
- 하위 선택자는 상위요소와 하위요소를 공백으로 구분함
- 기본형
상위요소 하위요소 - 예)
section p { ... }
자식 선택자
- 하위 선택자와 다르게 자식 요소에만 스타일을 적용
- 기본형
부모요소 > 자식요소 - 예)
section > p { ... }
형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자
- 형제 관계: 부모 요소가 같을 경우
- 형 요소: 형제 관계인 요소에서 먼저 나오는 요소
- 동생 요소: 형제 관계인 요소에서 나중에 나오는 요소
인접 형제 선택자
- 형제 요소 중에서 첫 번째 동생 요소만 선택하는 것
- 기본형:
요소1 + 요소2
형제 선택자
- 형제 요소의 스타일을 정의하는데 모든 형제 요소에 적용됨
- 기본형
요소1 ~ 요소2 - 예)
h1 ~ p { color: blue; }
[실습]
1단계
2단계
13-2 속성 선택자
특정 속성이 있는 요소를 선택하는 [속성] 선택자
- HTML 태그를 작성할 때 여러 가지 속성값에 따라 원하는 요소를 선택할 수 있음
a[href] { ... }
특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자
- 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용
a[target = _blank] { ... }
여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자
- 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택
- 이 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는데 편리함
- 예)
[class ~= button] { ... }
특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자
- 특정 속성값이 포함된 속성에 스타일을 적용해야 함
- 속성값은 한 단어로 일치해야 함
- 하이픈(-)으로 연결된 단어도 선택함
- 예)
a[title |= us] { ... }
특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]
- 속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾을 수 있음
- 예)
a[tit1e ^= eng] { ...... }
특정한 값오로 끝나는 속성외 요소를 선택하는 [속성 $= 값] 선택자
- 지정한 속성값으로 끝나는 요소를 선택함
- 예)
[href $= xls] { ...... }
일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자
- 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요
소를 선택함 - 예)
[href *= w3 ] { ...... }
[실습]
1단계
2단계
13-3 가상 클래스와 가상 요소
사용자 동작에 반응하는 가상 클래스
1. 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'
- 사용자가 아직 방문하지 않은 링크에 스타일을 적용 -> 기본적으로 파란색 글자와 밑줄로 표시
- 링크의 밑줄을 없애거나 색상을 바꾸려면 :link 선택자 사용
2. 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자'
- 사용자가 링크 중에서 한 번 이상 방문한 링크에 스타일 적용 -> 보라색이 기본값
- 방문한 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해 조절
3. 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ':hover 가상클래스 선택자'
- 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용
- 이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌거나, 메인 메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있음
4. 웹 요소를 활성화했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'
- 클릭했을 때 스타일 지정
5. 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'
- 웹 요소에 초점이 맞추어졌을 때 스타일을 적용
1) :link 2) :visited 3) :hover 4) :active 순서대로 정의해야 함
요소 상태에 따른 가상 클래스
앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'
- 같은 문서 안에서 다른 위치로 이동할 때 앵커 이용
- 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용
요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'
- :enabled 선택자: 해당 요소가 사용할 수 있는 상태일 때 스타일 지정
- :disabled 선택자: 사용자가 입력할 수 없도록 스타일 지정
선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'
- checked 속성이 있는 요소의 스타일을 지정
문서 구조를 사용하는 가상 클래스
- 여러 항목이 나열된 웹 문서에서 항목마다 클래스나 id를 지정해 놓고 클래스 선택자나 id 선택자를 사용할 수도 있음
- 많은 항목 중 일부만 스타일을 적용하는 경우 위치를 사용해 항목 선택
:first-child, :last-child, :only-child
- 첫번째 요소, 마지막 요소, 유일한 요소일 때 선택
- 태그를 사용할수도 있고 클래스 이름이나 id 이름을 쓸 수도 있음
:nth-child 클래스
- 자식 요소가 여러 개이고 그중에서 특정한 위치의 요소를 선택할 때 사용
- 일정한 반복 패턴이 있는 여러 자식 요소를 한 번에 선택할 수도 있음
- 특정 위치부터 끝까지 혹은 처음부터 특정 위치까지 한번에 선택할 수도 있음
:nth-of-type 클래스
- 같은 타입의 요소들 사이에서 순서를 지정
- 부모 요소 안에 여러 태그를 사용했을 때 태그를 기준으로 원하는 요소를 찾을 수 있음
논리적으로 조합하는 가상 클래스
특정 요소를 제외하고 스타일을 적용하는 ‘:not 가상 클래스 선택자’
- :not 선택자는 '괄호안에 있는 요소를 제외한'이라는 것을 의미함
같은 스타일을 여러 요소에 적용하는 :is 가상 클래스
- :is 클래스는 복잡한 선택자를 간단하게 바꿔줌
- 스타일을 여러 요소에 적용할 때 :is 가상 선택자로 묶어서 표현할 수 있음
:has 가상클래스
- 기본형:
A:has(B)
가상 요소
- 문서의 특정 부분에 가상으로 요소를 만들어 추가
- 실제 내용에는 영향을 주지 않으면서 눈에 띄게 꾸며 줄 때 사용
- 태그 사용하지 않고 필요할 때마다 만들어서 사용
- 콜론 2개(::)를 붙여서 표시
첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 ::first-line 요소와 ::first-letter 요소
- ::first-line 요소와 ::first-letter 요소를 사용하면 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있음
- ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데,
이때 첫 번째 글자는 반드시 첫 번째 줄에 있어야 함
내용 앞뒤에 콘텐츠를 추가하는 ::before 요소와 ::after 요소
- 새로운 요소를 추가하지 않고도 선택한 요소의 앞이나 뒤에 내용이나 스타일을 넣을 수 있음
- ::before는 선택한 요소의 앞에 가상요소 추가
- ::after는 선택한 요소의 뒤에 가상요소를 추가
- ::before와 ::after를 사용할 때는 항상 content 속성을 사용해야 함
- 실제 내용 없이 스타일만 지정할 경우에도 content를 사용
13-4 CSS 함수 살펴보기
:root 가상 클래스와 var() 함수
- :root 가상클래스는 문서의 최상위 요소를 선택함
CSS 변수
- 변수란 필요할 때마다 값을 바꿔서 사용할 수 있도록 이름을 붙인 것
- css 변수 이름 앞에는 하이픈(-) 2개를 붙여야 함
- 대소문자 구별하고, 하이픈(-), 밑줄(_) 포함 가능, 공백 불가능
- :root 클래스에서 변수 형태로 색상을 지정하면 css에 있는 선택자에서는 변수 이름만 가져다 사용하면 편리함 -> 변수 이름을 사용할 때 필요한 함수 var()
var() 함수
- 사용자가 미리 만들어 놓은 css 변수의 값을 가져올 때 사용
- 괄호 안에 변수 이름을 넣으면 됨
계산식으로 값을 결정하는 calc() 함수
- calc() 함수는 계산식을 사용해서 속성값 사용
- 괄호 안에는 크깃값이나 각도, 시간, 백분율, 숫자 등 다양한 단위의 값을 사용한 계산식이 들어감
- 기본형
clac(계산식)
최솟값, 최댓값을 적용하는 min() 함수, max() 함수
- 최댓값이나 최솟값을 찾는 함수
값의 범위를 제한하는 clamp() 함수
- 특정 값의 범위를 '고정'하거나 '제한'하는 역할을 함
- 최솟값과 최적값, 최댓값, 이렇게 3가지 매개변수를 사용함
- 3가지 매개변수를 지정하면 화면 크기에 따라 값을 바꿀 수 있음
- 최솟값보다 작아질 수 없고 최댓값보다 커질 수 없음
- 기본형
clamp(최솟값, 최적값, 최댓값)
다양한 시각 효과를 추가하는 filter 속성과 함수
- CSS 코드만으로 여러 시각 효과를 추가할 수 있음
- 기본형
filter: 함수
blur()
- 선택한 이미지에 블러(흐림)효과를 적용함
- 매개변수는 흐림의 정도를 지정하는 값으로 픽셀 단위를 사용함
- 기본형
filter: blur(흐림 정도)
brightness() 함수
- 선택한 이미지를 좀 더 밝게 표시함
- 매개변수는 밝기 정도를 나타내는 백분율이나 숫자를 사용함
- 기본형
filter: brightness(밝기 정도)- brightness(0%) 또는 brightness(0) : 완전히 검은색으로 바꿈
- brightness(100%) 또는 brightness(1) : 아무 변화가 없음
- brightness(200%) 또는 brightness(2) : 밝기를 배로 증가시킴
contrast() 함수
- 요소의 대비를 조절함
- 매개변수는 대비 정도를 나타내는 백분율을 사용함
- 기본형
filter: contrast(대비 정도)- contrast(0%): 대비가 전혀 없어서 회색으로 표시됨
- contrast(100%): 아무 변화가 없음
- contrast(200%): 대비를 배로 증가시켜 색상 차이를 뚜렷하게 함
drop-shadow() 함수
- 이미지의 윤곽을 따라 그림자를 적용함
- 기본형
filter: drop-shadow(가로 오프셋, 세로 오프셋, 흐림 정도, 번짐 정도, 그림자 색)
grayscale() 함수
- 이미지를 회색조로 변경해서 표시함
- 매개변수는 0%와 100% 사이의 회색조 값
- grayscale(0%): 아무 변화가 없음
- grayscale(100%): 완전히 회색조로 표현
invert() 함수
- 이미지의 색상을 반전시킴
- 매개변수는 0%와 100% 사이의 반전 정도 지정
- 기본형
filter: invert(반전 정도)- invert(0%): 아무 변화가 없음
- invert(100%): 이미지의 모든 색상이 반전됨
sepia() 함수
- 이미지를 세피아톤으로 변경해서 표시함
- 매개변수는 0%와 100% 사이의 세피아 값을 조절
- 기본형
filter: sepia(세피아 강도)
opacity() 함수
- 이미지의 투명도 조절
- 매개변수는 0%에서 100% 사이의 투명도 값으로 표시
- 기본형
filter: opacity(불투명도)
hue-rotate() 함수
- HSL은 색상, 채도, 명도의 3가지 요소로 색상 표현
- 색상은 색상환의 각도로 특정 색상을 나타냄
- 기본형
filter: hue-rotate(각도)
saturate() 함수
- 이미지의 채도를 변경
- 색상의 채도를 백분율로 지정함
- 기본형
filter: saturate(채도)- saturate(0%): 이미지의 색상이 완전히 무채색이 되어 회색조로 바뀜
- saturate(100%): 아무 변화가 없음
- saturate(200%): 색상 채도가 배가 됨
