📌속성 선택자
✅ 속성 선택자 : []
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<!-- 속성 선택자 -->
<style>
input{
color:green;
font-size:30px;
font-weight: bold;
}
input[type=text]{
color:orange;
font-size:20px;
width:200px;
}
input[type=tel]{
color:red;
}
</style>
</head>
<body>
<form>
이름: <input type='text'><br>
아이디: <input type='text'><br>
비밀번호: <input type='password'><br>
전화번호: <input type='tel'><br>
</form>
</body>
</html>
📌 후손 및 자손 선택자
✅ 후손 : 내 밑은 죄다
✅ 자손 > : 바로 아래만
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#header,#wrap,#footer{
border:1px solid #cccccc;
width:500px;
}
div li{ font-size:25px;}
div p{background-color: red;}
div>h1{font-weight: bold; color:yellow;}
</style>
</head>
<body>
<div id="header">
<div class="logo">
<h1>LOGO</h1>
</div>
<div class="copy">
<h2>global company</h2>
</div>
</div>
<div id="wrap">
<p>jdkjkdjfdjf</p>
<ul>
<li><p>hiiii</p></li>
<li><h1>hhhhhhhhh</h1></li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
</ul>
</div>
<div id="footer">
<p>bye</p>
</div>
</body>
</html>
📌 동위 선택자
✅ + : 바로 밑
✅ ~ : 전체
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3~div{font-size:10px; color:orange;}
h3+div{font-size: 20px; font-weight: bold;}
#title~div{background-color: yellow;}
</style>
</head>
<body>
<h3 id="title">동위 선택자 (+,~)</h3>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
</body>
</html>
FE Programmer