Naver 로그인 모달 만들어보기

네이버 로그인 창에 이어서 계속해서 작업을 하도록 합니다.

24_12_11
	naver
    	index.html <--요기서 작업
        style.css 

로그인 버튼을 클릭하면 아래와 같은 창이 뙇 하고 가운데에 올 수 있도록 작업한 번 해볼게요.

레이아웃 작업하기

우선 div 태그 안에 form 태그와 ul.quick_btns 를 만듭니다. 그리고 form 안에 div로 감싼 input 2개, 또 다른 div 에 input:checkout 이랑 label 을 같은 id를 사용해 연결해줍니다. IP 부분은 애니메이션이 들어가야하니 작업하지 않겠습니다.
마지막으로 button:button을 하나 만드셔서 새로고침 되지 않는 폼을 완성하면 되겠습니다.

이미 윗부분에서 작업한 ul.quick_btns 이기 때문에 스타일이 잘 적용되어 있는 것을 확인할 수 있습니다. 한 번 잘 짜보도록 하세요~

<div>
  <form action="">
    <div>
      <input type="text" placeholder="아이디 또는 전화번호" />
      <input type="password" placeholder="비밀번호" />
    </div>
    <div>
      <input type="checkbox" id="k" />
      <label for="k">로그인 상태 유지</label>
    </div>
    <button type="button">로그인</button>
  </form>
  <ul class="quick_btns">
    <li><button>아이디 찾기</button></li>
    <li><button>비밀번호 찾기</button></li>
    <li><button>회원가입</button></li>
  </ul>
</div>

class이름과 스타일 한 번 쭈욱 짜보세요~

css 작업시작

div.login_box,
div.login_modal {
	...동일한 스타일
}

div.login_modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); <--이부분은 삭제해서 한 번 해보세요.
}

상단에 작업해둔 div.login_box 옆에 쉼표와 div.login_modal 을 클래스로 준 div 를 선택합니다. 동일한 스타일을 적용한 뒤 개별적으로 선택해 position:fixed 로 별개로 움직이도록 띄운 뒤 top또는 bottom, left 또는 right 값을 주어 고정시킵니다. transform 값을 주기전에는 정확히 가로세로 기준 가운데서 요소가 시작되는 것을 볼 수 있습니다. 그렇기 때문에 왼쪽으로, 위로 요소의 반정도 사이즈만큼 당겨올 필요가 있습니다.

div.login_modal form {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

아래처럼 왼쪽의 이름을 오른쪽으로 변경해줍니다.
div.login_box button.naver -> button.naver {
	...기존 스타일
}

naver버튼을 전역으로 선택하는 스타일 적용법입니다.

div.login_modal form {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

그리고 폼 자체에도 스타일을 적용해주면 버튼 넓이가 꽉 차게 됩니다.
인풋의 스타일도 예쁘게 만들어줍니다.

div.login_modal div.input {
  display: flex;
  flex-direction: column;
}

div.login_modal form input {
  height: 40px;
  outline: none;
  border: 1px solid lightgray;
  border-radius: 4px;
  padding: 0 10px;
}

이제 첫번째 아이디 부분의 상단은 동그랗고 아래부분의 모서리는 직각으로 떨어지고 아래 테두리는 없애서 겹치는 부분을 없애보려고 합니다. 그렇게 되면 모든 input 이 아닌 첫 번째, 2번째 요소를 선택해야하는데요. div.input 의 첫번째 input을 선택하는 방법으로 class명을 부여하는 방법과 nth-child, first-child를 사용하는 방법을 해보겠습니다. 한 번 생각해보신 다음에 아래의 코드를 봐주세요~

div.login_modal form :first-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: none;
}

div.login_modal form :nth-child(2) {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

저희가 이제껏 hover, active 등은 css-selector 바로 옆에 붙여서 작성했는데, :nth-child(숫자)와 :first-child는 떨어뜨려서 작성합니다. 그 이유는 어떤 태그가 오는지 몰라도 div.input 안에서 위에서부터의 순서가 적용되기 때문입니다. 정확한 것을 원하시면 input:first-child, input:nth-child(2)를 넣어주셔도 동일하게 작동합니다.

div.login_modal form div.check {
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-size: 12px;
  color: gray;
}

체크박스 부분만 이렇게 간단하게 잡아주시면 끝!
많은 삽질이 성장을 의미합니다. 화이팅 해주세요~