Naver 로그인 창 만들어보기

네이버 홈페이지에서 로그인 버튼이 있는 곳과 클릭시 이동하여 생성되는 로그인 폼을 연결하여 만들어 보도록 하겠습니다. 그동안 배웠던 스타일들 중 포지션값까지 적용해 모달창을 띄우는 것까지 실습합니다.

파일구조
24_12_11
	naver
    	index.html
        style.css

준비작업 - 레이아웃 분리하기

순서대로 로그인 박스 안에 p, button, ul 태그를 사용하여 빠르게 html 을 완성합니다. 사진을 참고하시며 최대한 비슷하게 만들어 보세요~

html 만 작업한 모습입니다.

<div class="login_box">
  <p>네이버를 더 안전하고 편리하게 이용하세요</p>
  <button class="naver"><span>NAVER</span>로그인</button>
  <ul class="quick_btns">
    <li><button>아이디 찾기</button></li>
    <li><button>비밀번호 찾기</button></li>
    <li><button>회원가입</button></li>
  </ul>
</div>

특이점으로는 button태그 안에 span을 넣어 NAVER 영역만 다르게 작업을 해준다는데 있습니다. button 태그에 기본 스타일을 주고 naver 만 특별하게 만져줄 때 아무런 의미가 없는 span 태그를 활용합니다.

<button class="naver"><span>NAVER</span>로그인</button>

나머지는 스타일의 영역입니다. head 태그 안에 link로 연결해주시면 됩니다. 복붙만 하지 마시고 왜 이런 값을 넣었는데 Ctrl / 를 눌럿다 지웟다 반복하시면서 원리를 이해하시는게 중요합니다.

모든 태그를 선택하여 불필요한 여백 등은 제거하고 ul 의 불렛포인트도 없애줍니다
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

div.login_box {
  border-radius: 10px;
  padding: 20px;
  border: 1px solid lightgray;
  display: flex;
  flex-direction: column;
  row-gap: 20px;

  /* 임의로 넓이 지정 */
  width: 300px;

  /* 좌우값으로 auto 를 줘 자동으로 중앙정렬 */
  margin: 0 auto;
}

공통된 스타일은 " , " 로 구분하여 한 번에 작업해줍니다.
한 가지 차이점을 확인하셨나요? div.login_box로 작업하던 css 의 규칙을 살짝 바꿨습니다. ul.quick_btns 부분입니다. 나중에 로그인 모달에서도 동일하게 적용되는 부분이어서 따로 작업해줬습니다. (재사용성 증가=개발실력++)

div.login_box p,
ul.quick_btns button {
  font-size: 12px;
}

ul.quick_btns button {
  color: gray;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

네이버 버튼을 다듬어 주시면 거의 끝입니다.
아래부분은 button.naver 의 hover, active 속성을 더해준 내용입니다. 추가 작업이니 건너뛰어도 무방합니다.

div.login_box button.naver {
  height: 40px;
  border-radius: 3px;
  background-color: rgb(44, 168, 44);
  border: none;
  cursor: pointer;
  color: white;
}


div.login_box button.naver:hover {
  opacity: 0.8;
}
div.login_box button.naver:active {
  opacity: 0.6;
}

ul.quick_btns {
  display: flex;
  column-gap: 16px;
  justify-content: center;
}

좌우로 나란히 시키고 가운데 정렬하면 끝!
요긴 덤

ul.quick_btns button:hover {
  color: black;
}

차이점은 직접 확인해보기!

css의 규칙은 본인이 작성한 클래스명에 따라 다를 수 있습니다. html과 css가 익숙해질때까지 최소 10번 이상 코딩해보시면서 css Selector를 다뤄보세요~