📌 반응 선택자
✅ :hover --> 마우스를 올리면~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px; background-color: red;
/* 언제나 가운데 정렬 */
margin:0 auto;
}
ul > li{
font-size:20px;
font-weight:bold;
color:orange;
}
/* 반응 선택자 --> 마우스 올리면 */
li:hover{
color:blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
</body>
</html>
📌 상태 선택자
✅ ex) input:focus / input:enabled / input:disabled
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 상태선택자 */
input:focus{ border: 2px solid #ff8080; padding:10px;}
input:enabled{ color:orange; font-weight: bold;}
input:disabled{ color:green;}
</style>
</head>
<body>
<form>
이름: <input type="text" name="uname"><br>
아이디: <input type="text" name="uid"><br>
비밀번호: <input type="password" name="upwd" value="12345" disabled="disabled"><br>
</form>
</body>
</html>
📌 구조 선택자
✅ ex) ul li:nth-child(2n+1) / ul li:first-child / ul li:last-child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#content{
width:300px;
}
ul li{ list-style: none; border:1px solid #cccc;
padding: 10px; background-color: #efefef; font-weight:bold;
font-size:20px;
}
/* 구조 선택자 */
ul li:nth-child(2n+1){ background-color: #ff8080;}
ul li:first-child, ul li:last-child{ background-color: yellow;}
ul li:first-child{ border-radius: 10px 10px 0 0;}
ul li:last-child{border-radius: 0 0 10px 10px;}
</style>
</head>
<body>
<div id="content">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
<li>menu7</li>
</ul>
</div>
</body>
</html>
👌 레이아웃 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#header, #content, #footer {
width:1000px;
margin:0 auto;
overflow:hidden;
}
#header .left_space , #content .left_space, #footer .left_space{
width:150px; height:150px;
float:left;
border:1px solid #c0c0c0;
background-color: lightgray;
}
#header .center_space, #content .center_space ,#footer .center_space{
width:694px; height:150px;
float: left;
border:1px solid #c0c0c0;
background-color: lightgray;
}
#header .right_space, #content .right_space, #footer .right_space{
width:150px; height:150px;
float:left;
border:1px solid #c0c0c0;
background-color: lightgray;
}
#header .left_space, #footer .right_space{
border-radius: 30px 0;
}
#header .right_space , #footer .left_space{
border-radius: 0 30px;
}
#content .left_space{
border-radius: 0 30px 30px 0;
height:300px;
}
#content .right_space{
border-radius: 30px 0 0 30px;
height:300px
}
#header .center_space{ border-radius: 0 0 30px 30px;
}
#content .center_space{
border-radius: 30px;
height:300px;
}
#footer .center_space{
border-radius: 30px 30px 0 0;
}
#content .center_space ul li{
list-style: none;
float:left;
padding:0 40px;
font-weight: bold;
font-size: 20px;
}
#content .hello{
clear:both;
padding:10px;
}
</style>
</head>
<body>
<div id="header">
<div class="left_space"></div>
<div class="center_space"></div>
<div class="right_space"></div>
</div>
<div id="content">
<div class="left_space"></div>
<div class="center_space">
<div>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</div>
<div class="hello">
<h1>hello world!</h1>
<p>i want to go home i want to go homei want to go homei want to go homei want to go homei want to go homei want to go home</p>
</div>
</div>
<div class="right_space"></div>
</div>
<div id="footer">
<div class="left_space"></div>
<div class="center_space"></div>
<div class="right_space"></div>
</div>
</body>
</html>
FE Programmer