20240812

※문자열 속성 선택자※
~=: 여러 속성값 중 하나라도 일치하면 선택
|=: 앞쪽 단어가 일치하는 요소 선택
^=: 특정값으로 시작하는 요소 선택
$=: 특정값으로 끝나는 요소 선택
=: 특정값을 포함하는 요소 선택
ex)div[class = "2"] == div중 클래스에 2가 들어가는 요소 선택

※일반 구조 선택자※
first-child
last-child
nth-child(수열)
nth-last-child(수열)
ex)p:nth-last-child(2) == 뒤에서 부터 2번째인 p 요소

※형태 구조 선택자※
fist-of-type
last-of-type
nth-of-type(수열)
nth-last-of-type(수열)
ex)p:nth-last-of-type(2n-1) == p중 뒤에서 홀수번째 오는 요소

※부정 선택자※
선택자:not(선택자2)
ex) li:not(:nth-of-type(3n) == li중 3의 배수를 제외한 요소 선택

※기타 선택자※
only-child
only-of-type
empty

※여러 선택자 동시 선택※
선택자1, 선택자2, 선택자3, ... {css 코드;}

※특정 요소 내부에 있는 특정 클래스만 선택하기※
띄어쓰기O
test5-1 .c5{css코드;} / test5-2 > li.c5{css코드;}

※클래스가 여러개인 요소만 선택※
띄어쓰기X
.test6.c6{background-color: red;}

※우선순위※
1순위: css속성: 속성값 !important;
2순위: inline-style 속성 (요소에 직접 작성되는 style속성)
3순위: 아이디 선택자(#아이디 속성명)
4순위: 클래스 선택자(.class 속성명)
5순위: 태그 선택자 (태그명)

※레이아웃※

==요소 배열==
display: block / inline / inline-block / none / flex
visibility : hidden; (투명)

==영역==
content / padding / border / margin
*크기 조정
000-top / bottom / left / right
box-sizing: border-box; / margin: auto;

==위치==
position: relative/absolute/fixed