<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS4-Selector</title>
<style>
.box {
width: 50%;
border: 3px solid silver
}
/* 커서 갖다대면 배경색이 변함 */
.box:hover {
background-color: cornflowerblue;
color: white;
}
.box:active {
background-color: crimson;
color: white;
}
/* a tag 설정 */
/* underline 사라짐 */
a {
text-decoration: none;
color: #333333
}
a:hover {
color: #000000;
font-weight: bold;
text-decoration: underline;
}
</style>
<style>
/* 체크하면 체크박스 크기가 커짐 */
/* input[type=checkbox]:checked {
height: 20px;
width: 20px;
} */
input[type=text]:focus {
/* padding: 10px; */
background-color: antiquewhite;
}
</style>
<style>
#view+div {
border: 3px solid #AAAAAA;
display: none;
}
/* 체크했을 때 div 태그 안에 내용 보임 */
#view:checked+div {
display: block;
}
#view {
display:none;
}
label {
border: 1px solid #AAAAAA;
padding: 5px;
background-color: #333333;
color: aliceblue;
}
label:hover {
background-color: aqua;
color: blue;
}
</style>
</head>
<body>
<!-- 설명보기 텍스트 클릭 시 view 속성 적용 -->
<label for="view">설명보기</label>
<input type="checkbox" id="view" >
<div>
<h3>간단한 토글 처리</h3>
<p>체크박스를 이용해서 토글 기능을 구현할 수 있습니다.</p>
</div>
<hr>
<input type="text">
<input type="checkbox" id="chk">
<hr>
<h1 class="box">안녕하세요</h1>
<a href="test.html">회원가입</a>
</body>
</html>
HTML
복사