Skills/CSS3, SCSS

220916 contents_chk.html

개발자 윤구나 2022. 9. 16. 09:39

닫기 버튼

 

<!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>