CSS
- Cascading style sheet
- Cascade : 작은 폭포, 종속, 연속 ⇒ 지정된 스타일이 없다면 다음 우선순위로 지정되어 있는 sheet로 넘어간다는 의미이다.
[우선 순위]
1. author : 우리가 작성하는 스타일 시트
2. user : 사용자가 지정하는 스타일시트 ex) 다크모드
3. browser : 브라우저 상에서 기본적으로 제공하는 스타일 시트
- !important : cascading의 우선순위를 무시하고 '내가 제일 중요한 스타일 이야' 라는 의미를 가지며 가능한 사용하지 않는 것이 좋다.
Selectors (선택자)
- * , Tag , #id , .class , : , [ ]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<h1 id="special">Hello</h1>
<button>button1</button>
<button>button2</button>
<div class="red"></div>
<div class="blue"></div>
<a href="naver.com">Naver</a>
<a href="googlenaver.com">Google</a>
<a>Empty</a>
</body>
</html>
* {
color: green;
}
li {
color:blue;
}
#special {
color: pink;
}
.red {
width: 100px;
height: 100px;
background: yellow;
padding: 100px; /*컨텐츠에 포함됨*/
margin: 20px;
}
button:hover {
color: red;
background: beige;
}
a[href] {
color: purple;
}
a[href^="naver"] {
color: red;
}
