CSS Advanced Selectors

Keyword overview

---

null

---

---

The Code Card

---

Combination Selector

https://lshjju.tistory.com/810

Combination Selector

---

Attribute Selectors

https://lshjju.tistory.com/811

Attribute Selectors

---

Pseudo-classes

https://lshjju.tistory.com/812

Pseudo-classes

---

Pseudo-elements

https://lshjju.tistory.com/813

Pseudo-elements

---

CSS Functions

https://lshjju.tistory.com/815

CSS Functions

---

New selectors

https://drafts.csswg.org/selectors/

Selectors Level 4

---

---

Code training

---

---

13-1 연결 선택자

---

---

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

---

---

하위 선택자

하위 선택자를 사용하여 글자색 적용하기
https://github.com/lshjju/doit-hcj-new/blob/main/13/results/descendant.html

---

---

자식 선택자

 

자식 선택자를 사용하여 글자색 적용하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/child.html

---

---

형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자

---

---

인접 형제 선택자

---

인접 형제 요소에 스타일 적용하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/adj.html

---

---

형제 선택자

---

모든 형제 요소의 스타일 지정하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/sibling.html

---

---

실습 - 폼에서 레이블 요소 정렬하기

---

1단계 VS Code 열고 HTML 파일 확인하기

2단계 CSS 파일 수정하기

 

준비
https://github.com/lshjju/doit-hcj-new/blob/main/13/register1.html

https://github.com/lshjju/doit-hcj-new/blob/main/13/css/register1.css

결과

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/register1.html

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/css/register1.css

---

---

13-2 속성 선택자

---

---

특정 속성이 있는 요소를 선택하는 [속성] 선택자

---

요소 중에서 링크가 있는 요소만 스타일 적용하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/attr-1.html

---

---

특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자

---

새 탭으로 열리는 링크에만 아이콘 추가하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/attr-2.html

---

---

여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~=값] 선택자

---

특정 속성값이 포함된 요소에 스타일 적용하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/attr-3.html

---

---

 

특정 속성값이 포함된 속성 요소를 선택하는 [속성 |=값] 선택자

---

title 속성값에 따라 아이콘 다르게 표시하기
https://github.com/lshjju/doit-hcj-new/blob/main/13/results/attr-4.html

---

---

특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]

---

속성값의 시작 부분이 일치하는 요소에 스타일 적용하기
https://github.com/lshjju/doit-hcj-new/blob/main/13/results/attr-5.html

---

---

특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $=값] 선택자

---

파일 확장자에 따라 아이콘 다르게 표시하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/attr-6.html

---

---

일부 속성값이 일치하는 요소를 선택하는 [속성 *=값] 선택자

---

속성값의 일부가 일치하는 요소에 스타일 적용하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/attr-7.html

---

---

실습 - 폼 요소에 스타일 적용하기

---

1단계 속성 선택자로 필수 입력 필드와 읽기 전용 필드의 스타일 지정하기

2단계 입력 필드를 넓게 바꾸기

 

준비

https://github.com/lshjju/doit-hcj-new/blob/main/13/register2.html

https://github.com/lshjju/doit-hcj-new/blob/main/13/css/register2.css

결과

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/register2.html

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/css/register2.css

---

---

13-3 가상 클래스와 가상 요소

---

---

사용자 동작에 반응하는 가상 클래스

---

---

:link (방문 전 링크)

---

:visited (방문 후 링크)

---

:hover (마우스 오버)

---

:active (클릭 중)

---

:focus (포커스 상태)

---

---

가상 클래스 선택자를 사용해 링크 스타일 적용하기
https://github.com/lshjju/doit-hcj-new/blob/main/13/results/navi.html

---

---

요소 상태에 따른 가상 클래스

---

---

:target (현재 활성화된 앵커)

---

:enabled (활성화된 상태)

---

:disabled (비활성화된 상태)

---

:checked (체크된 상태)

---

---

선택된 라디오 버튼의 label 스타일 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/13/results/pclass-2.html

---

---

문서 구조를 사용하는 가상 클래스

---

---

:first-child & :last-child

 

첫번째 자식 요소 선택하기
마지막 자식 요소와 유일 요소 선택하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/pclass-3.html

---

---

:nth-child(n)

 

위치를 사용해 자식 요소 선택하기
위치를 사용해 중간 범위 선택하기
https://github.com/lshjju/doit-hcj-new/blob/main/13/results/pclass-4.html

---

---

:nth-of-type(n)

 

특정 타입 중에서 위치로 선택하기
https://github.com/lshjju/doit-hcj-new/blob/main/13/results/pclass-5.html

---

---

---

---

논리적으로 조합하는 가상 클래스

---

---

:not(선택자) (부정)

not 선택자로 라디오 필드를 제외한 텍스트 필드 선택하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/pclass-6.html

---

---

---

---

실습 - 가상 클래스를 사용해 폼 꾸미기

---

1단계 CSS 파일 수정하기

2단계 마우스 포인터를 올렸을 때 버튼 스타일 바꾸기

3단계 :not 선택자를 사용해서 코드 줄이기

 

준비

https://github.com/lshjju/doit-hcj-new/blob/main/13/register3.html

https://github.com/lshjju/doit-hcj-new/blob/main/13/css/register3.css

결과

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/register3.html

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/css/register3.css

---

---

가상 요소

---

---

첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 ::first-line and ::first-letter  

 

첫번째 글자에 스타일 지정하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/pelement-1.html

---

---

내용 앞뒤에 콘텐츠를 추가하는 ::before and ::after 

가상 요소를 사용해 내용 추가하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/pelement-2.html

---

---

---

---

실습 - 가상 요소를 사용해 배지 표시하기

---

1단계 아이콘 검사하기

2단계 ::after 사용하기

3단계 가상 요소 위치 조절하기

 

준비

https://github.com/lshjju/doit-hcj-new/blob/main/13/badge.html

결과

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/badge.html

---

---

13-4 CSS 함수 살펴보기

---

---

:root 가상 클래스와 var() 함수

---

---

CSS 변수

---

var() 함수

---

---

---

계산식으로 값을 결정하는 calc() 함수

---

calc() 함수로 너비 지정하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/calc.html

---

---

최솟값, 최댓값을 적용하는 min() 함수, max() 함수

---

min() 함수, max() 함수 활용하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/minmax.html

---

---

값의 범위를 제한하는 clamp() 함수

---

clamp() 함수로 범위 지정하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/clamp.html

---

---

다양한 시각 효과를 추가하는 filter 속성과 함수

---

---

blur()

 

blur() 함수로 흐리게 처리하기

https://github.com/lshjju/doit-hcj-new/blob/main/13/results/filter.html

---

---

brightness()

---

contrast()

---

drop-shadow()

---

grayscale()

---

invert()

---

sepia()

---

opacity()

---

hue-rotate()

---

saturate()

---

---

---

---

Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB

---