220908 popup.html

Skills/CSS3, SCSS
220908 popup.html

개발자 윤구나 2022. 9. 8. 14:42
<!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>popup</title>
    <style>
      /*-------- default setting --------*/
      * {margin: 0; padding: 0;}
      a {color: black; text-decoration: none;}
      li {list-style: none;}

      /*-------- header --------*/
      .header {
        width: 1032px; height: 200px;
        background-color: #ccc;
        margin: 0 auto;        
      }

      /*-------- popup --------*/
      #chk {display: none;}
      #chk:checked ~ .popup {display: block;}
      #chk ~ .popup {display: none;}
      /* ~ : checkbox와 레벨이 같고 아래에 위치한 태그. 부모가 같아야한다. */

      .popup_box {
        position: absolute;
        top: 100px; left: 300px;
      }
      .popup {
        width: 200px; height: 220px;
        border: 1px solid black;
        padding: 20px;
      }
      .popup label {
        display: block;
        text-align: right;
      }      
    </style>
  </head>
  <body>
    <div class="popup_box">
      <input type="checkbox" id="chk" checked>
      <div class="popup">
        <img src="./images/img01.jpg" alt="팝업 이미지">
        <label for="chk">닫기</label>
      </div>      
    </div>

    <header class="header">
      <h1>Header</h1>
    </header>
  </body>
</html>