👀 Touring the project
KakaoTalk Clone Project
KakaoTalk Clone Github
📒 HTML, CSS Theory
◻ HTML
▪ IDs & Classes
▪ HTML Tags
▪ Semantic & non-semantic tags
▪ Box Model
▪ Inline, Block, inline-block
◻ CSS
▪ CSS Position
position relative, absolute, fixed 를 사용하여 status bar, screen header, top bar of view page, nav bar 등을 구현했습니다.
▪ Flexbox
▪ Selectors
▪ Pseudo Selectors
▪ Transitions
▪ Animations
transform, transition을 함께 사용하여 message animation, chat animation, splash screen 등을 구현했습니다.
▪ Media Queries
사용자가 보고 있는 스크린의 사이즈가 620px이 넘어가면 사이즈를 축소 안내 스크린을 구현했습니다.
📒 Main contents of pages
▪ index
status bar(상단 고정), login form을 구현했습니다.
▪ friends
splash screen, screen header(상단 고정), BEM을 사용한 user component class(프로필 사이즈 변경 코드 간소화), nav bar 을 구현했습니다.
▪ chats & chat
css animation과 animation-delay를 통해서 서로 채팅을 주고 받는 모습을 구현했습니다.
message 창을 클릭했을 때 창이 확대되는 애니메이션을 구현했습니다.
.reply .reply__column:first-child,
.reply .fa-smile-wink,
.reply button {
transition: opacity 0.3s ease-in-out;
}
.reply:focus-within .reply__column:first-child,
.reply:focus-within .fa-smile-wink,
.reply:focus-within button {
opacity: 0;
}
.reply input:focus {
width: 94vw;
transform: translateX(-15%) translateY(-80px);
}
.reply:focus-within {
transform: translateY(80px);
}▪ view
상단 nav, posts를 구현했습니다.
▪ find
icon row, recommended friends, open-chat을 구현했습니다.
▪ more
wallet, ghibli now를 구현했습니다.
😳 마치면서
첫 웹 개발 그리고 첫 클론 코딩이었다. 전에도 html과 css의 기초적인 개념은 알고 있었지만, 클론 코딩을 몰랐던 나는 어떻게 접근하면서 공부해야 할지 몰랐다. UX/UI 디자인도 모르고, 웹의 보편적인 구조도 몰랐기 때문에 더더욱 맨 땅에 헤딩 하는 기분이었다.. 이런 측면에서 클론 코딩이라는 공부 방법은 정말 내게 딱 맞구 짜릿하구... 재밌구.. 막 너무 좋았다.
다만 아쉬운 부분이 많다. 만들고 보니 나는 심플하고 미니멀 한 것을 좋아하는데 완전 덕지덕지... 그리고 아직 HTML과 CSS만 사용해서 그런지 웹이 많이 투박하다. 이제 JS를 배우러 갈 것이다. 오히려 좋다 왜? 배울 것이 아직 많다는 것이니까 ㅎㅎ 그럼 다음에 다시 돌아오겠다. 뿅! 😋
Nomad Coders 강의를 수강하며 클론코딩 한 것입니다.
