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

강사님 안녕하세요. 파이널 과제를 하면서 궁금한 점이 있어 질문 드립니다..!
질문이 많지만 피드백 주시면 감사하겠습니다! ( _ _ )

1. 화면이 100% 일때는 회원가입 폼의 높이가 잘리고, 80%로 줄여야 그때부터 폼이 화면 안에 다 들어간 상태로 확인할 수 있습니다. 이러한 현상은 브라우저 별 차이로 생각하면 되는 걸까요?
   또 저는 화면이 100%일 때도 폼이 안잘렸으면 하는데, 혹시 이때 해결할 수 있는 방법이나 대안이 따로 있을까요?

// 노션 파일에 있는 코드와 동일합니다.
* {
  box-sizing: border-box;
  margin: 0px;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

2. 성별 인풋에서 radio 동그라미 부분에 따로 스타일을 주고 싶어서 아래와 같이 작성했는데, 적용이 안됩니다. 제가 시도해본 방법은 label 내부에 input을 두고 id와 for을 묶어서 스타일을 적용해보았으나, 실패했습니다. 혹시 적용이 안되는 이유와 해결 방법을 알려주실 수 있을까요?

<input type="radio" name="gender" class="gender-radio" />여성

.gender input[type="radio"] {
  background: #ebebeb;
  border: 1px solid #d2d2d2;
}

3. 하단 가입하기 버튼 바로 위에 있는 수평선을 <hr> 태그가 아닌, 버튼을 감싸는 div 박스에 border-top을 주어 스타일을 작성했는데요, 아래와 같이 footer와 버튼이 겹쳐버리는 현상이 발생했습니다.
   저는 이를 마진 겹침 현상으로 생각하고, 부모 요소에 padding, inline-block, overflow:hidden을 적용해 보았지만 결국 문제를 해결하지 못했습니다.
   저는 html 코드를 줄이고자 버튼을 감싸는 박스로 가로선을 해결하고 싶었는데, 이러한 현상이 발생하는 이유와 이 경우 어떤 식으로 해결할 수 있는지 궁금합니다.

   <div class="footer">
     <button id="signup-button">가입하기</button>
   </div>
   
   .footer {
     width: 380px;
     height: 1px;
     margin: 32px 0px 20px 0px;
     border-top: 1px solid red;
   } 
   
   #signup-button {
     width: 380px;
     height: 75px;
   
     background: #ffffff;
     border: 1px solid #0068ff;
     border-radius: 10px;
     font-size: 18px;
     line-height: 27px;
     text-align: center;
   }