14_html Style, 선택자

<style>

color	rgb(255, 0, 255) rgba(255, 0, 255, 0.4) hsl(243, 53%, 58%)	font-style	italic
font-size	20px	text-decoration	underline
font-weight	bold / 900	text-align	center
border	width style color 1px solid black	margin	10px auto  (상하 좌우) 10px 0px 10px 0px (12 3 6 9)
border-width		padding	0.5em / 5px
border-style	solid / dashed / dotted	filter	brightness(105%)
border-color		box-sizing	border-box content-box
border-radius	50% / 5px / 0.1em	box-shadow	x y 번짐 퍼짐 색상
outline	none	display	block / inline / inline-block /none
cursor	pointer / grab / progress	opactiy	0.75
(min/max-)width/height	300px	z-index	높을수록 우선순위 높음
transform	translate(-50%, -50%) rotate(45deg)	transition	부드럽게 처리 left 0,2s ease-out
overflow	visible, hidden, scroll, auto	word-break	break-all 칸 넘어가면 줄바꿈

background		background-image	url("./image/search.png")
background-size	폭 높이 cover(큰쪽), contain(작은쪽), auto	background-repeat	no-repeat
background-position	x y (px, %, 키워드(x- left, center, right y - top, bottom, center))	background-color

선택자

태그 선택자		아이디 선택자	#test { }
조건부 선택자	h1:first-child { } h1:last-child { } h1:nth-child(2n) { } h1:hover { } h1:checked { } h1:focus{ }	클래스 선택자	.one { }
속성 선택자	h1:[id="test"] { } [id="test"] { }	연계 선택	div > h1 { } div h1 { } div +a { } div ~a { }

+ : 뒷줄에 있는 하나 / ~ : 같은 level 내 뒷줄 전체 / > : 바로 아래 level에 포함되어있는 태그 / " " : 아래 전체 level에 포함