Day 25

dokiru·2023년 3월 7일

학원

목록 보기

18/51

가상 요소 선택자 (before와 after)

실제로 존재하는 요소는 아니지만 존재한다고 가정

형식

// 기준 선택자 요소의 앞
기준 선택자::before{} 

// 기준 선택자 요소의 뒤
기준 선택자::after{}

가상 클래스 선택자

링크 가상 클래스 선택자 : link(링크를 한번도 방문한 적 없는 상태), visited(링크를 한 번 이상 방문한 적 있는 상태)
동적 가상 클래스 선택자 : hover(마우스를 올린 상태), active(마우스로 클릭한 상태)
입력 요소 가상 클래스 선택자 : focus(커서 활성화), checked, disabled(비활성화), enabled(활성화)

구조적 가상 클래스 선택자

종류	설명
:first-child	첫번째 자식 태그
:last-child	마지막 자식 태그
:nth-child(n)	n번째 자식 태그
:nth-last-child(n)	끝에서 n번째 자식태그, 모든 자식 요소들을 카운팅에 다 포함해서 n번째
:nth-of-type(n)	n번째 특정 자식 태그, n번째 형제 => 해당하는 자식 태그 요소에서의 순서를 찾음
:nth-last-of-type(n)	끝에서 n번째 특정 자식 태그, 끝에서 n번째 형제
:first-of-type	부모의 첫번째 특정 자식 태그, 특정 타입 엘리먼트에 대해서만 카운팅
:last-of-type	부모의 마지막 특정 자식 태그, 특정 타입 엘리먼트에 대해서만 카운팅

ex.

<div class="table">
	<plate />
	<bento /> // 얘를 선택하려면 -> 밑에서 부터 세번째 자식
	<plate> // 두번째 자식
		<orange />
		<orange />
		<orange />
	</plate>
	<bento /> // 첫번째 자식
</div>

bento:nth-last-child(3)

/* 
li:nth-of-type(even) {
     color: red;
} 
        
    2n : 짝수
    2n+1 : 홀수
    even : 짝수
    odd : 홀수
    * n은 0부터 시작
*/

css 적용 우선순위

inline > 내부 스타일 > 외부 스타일 > import
id > 클래스 > 계층 > 태그 > * (더 좁은 범위로 갈수록 강력)

절대 단위와 상대 단위

절대 단위 : px
상대 단위 : %, rem(html태그의 텍스트 크기에 상대적인 크기), em(부모 요소의 텍스트 크기에 상대적인 크기), vw, vh
em / rem 사용시 주의 : 부모 자식의 구조가 깊을 경우 지정한 em 단위가 커질 수 있다. 관계없이 값을 지정하고 싶을 땐 rem을 사용 rem..으로 기준잡으면 최상단의 html 사이즈만 바꾸면 다 적용
chrome 기준 rem의 default px은 16