Html/이론
:active/:hover/:visited/ nth-child
SEOKIHOUSE
2023. 5. 22. 16:38
:active = 사용자가 마우스로 클릭한 태그 선택
:hover = 마우스를 올린 태그 선택
:visited = 해당 링크가 실행된 후의 태그 선택
<!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>
input:enabled {
background-color: aqua;
}
input:disabled {
background-color: blue;
}
/* 반응선택자
:active = 사용자가 마우스로 클릭한 태그 선택
:hover = 마우스를 올린 태그 선택
:visited = 해당 링크가 실행된 후의 태그 선택
*/
input:enabled:active {
background-color: cadetblue;
}
input:disabled:hover {
background-color: blueviolet;
}
a:link {
color: darkblue;
}
a:visited {
color: red;
}
s
#header div h1 {
color: brown;
}
</style>
</head>
<body>
<input type="text" placeholder="아이디 입력">
<input type="password" name="password" placeholder="비밀번호 입력하세요" disabled>
<hr>
<a href="helloworld.html" target="_blank">gg</a>
<div id="header">
<h1>title</h1>
<div>
<h1>title</h1>
</div>
</div>
</body>
</html>2)nth-child - 그 부모의 n번째녀석
/* 홀수 */
li:nth-child(odd) {
background-color: rgb(110, 110, 165);
}
/* 짝수 */
li:nth-child(even) {
background-color: aqua;
}
/* 4번째 */
li:nth-child(4) {
background-color: bisque;
}
</style>
</head>
<body>
<ul>
<li>사과</li>
<li>사과</li>
<li>사과</li>
<li>사과</li>
</ul>
