kakao-clone

Nomad Coders의 "카카오톡 프런트엔드 클론 코딩" Course의 결과물

카카오톡 Frontend 클론(Clone) 코딩 프로젝트.
HTML, CSS만을 활용하여 카카오톡의 UI를 그대로 구현해보는 프로젝트입니다.

사용한 기술

• HTML
• CSS

결과물

https://candypoplatte.github.io/kakao-clone/

Tips

• Github Pages로 Publish하는 방법
  1. gh-pages branch 생성
  2. user_name.github.io/repository_name 접속
• Editor(VS Code) 사용 스킬
  • html 태그 작성 단축키 : ex) html:5, tag.class + , i.fa.fa-wifi
• CSS 다루는 법
  • Advanced CSS
    • Transition
      • State : focus, active, hover에서 작동
      • 전체 Property 적용 시 transition:all
    • Transformation : transition과 함께 사용하면 유용
    • Animation : keyFrames
      • Stage에 따라 from, to / 0~100%
    • Media Queries : Device 특성 @media
  • Tip Links
    • { Box-sizing: Border-box } FTW
    • A Complete Guide to Flexbox
    • Learn Flexbox while Playing
    • Box Shadow Official Documentation
    • Official Background Position Official Documentation
    • Cursor CSS Official Documentation
    • 'align-self' Official Documentation
    • CSS Transitions
    • Understanding CSS z-index