👀 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 강의를 수강하며 클론코딩 한 것입니다.

Nomad Coders
Nomad Coders 코코아톡 클론 코딩