<link rel="stylesheet" type="text/css" href="style.css"/>
.important {
color: red;
}
#important {
color: red;
}
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 { }
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; 자리 차지
div{
display : grid;
grid-template-columns: 100px 200px 300px;
grid-template-rows: 100px 200px 400px;
gap: 10px;
}