교육
채용
코딩테스트
인증시험로그인기업서비스

html&css를 이용한 햄버거 메뉴 바를 만들 때의 질문입니다ㅠ 제발 도와주세요ㅠ

조회수 449회
좋아요

0

싫어요 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UFT-8">
        <title>Doum : 생활기록부 도서 추천</title>
        <style>
        body{
          background-color: #ECF0F3;
          }
        @font-face {
          font-family: 'GmarketSansMedium';
          src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
          font-weight: normal;
          font-style: normal;
        }
        @font-face {
          font-family: 'GmarketSansBold';
          src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
          font-weight: normal;
          font-style: normal;
        }
        </style>
        <style>
        .left_bar{
          height: 100%;
          max-width: 0;
          background-color: #ffffff;
          text-align: center;
          transition: 0.3s ease;
          z-index: 1;
          position: absolute;
          top: 0;
          left: 0;
        }
        .team_title{
          width: 200px;
          max-width: 0;
          background: linear-gradient(to left top,#00FFED,#9D00C6);
          color: transparent;
          -webkit-background-clip: text;
          font-size: 250%;
          font-family: 'GmarketSansBold';
          font-weight: bold;
          transition-delay: 0.1s;
          z-index: 2;
          position: absolute;
          top: 0px;
          left: 70px;
        }
        .left_title_01{
          width: 200px;
          max-width: 0;
          background: linear-gradient(to left top,#00FFED,#9D00C6);
          color: transparent;
          -webkit-background-clip: text;
          font-size: 130%;
          font-family: 'GmarketSansBold';
          font-weight: bold;
          transition-delay: 0.1s;
          z-index: 2;
          position: absolute;
          top: 90px;
          left: 30px;
        }
        .left_title_02{
          width: 200px;
          max-width: 0;
          background: linear-gradient(to left top,black,black);
          -webkit-background-clip: text;
          color: transparent;
          font-size: 130%;
          font-family: 'GmarketSansMedium';
          transition-delay: 0.1s;
          z-index: 2;
          position: absolute;
          top: 90px;
          left: 125px;
        }
        .hashtag_subject_title{
          width: 200px;
          max-width: 0;
          background: linear-gradient(to left top,black,black);
          -webkit-background-clip: text;
          color: transparent;
          font-size: 130%;
          font-family: 'GmarketSansBold';
          transition-delay: 0.1s;
          z-index: 3;
          position: absolute;
          top: 140px;
          left: 35px;
        }
        .hashtag_subject_choice{
          width: 300px;
          max-width: 0;
          font-size: 120%;
          line-height: 180%;
          font-family: 'GmarketSansMedium';
          transition-delay: 0.1s;
          z-index: 3;
          position: absolute;
          top: 195px;
          left: 35px;
        }
        .hashtag_feature_title{
          width: 200px;
          max-width: 0;
          background: linear-gradient(to left top,black,black);
          -webkit-background-clip: text;
          color: transparent;
          font-size: 130%;
          font-family: 'GmarketSansBold';
          transition-delay: 0.1s;
          z-index: 3;
          position: absolute;
          top: 300px;
          left: 35px;
        }
        .hashtag_feature_choice{
          width: 300px;
          max-width: 0;
          font-size: 120%;
          line-height: 180%;
          font-family: 'GmarketSansMedium';
          transition-delay: 0.1s;
          z-index: 3;
          position: absolute;
          top: 355px;
          left: 35px;
        }
        input[id="Korean"],[id="science"],[id="socialstudy"],[id="math"],[id="english"],[id="culture"],[id="introduction"],[id="speciality"]{
          position: relative;
          top: 2.5px;
        }
        .burger-icon{
          cursor: pointer;
          display: inline-block;
          position: absolute;
          z-index: 4;
          padding: 8px 0;
          top: 30px;
          left: 40px;
          user-select: none;
          width: auto;
          margin: 0;
        }
        </style>
        <style>
        .burger-icon .burger-sticks{
          background: grey;
          display: block;
          height: 3px;
          position: relative;
          width: 30px;
        }
        .burger-icon .burger-sticks:before,
        .burger-icon .burger-sticks:after{
          background: grey;
          content: '';
          display: block;
          height: 100%;
          position: absolute;
          width: 100%;
        }
        .burger-icon .burger-sticks:before{
          top: 5px;
        }
        .burger-icon .burger-sticks:after{
          top: -5px;
        }
        .burger-check{
          display: none;
        }
        .burger-check:checked~.left_bar{
          max-width: 300px;
        }
        .burger-check:checked~.team_title,
        .burger-check:checked~.left_title_01,
        .burger-check:checked~.left_title_02{
          max-width: 200px;
        }
        .burger-check:checked~.hashtag_subject_title,
        .burger-check:checked~.hashtag_subject_choice,
        .burger-check:checked~.hashtag_feature_title,
        .burger-check:checked~.hashtag_feature_choice{
          max-width: 200px;
        }
        .burger-check:checked~.burger-icon .burger-sticks{
          background: transparent;
        }
        .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before{
          width: 20px;
          position: absolute;
          top: 0px;
          left: 210px;
          transform: rotate(-45deg);
        }
        .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after{
          width: 20px;
          position: absolute;
          top: 0px;
          left: 210px;
          transform: rotate(45deg);
        }
        .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before,
        .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after{
          top: 0;
        }
        </style>
   </head>
   <body>
     <input class="burger-check" type="checkbox" id="burger-check" /><label class="burger-icon" for="burger-check"><span class="burger-sticks"></span></label>
     <div class="left_bar" style="width: 300px;"></div>
       <div class="team_title">
         <p>코사인팀</p>
       </div>
       <p class="left_title_01" style="display: inline-block;">#해시태그</p>
       <p class="left_title_02" style="display: inline-block;">로 책 검색하기</p>
      <div class="hashtag_subject_title">
        <p>과목별</p>
      </div>
      <div class="hashtag_subject_choice">
        <label></label><input style="zoom:1.5;" type="checkbox" id="Korean" name="Korean" value="1">#국어</label>
        <label><input style="zoom:1.5;" type="checkbox" id="science" name="science" value="2">#과학</label><br>
        <label><input style="zoom:1.5;" type="checkbox" id="socialstudy" name="socialstudy" value="3">#사회</label>
        <label><input style="zoom:1.5;" type="checkbox" id="math" name="math" value="4">#수학</label><br>
        <label><input style="zoom:1.5;" type="checkbox" id="english" name="english" value="5">#영어</label>
      </div>
      <div class="hashtag_feature_title">
        <p>책의 특성</p>
      </div>
      <div class="hashtag_feature_choice">
        <label><input style="zoom:1.5;" type="checkbox" id="culture" name="culture" value="6">#교양</label>
        <label><input style="zoom:1.5;" type="checkbox" id="introduction" name="introduction" value="7">#입문</label><br>
        <label><input style="zoom:1.5;" type="checkbox" id="speciality" name="speciality" value="8">#전문</label>
      </div> 
   </body>
</html>

이미지

다른 요소와 달리 체크박스만 아래 화면처럼 사이드 바를 닫았을 때도 보여지는데 해결 방법이 없을까요??ㅠㅠ

댓글 입력

1 답변

  • 좋아요

    0

    싫어요

    올려주신 코드를 아주 간소화한 데모를 만들어 봤습니다. 아마 foo bar 자리에 내용을 채우시면 될 겁니다. https://jsfiddle.net/jkcenx2t/1/

    이하는 참고가 될수도 있고 안될수도 있는 의견들입니다.

    • 체크박스 바로 다음 요소에 대한 CSS를 지정하는 방식으로 구현하셨는데, 그렇다면 (위에 첨부한 데모에서처럼) 체크박스 바로 다음 요소는 1개만 나오면 됩니다. 그 1개 div가 나머지를 둘러싸면 되죠.
      • 마크업의 차원에서도, 시각적으로는 .left_bar 안에 들어가 있는 요소들이 코드상으로는 .left_bar 밖에 있는데, 이런 마크업은 좀 잘못된 편입니다. 마크업을 재검토해 보시기 바랍니다.
    • z-index와 position: absoulte가 다소 남용되고 있다고 생각됩니다.
      • z index는 body에 0(기본값), 메뉴에 1, 햄버거 버튼에 2를 주면 충분하고 그 이상 다른 요소는 굳이 그걸 지정할 필요가 없을 겁니다.
      • 부모가 absolute한데 자식도 absolute해야 하는 경우는 거의 없습니다. 자식은 보통 relative, 혹은 static(기본값)으로도 충분합니다.
      • width: 0은, overflow: hidden이 적절히 적용되어야 실제 효과가 있습니다. 그런데 이게 position, z-index와 엮이면 작동을 안 할 가능성이 큽니다.
    • 정 안 되면, 저라면 .left_bar의 left 속성에 트랜지션을 주겠습니다. -300px에서 0으로 스위칭하는 거지요. 그 안의 내용에는 position: absolute 같은 거 줄 필요 없구요. (많이들 이렇게 합니다.)
    편집 요청

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

로그인
가입하기
(ಠ_ಠ)
(ಠ‿ಠ)