[HTML/CSS] Telegram_Clone_Coding

yujo·2020년 5월 16일
0

Study_web

목록 보기
2/5

Telegram Clone coding

  • 지난 번 노마드 코더의 카카오톡 클론강의를 마치고 링크 : Kakaotalk_Clone_Coding 배운 지식을 활용해 HTML/CSS를 작성해봐야겠는 생각을 했다.
  • 처음에는 내 목표인 웹앱을 HTML/CSS로 작성하려고 했으나 사실상 화면이 너무 간단하게 구성되어 있어서 배운걸 활용하기엔 적절하지 못 하다는 생각을 했다.
  • 그래서 카카오톡과 비슷한 메신저인 Telegram을 클론코딩 해보기로 결정했다.

Tlegram clone coding version 1

목표


  • 문제가 많았다.
    • 문제 1. relative와 absolute 속성을 제대로 이해하지 못하고 남발한 결과 화면을 늘리거나 줄이면 화면의 아이템들이 따라서 늘어나지 않기도 하고 줄어들지 않기도 했다.
    • 문제 2. 막히는 부분이 있을 때마다 이전에 강의를 들으면서 작성했던 Kakaotalk 클론코딩의 코드들을 가져다 사용해 전체적인 구조가 머리 속에 들어오지 않았다.
    • 문제 3. 구조를 전체적으로 그려보지 않고 바로 코딩을 해서 쓸데없는 div를 남발해 내가 봐도 전혀 눈에 들어오지 않고 이해되지 않아서 더 이상 진행하기 힘들었다.
  • 그래서 전체 코드를 지우고 처음부터 새로 작성하기로 했다.

결과물 (Telegram clone coding version 2)

  • 처음부터 어떻게 구조를 나눠서 작성할 것인지 생각을 하면서 작성했다.
  • 또한, HTML 한 부분을 작성할 때마다 CSS를 붙여 혼란스러움을 줄였다.(ex. header작성 후 header.css 작성)
  • 이게 항상 좋은 방법은 아니겠지만 나에게는 큰 도움이 됐다.
  • 모든 부분을 완성하진 못 했지만 만들면서 즐거웠고, 이전보다 HTML/CSS에 대한 이해도도 올라갔다.

Next Step

  • HTML/CSS를 완벽하게 숙달하는건 지금으로써는 힘들다고 생각한다.
  • Javascript를 학습해서 내가 원하는 앱을 만들면서 계속 공부하자.
profile
졸려도 꾸준히

0개의 댓글