[HTML + CSS] 네이버 로그인 폼 클론 코딩

네이버 로그인 폼 클론 코딩

웹 개발을 많이 해보지 않기도 했고, 특히 CSS는 항상 감으로 때려 맞춰서 했던 적이 많아서 최근 CSS 공부를 하고 있다. 그런데 설명만 들어서는 다 이해하는 것 같이 느껴져서, 직접 한 번 해보려고 네이버 클론 코딩을 해봤다. 처음부터 호기롭게 메인 화면을 하려다가 바로 포기했다. 들어갈 것이 많기도 하고 대략적인 구조도 짜지 않은 채 바로 하려고 하다 보니 계속 꼬여서, 보다 조금 간단해 보이는 로그인 폼으로 시작했다.

 

네이버 로그인 폼 : https://summermong.github.io/playground-js/practice_loginClone/index.html

당연하지만 왼쪽이 네이버고 오른쪽이 내 클론 코딩이다.

포기한 부분은 ID 로그인, 일회용 번호, QR 코드 부분이랑 QR 코드 위에 있는 넛지 부분, IP 보안의 토글 부분이다. 어떻게 구성한 건지 모르겠고 일단 보여지는 화면만 하려던 거여서 JS는 최대한 하지 않고 진행하기로 했다. 

 

대신 아이디나 비밀번호를 입력하고 로그인 버튼을 누르면 네이버 메인으로 넘어가서 진짜 로그인 된건가? 하는 착각은 든다. 또 로그인 상태 유지랑 IP 보안을 클릭할 때마다 ClassList toggle로 check 클래스가 추가되게 해서 저 부분에 JS를 사용했다. 아주 간단한 기능인데도 달깍달깍 거리는 게 귀엽다. :) ㅋ

 

네이버는 외국어 지원을 해놔서 따라 해보려고 select 태그를 처음 써봤다. select 태그 아래 option 태그들을 만들어서 외국어 설정을 할 수 있도록 했지만 설정을 해도 외국어는 안 나온다. (당연함)

 

광고 부분을 비롯해 모든 아이콘과 로고는 네이버와 동일하게 가져왔다.

개발자 도구로 이미지를 긁어왔는데 이미지가 많은 경우 한 페이지에 모든 이미지를 몰아 넣고 좌표로 이미지를 긁어 사용하더라. 이 부분은 몰랐는데 신기했다. 이런 기법을 is(image sprite) 기법이라고 한다. background-position, background-size를 사용해서 적절하게 뜯어온다.

 

반응형은 하나도 고려하지 않고 시작해서 이미지가 깨지다 보니 원형보다 가로 길이가 짧다. 어떤 기기에서든 모양이 유지되게 하려고 짧게 했는데, 이 과정에서 가운데 정렬을 하기 위해 margin: 0 auto를 많이 사용했다. display에서 inline 속성은 적용되지 않으니 flex나 block으로 바꿔서 진행하면서 태그 속성을 좀 더 꼼꼼히 보게 됐다. 

 

또 기본 구조를 짜면서 시멘틱 태그를 고려하게 됐고 (나부터 못 알아보니까) 조금 생각을 하고 코딩을 할 수 있었다.

다음엔 구글 메인 페이지를 클론 해보겠다.