반응형
1. 가상 요소 선택자
ABC::before - 선택자 abc 요소의 내부 앞에 내용(content)을 삽입
ABC::after - 선택자 abc 요소의 내부 뒤에 내용(content)을 삽입
2. 속성 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="EARTH" />
<input TYPE="password" value="0629"/>
<input type="text" value="ABCD" disabled/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[disabled] {
color: red;
}
</style>
</head>
<body>
<input type="text" value="EARTH" />
<input TYPE="password" value="0629"/>
<input type="text" value="ABCD" disabled/>
</body>
</html>
3. gmail 처음에는 div태그로 만들었음. 유지보수 쉽지 않았음.
4. ! important는 가장 우선순위임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div { color:red !important;}
</style>
</head>
<body>
<div id="color_yellow" class="color_green"
style="color: orange;">
Hello Seoul!
</div>
</body>
</html>순서
!important
인라인 선언
ID 선택자
Class 선택자
태그 선택자
전체 선택자
점수 계산은 왜 하는거지?
반응형
