멋,사 과제 로그인 모달창 만들기.<css 체크박스 디자인 바꾸기>

 

 

피그마에서 디자인을 보고 로그인 창 만들기.

(CSS 로 체크박스 디자인 바꾸기)

 

---

 

 

 

 

지금까지 배웠던 html, css를 기반으로 로그인 모달 창을 만드는 과제를 하게 되었다. 화면 구성의 굉장히 단순하고 과제를 받고 나서는 금방 할 수 있을 거 같다고 자만했었다(과제 이름도 간단한 모달창..). 그런데 시작하고 나니 그게 아니었다.

 

왜 항상 과제나 수업시간 때 머리로는 엄청 간단하고 이해도 잘되는데 막상 해보려면 백지가 되고 배웠던 것들이 머릿속에서 뒤죽박죽 되는지 모르겠다.

 

 

아래는 피그마에 올라온 참고 디자인이며 처음 로그인 팝업창은 해도 되고 안 해도 되는 영역이고 아래 모달창이 메인 과제이다. 기본 구성으로 만들고 미디어 쿼리를 써서 반응형으로 만들어 주면 된다. 

 

 

 

 

 

 

 

 

화면만 보면 별거 없어 보이고 마크업 순서대로 짜고 그다음 스타일로 배열하고 폰트 사이즈 버튼 사이즈 색상 이렇게 몇 개만 잡아주면 끝나겠구나 싶었는데? 엄청 오래 걸렸다..

일단 flex를 사용해 정렬을 잡으면서 했는데 나중에 아래 다른 계정으로 로그인이나 맨 위에 닫기 버튼과 텍스트 부분을 하나는 가운데로 하나는 끝으로 배치하는걸 flex로 아무리 만져도 안되고 마크업을 만져봐도 내 실력으로는 안되길래 저 부분들은 flex 가 아닌 position: relative 와 absolute 를 사용해서 위치를 잡아주었다.

 

그리고 아이디. 비밀번호 입력창 아래 로그인 상태 유지 체크 박스가 있는데 기본적으로 브라우저가 가지고 있는 체크 박스 모양이 저게 아니어서 디자인을 새로 해줘야 했는데 거기서 몇 시간을 소비했는지 모르겠다.  일단 기존의 체크 박스 디자인은 display: none; 으로 날렸고 속성 선택자 + label 로 이미지를 넣어주고 사이즈와 디자인을 해주었다. 그리고 속성 선택자:checked + label::before 를 사용해서 체크가 됐을 때의 디자인도 해주었는데 체크가 되면 체크가 되기 전에 보더라인이 체크가 된 디자인을 먹어서 피그마의 이미지처럼 꽉 차는 동그라미가 나오지 않았다.

 이미 기본 체크박스를 없애고 새로 디자인하는 거에서부터 시간을 많이 소비하고 난 뒤라 그냥 피그마에서 체크된 화면을 캡처해서 이미지로 넣어서 위치를 잡아주는 걸로 해서 보이는 화면은 거의 똑같이 만들었다. 근데 이렇게 해도 되는 건지를 몰라서 일단은 다음 수업 때 코드 리뷰나 강사님이 해주시는 방법을 보고 수정해야 될 거 같다.

 

 

 

 

체크박스 마크업

 

<div class="check-wrap">
        <input class="check-keep" type="checkbox" id="check" name="로그인상태유지">
        <label for="check"> </label>
        <span class="keep-txt">로그인 상태 유지</spap>
      </div>

 

 

체크박스 css 코드

/* 체크박스 */

input[type='checkbox']{
  display: none;
}
input[type="checkbox"] + label {
  display: inline-block;
  width: 22px;
  height: 22px;  
  border: 1px solid #767676;
  cursor: pointer;
  border-radius: 100%;  
  background: url(./img/Vector.png) no-repeat;
  background-position:center; 
  position: relative;
  /* overflow: hidden; */
}
input[id="check"]:checked + label::before {  
  content: '';
  display: block;
  transform: translate(-15%,-14%);
  width: 142%;
  height: 131%;
  border: none;
  background: url(./img/화면\ 캡처\ 2021-11-12\ 195930.png) no-repeat;
  background-position: center;
  background-size: cover;
  
}

/* 체크박스 */

 

 

가장 오랜 시간 잡아먹었던 체크 박스를 해결(?) 하고 빠르게 진행해서 내 눈에 보기에는 비슷하게 완성하게 되었고 팝업창과 미디어 쿼리를 (max-width:700px) 으로 만들어 주었다. 아마 강사님께서 따로 기준을 안 준 거 같아서 내 임의대로 사이즈를 정하고 각 요소들의 사이징도 다시 해주었다. 

 

 

 

 

완성 결과

 

(팝업창에서 로그인 버튼을 누르면 모달 창으로 넘어가고 모달 창에서 닫기 버튼을 누르면 팝업으로 다시 돌아간다)

 

https://chry8822.github.io/like_lion_daily/like_lion_daily/day11/day11/Modalpop.html

로그인 팝업창

 

 

 

 

 

 

 

시작한 지 이제 2주 정도 되었고 공부할 때마다 너무너무 부족하고 멘털이 많이 나가는 상황도 많지만 이렇게 만들고 나면 그런 게 없었던 거처럼 가뿐하고 계속하고 싶다는 의지가 생기는 거 같다!

 

 

 

 

 

 

 

https://github.com/chry8822

chry8822 - Overview