위니브 로그인페이지 클론코딩(멋쟁이사자처럼 지원과제)

URL: https://koreanhamster.github.io/weniv_login_page/

소스코드: https://github.com/Koreanhamster/weniv_login_page

 

결과물

---

구현시 신경 쓴 점

 

웹 접근성

• 두번 째 로그인 페이지 - 보여지는 순서대로 마크업을 하면 스크린리더 상에서 아이디 입력으로 넘어가기 전에 닫기버튼이 나오기 때문에, 닫기버튼을 마크업 맨 마지막으로 배치하고 CSS를 통해 상단에 위치하게 함

 

소스 절약

• 각 회사 아이콘에 이미지 스프라이트 기법 사용 - 1장의 이미지만 사용함으로서 소스 및 로딩시간 절약

 

---

부딪혔던 문제점

 

1. 약간의 삽질

회원가입과 아이디/비밀번호찾기 사이에 있는 저 수직라인을 만들고 싶었다.

 

가상요소를 생성하여 라인을 만들어주려고 했는데, width값과 height값이 조절이 안되서 한 30분을 헤메었다.

 

 

해결방법

 

가상요소는 기본적으로 인라인요소기 때문에  선같은거 만들거나 모양내고싶을때는 꼭 display: inline-block으로 바꿔줘야 

한쪽보더만 생성하든 백그라운드 컬러를 주든 먹힌다

내가했던거(절대안됨)

.sign-in::after {
  width: 1px;
  height: 14px;
  content: "";
  border-right: 1px solid #767676;
}

 

width랑 height가 절대 안바뀐다..

 

.sign-in::after {
  content: "";
  margin: 0 12px;
  display: inline-block;
  width: 1px;
  height: 14px;
  border-right: 1px solid #767676;
  vertical-align: -2px;
}

잘 된다. 그리고 border는 right 한쪽만 줬다. 다 주면 박스보더로 4면이 다 생기기 때문이다.

 

---

2. (문제점은 아니고 발견) 아래와 같이 배치시키는 두 가지 방법 

 

a태그 안 안쪽 텍스트들을 태그 안에서 수직-수평정렬 시키기

 

이렇게 만들어 보자!

 

1) 심플하게 위아래 같은 패딩값 주기(선택)

ul a[class$="login"] {
  color: #767676;
  border: 1px solid #767676;
  border-radius: 5px;
  /* height: 50px;
  line-height: 50px; */
  margin-bottom: 10px;
  padding: 14px 0;
}

ul a[class$="login"]::before {
  content: "";
  width: 28px;
  height: 28px;
  background-color: black;
  float: left;
  margin-left: 11px;
  margin-top: -6px;
}

 

 

박스안쪽 공간은 패딩으로 만들어 줌. 그럼 그림과 같이 됨 

패딩제외 안쪽공간에서 가상요소 위치조절

---

2) height와 line height 동일하게 맞춰주기

ul a[class$="login"] {
  color: #767676;
  border: 1px solid #767676;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 10px;
  /* padding: 14px 0; */
}

ul a[class$="login"]::before {
  content: "";
  width: 28px;
  height: 28px;
  background-color: black;
  float: left;
  /* margin-left: 11px;
  margin-top: -6px; */
  margin-left: 10px;
  margin-top: 10px;
}

원하는 height를 먼저 정해놓고 line-height를 동일하게 설정해주면 글씨가 수직중앙에 위치하게 함.

그럼 검은박스들은 그림과 같이 됨, 마진을 통해 위치조절

 

 

---

선택자 잘못 선택 

         <ul>
           <li>
             <a class="google-login" href="https://www.google.com/">구글 계정으로 로그인</a>
           </li>
           <li>
             <a class="facebook-login" href="https://www.facebook.com/">페이스북 계정으로 로그인</a>
           </li>
           <li>
             <a class="naver-login" href="https://www.naver.com/">네이버 계정으로 로그인</a>
           </li>
           <li>
             <a class="kakao-login" href="https://www.kakaocorp.com/page/">카카오 계정으로 로그인</a>
           </li>
        </ul>

ul .facebook-login {
  border-color: #2f80ed;
}

 

색깔이 바뀌지 않는다.

 

 

해결

ul li .facebook-login {
  border-color: #2f80ed;
}

ul a[class^="facebook"] {
  border-color: #2f80ed;
}

위 두방식으로 선택하니까 바뀌었다.

ul 안에 있는 li중에서 class가 facebook-login인 애를 골라야 한다. 

 

 

---

What I learned...

 

이 과제는 멋쟁이사자처럼 지원시 입과테스트 중 하나였고 다시한 번 만드는거였기에 더 잘 해보고 싶었다.

그때는 어떻게 했나 싶을 정도로.. 

구현을 처음부터 설계하면서, 이걸 어떻게 할지 스스로 생각하는 내 자신이 놀라웠다.(많이 성장했네!)

웹 접근성을 고려한다던가, 이미지 소스 절약을 위해 스프라이트 기법을 사용한다던가, 저 체크박스에 체크를 하면 파란색으로 바뀌도록 만드는 걸(보이는 것 처럼 그냥 뿅 하고 되는게 아니다.) 이제 할 수 있게 되었다던가.

 

아직 복잡한 선택자를 선택한다던가 부모에게 주고 싶은 속성을 자식에게 줘서 왜 안되는거냐.. 머리 쥐어뜯는   시간을 허비하는 일이 있다. 특히 선택자 선택은 확실하게 잡아놓아야겠다.

 

만들면서 정말 많이 배운다.