til:css

<link rel="stylesheet" type="text/css" href="style.css"/>

class

.important {
color: red;
}

id

#important {
color: red;
}

id > class

attr

a[attr]=a[title] { }
a[href="https://index.org"]{ }
a[href*="index"] { }
a[href$=".org"] { }
a[class~="logo"] { }

attr이라는 이름의 특성을 가진 요소를 선택
attr=value : attr이 value인 요소를 선택
attr|=value : attr이 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D)문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택
attr^=value : attr이 특성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 선택
attr$=value : attr이 특성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 선택
attr*=value : attr이 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 선택

자손

ul li { } 

자식

ul > li { }

인접 형제

ul + div { }

전체 선택 => body

순서 선택

ul li:first-child { }
ul li:nth-chile(n) { }

마우스 오버

.button:hover { }

우선순위

인라인 스타일 > id > class > tag

기본 스타일

div { 
		font-family : "맑은 고딕";
}
 		font-size: ;
        font-weight: ;
        font-style: ;
        text-decoration: ;
        letter-spacing: ;
        text-align: ;
        line-height: ;
        list-style: ;
        opacity: ;

div {
		width: ;
        height: ;
        margin: ;
        padding: ;
        border: ;
        border-radius: ;
        background: ;
        background-color: ;
        background-image: ;
        background-size: ;
        background-position: ;
        background-repeat: ;
        box-shadow: ;
}

레이아웃

div {
		position: static | relative | absolute | fixed ;
        display: inline | block | inline-block ;
}

display : none; 자리를 차지하지 않음
visibility : hidden; , opacity: 0; 자리 차지

grid

div{
		display : grid;
        grid-template-columns: 100px 200px 300px;
        grid-template-rows: 100px 200px 400px;
        gap: 10px;
}