멋쟁이 사자처럼 <CSS> 로 네이버(Naver) 로그인 박스 만들기.

 

 

HTML, CSS 를 활용하여 네이버 박스 UI 만들어 보기!

 

 

---

 

 

 수업중에 배운 내용으로 html 과 css 를 활용하려 네이버(Naver) 페이지의 일부분인 로그인 박스를 만들어 보기로 하였다. 처음에는 굉장히 단순하게 보여서 (단순한 거 맞음) 10분이라는 제 한 시간 안에 충분히 만들 수 있다고 생각했고 그것은 생각일 뿐이라는 걸 느끼게 되었다.

 

 

아래는 실제 서비스 되고 있는 네이버 로그인 박스의 UI이다.

 

 

 이렇게 보면 큰 사각박스 안에 로그인 버튼과 텍스트 몇 자가 끝인데, 처음 우리가 float이라는 속성(property)을 배우고 나서 하는 실습이라 그 속성을 활용하여 만들기로 하였다.

 

처음에 나름 호기롭게 출발하고 마크업도 나름 구조적이고 어떻게 하면 저 작은 부분을 시멘틱 하게 만들 수 있을까 고민하며 작성해 나갔다. 그리고 마크업을 한 뒤 CSS 작업을 하는데 이때부터 하나씩 꼬이더니 갑자기 position이 나오고 난리가 나기 시작했다. 아직도 정확히 여태껏 공부한 내용들이 확실하게 개념이 잡히지 않았지만 저걸 만드는 당시 그래 봤자 엊그제에는 더 심하게 혼돈이 왔고 저 작은 박스 안에 relative와 absolute 그리고 float 등등 엉망이 되었다.

내가 원하는 위치는커녕 사방으로 날아다니고 쉬는 시간까지 써가면서 했지만 수업이 끝날 때까지 깨진 멘털과 깨진 결과물만 남기며 끝내 제출도 못하고 끝나 버렸다.

 

그리고 혼자고 깊은 고민에 빠졌다. 다른 동기들은 굉장히 빠른 시간에 해결하고 몇 분의 코드를 강사님이 함께 리뷰 해 주셨는데 일단 마크업부터 굉장히 깔끔하고 단순하게 작성된 걸 볼 수 있었다.

 

 

아래는 박스를 제작하기 전에 구획을 나눠본 건데 머릿속에만 있으면 헷갈릴 수 있으니 이렇게 작업하는 게 편하다고 생각했다.

 

 

 

 저렇게 많이 나누지 않아도 강사님이나 동기분들은 충분히 깔끔한 코드로 완성했는데 나는 오히려 내가 나눠놓고 헷갈려서 한번 꼬이니까 걷잡을 수 없게 됐다 그래서 너무 답답한 마음에 다 지우고 저녁을 먹고 마음을 비우고 다시 하기로 결정했다.

 

 

 

다시 만들어 보기!

 

 

물론 마음을 비운다고 해서 잡히지 않았던 개념들이 갑자기 생기는 게 아닌지라 코드 리뷰 했었던 코드들과 float 속성의 개념을 다시 한번 확인하였다. 

그리고 수업시간에 동기분이 가상 요소를 사용해서 이미지를 넣은 게 너무 멋있어 보여서 작은 이미지들을 그렇게 넣기로 결정하였다.

 

폰트를 꾸며주는 기본적인 속성 들을 제외하고는 float과 가상 요소 ::before 를 사용해서 위치를 잡고 자물쇠 아이콘과 사람 모양 아이콘을 넣어주면 네이버 화면과 거의 비슷하게 만들 수 있었다.

개념들을 조금씩 이해하면서 작성하니 처음보다는 수월했지만 중간중간 잘 안 되는 부분들이 여전히 있었다. 정확한 수평 수직 부분에서 조금 애를 먹어서 구글링과 강사님의 마크업과 클래스 그리고 거기에 들어간 태그와 자식 들중에 어디에 스타일을 적용해서 원하는 구성이 나오는지 확인하면서 원하는 결과물을 만들었다.

 

눈으로 보기에는 만족하지만 아직 마크업이나 CSS 작성 부분에서 마음에 들지 않는 부분들이 있는데 아직은 그걸 완벽하게 해내기에는 너무 많이 부족하기 때문에 공부해 나가면서 천천히 복습할 예정이다.

 

 

 

---

 

 

 

아래는 완성한 네이버 로그인 박스 UI 다.

완성

 

 

 

정확히 따지면 완전히 똑같진 않지만 배열도 안되고 사방으로 다 붙어버린 처음에 했던 결과보다 만족하고 있다.

 

 

 

---

 

 

 

 

해당 작성 코드는 github에 올려놓았다!

 

 

https://github.com/chry8822/like_lion_daily

GitHub - chry8822/like_lion_daily