728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>약관선택</title>
<meta charset="UTF-8">
<style>
/*
visibility : hidden; 보이지 않음
visibility : visible; 보임
*/
a {
color: red;
visibility: hidden; /* 보이지 않음 */
}
input:checked + a {
color: black;
visibility: visible; /* 보임 */
}
/* :checked : 어떤 요소가 체크되었을 때.. */
span~span {
color: red;
}
input:checked + span~span {
visibility : hidden;
}
div {
background-color: black;
color: white;
}
div~div {
visibility : hidden;
}
div:hover + div{
visibility: visible;
}
div.backblack {
background-color: white;
color: black;
}
</style>
</head>
<body>
<!-- <input type="checkbox">
<a>Hi!</a> -->
<input type="checkbox">
<span>이용 약관에 동의합니다.</span>
<br>
<span>이용약관을 읽고 동의해주세요!</span>
<br><br>
<div>이용약관 보기</div>
<div class="backblack">이용약관~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</div>
</body>
</html>
728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| style활용(신호등모양배열) (0) | 2022.12.21 |
|---|---|
| style활용(회원가입+약관선택) (0) | 2022.12.21 |
| style활용(표만들기) (1) | 2022.12.21 |
| 디스플레이 (0) | 2022.12.19 |
| 의사 클래스 (0) | 2022.12.19 |