닫기 버튼
<!DOCTYPE html>
<html lang="ko">
<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></title>
<style>
/*-------- default setting --------*/
* {
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
li {
list-style: none;
}
/*-------- popup_icon --------*/
#chk {
display: none;
}
#chk:checked ~ .popup_icon {
display: block;
}
#chk ~ .popup_icon {
display: none;
}
.popup_icon {
width: 300px;
height: 300px;
border: 1px solid black;
/* line-height: 300px;
2줄 이상일 때는 사용할 수 없음.
각각 300px을 줘서 내용이 떨어지게 됨. */
}
.popup_icon .popup_box {
height: 250px;
text-align: center;
line-height: 250px;
}
.popup_icon .chk_lab {
display: block;
width: 300px;
height: 50px;
text-align: right;
/* text-align은 사이즈가 있어야 적용 가능함.
label은 인라인 레벨 요소이기 때문에 사이즈 안먹음.
display 속성 바꿔줘야 함. */
line-height: 50px;
padding-right: 10px;
box-sizing: border-box;
cursor: pointer;
}
</style>
</head>
<body>
<input type="checkbox" id="chk" checked />
<aside class="popup_icon">
<div class="popup_box">popup_icon</div>
<label for="chk" class="chk_lab">X</label>
</aside>
</body>
</html>