인프런 커뮤니티 질문&답변

■ 질문 남기실 때 꼭! 참고해주세요.

- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.

html

  <div class="container">
    <input type="checkbox" id="trigger">
      <label for="trigger">
        <span></span>
        <span></span>
        <span></span>
      </label>
      <div class="sidebar"></div>
  </div>

css

body {
  height: 100vh;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  color: #fff;
  margin:0;
  padding:0;
}

a {
  color: #222;
  text-decoration: none;
}

.container {}
input[id=trigger] {
  display: none;
}

label[for=trigger] {
  /* border: 1px solid red; */
  width: 40px;
  height: 30px;
  display: block;
  position: absolute;
  cursor: pointer;
  right: 10px;
  top:50%;
  transform: translateY(-50%);
  transition: 0.3s;
}

label[for=trigger] span {
  position: absolute;
  height: 2px;
  background-color: #000;
  width: 100%;
  transition: 0.3s;
}

label[for=trigger] span:nth-child(1){
  top:0;
}
label[for=trigger] span:nth-child(2){
  top:50%;
}
label[for=trigger] span:nth-child(3){
  top:100%;
}

input[id=trigger]:checked + label[for=trigger] span:nth-child(1){
  top:50%;
  transform: rotate(45deg);
}
input[id=trigger]:checked + label[for=trigger] span:nth-child(2){
  opacity: 0;
}
input[id=trigger]:checked + label[for=trigger] span:nth-child(3){
  top:50%;
  transform: rotate(-45deg);
}

.sidebar {
  width: 300px;
  height: 100vh;
  background-color: #000;
  position: absolute;
  right: -300px;
  transition: 0.3s;
}

input[id=trigger]:checked ~ .sidebar {
  right: 0;
}

input[id=trigger]:checked + label[for=trigger] {
  right: 310px;
}

1. 혼자 다시 연습하다 6:50초 경에 나온 사이드바 부분의 position을 fiexd 가 아닌 absolute 로 한 뒤 right: -300px 로 가렸더니 숨겨지는게 아니라 가로스크롤이 생기면서 옆을 볼 수 있게 되는데, 애초에 부모의 값이 따로 없고 100% 라 그런거라면 왜 fiexd는 가려지는데 absolute 는 옆에 공간이 따로 생겨서 사이드바가 생기는 걸까요?

   그리고 높이는 둘다 똑같이 100vh 인데 왜 세로 스크롤도 생기는걸까요???

    

2. 그리고 또 하나 궁금한게 이전에 햄버거 버튼을 만들때 label에 position : relative; 를 주고 span에 position : absolute; 를 줘서 배치를 했는데, 사이드바 생성시 햄버거 버튼의 위치 조정을 위해 label을 absolute로 변경 하게 되면 부모자식 관계였던 lable과 span이 모두 absolute 속성을 가지게 되는데 이런 건 전혀 문제될게 없는걸까요???