Skills/CSS3, SCSS

220916 contents_tab01.html

개발자 윤구나 2022. 9. 16. 10:24

결과

 

 

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

      /*-------- notice_box --------*/
      #rad01, #rad02, #rad03 {display: none;}
      #rad01:checked ~ .notice_sheet .sheet01 {display: block;}
      #rad01:checked ~ .notice_sheet .sheet02 {display: none;}
      #rad01:checked ~ .notice_sheet .sheet03 {display: none;}

      #rad02:checked ~ .notice_sheet .sheet01 {display: none;}
      #rad02:checked ~ .notice_sheet .sheet02 {display: block;}
      #rad02:checked ~ .notice_sheet .sheet03 {display: none;}

      #rad03:checked ~ .notice_sheet .sheet01 {display: none;}
      #rad03:checked ~ .notice_sheet .sheet02 {display: none;}
      #rad03:checked ~ .notice_sheet .sheet03 {display: block;}

      .notice_box {
        width: 500px; height: 450px;
        /* background-color: #ccc; */
        margin: 20px 0 0 20px;
      }

      /* #rad01:checked ~ .notice_label .lab01 {
        background-color: yellow;
        color: black;
        font-weight: bold;
      }
      #rad02:checked ~ .notice_label .lab02 {
        background-color: yellow;
        color: black;
        font-weight: bold;
      }
      #rad03:checked ~ .notice_label .lab03 {
        background-color: yellow;
        color: black;
        font-weight: bold;
      } */
      #rad01:checked ~ .notice_label .lab01,
      #rad02:checked ~ .notice_label .lab02,
      #rad03:checked ~ .notice_label .lab03 {
        background-color: yellow;
        color: black;
        font-weight: bold;
      }

      .notice_box .notice_label {overflow: hidden;}
      .notice_box .notice_label label {
        display: block;
        width: 100px; height: 50px;
        background-color: #eee;
        color: white;
        text-align: center;
        line-height: 50px;
        float: left;
        border-radius: 20px 20px 0 0;
        cursor: pointer;
      }
      .notice_box .notice_sheet div {
        width: 500px; height: 400px;
        background-color: yellow;
        font-weight: bold;
        font-size: 32px;
        text-align: center;
        line-height: 400px;
      }
    </style>
  </head>
  <body>
    <section class="notice_box">
      <input type="radio" id="rad01" name="tap_btn" checked>
      <input type="radio" id="rad02" name="tap_btn">
      <input type="radio" id="rad03" name="tap_btn">
      <!-- input 박싱하면 안된다. 부모가 달라진다. ~을 쓸 수 없다. -->

      <div class="notice_label">
        <label for="rad01" class="lab01">공지사항</label>
        <label for="rad02" class="lab02">오시는 길</label>
        <label for="rad03" class="lab03">Q&A</label>
      </div>

      <div class="notice_sheet">
        <div class="sheet01">공지사항_sheet</div>
        <div class="sheet02">오시는 길_sheet</div>
        <div class="sheet03">Q&A_sheet</div>
      </div>
    </section>
  </body>
</html>