Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
CSS를 이렇게 많이 다룬 적은 처음! Kokoa Clone 14기 후기
#html_css
3년 전
1,182
4

(13기라고 알고 있었는데 14기여서 다시 올립니다..)
이전 글에 코멘트 작성해주신 분들께 죄송하고 고맙습니다.

0. Result URL

1. 아이고 이놈의 CSS
html&css 챌린지였지만 나에게 있어서는 css 비중이 95%, html 비중이 3%, 거기에 js 2%였다. 프로필과 채팅을 새로운 창에서 띄우기 위해 어쩔 수 없이 js를 사용했다. (target="_blank"로 하면 브라우저마다 새로운 탭을 띄우기도 한단다.)

2. 사실은...
사실 이 강의를 신청한 건 2019년이었다... 당시 Cookie 설명 영상을 보고 Nomad Coders를 알게 되었고, 코코아톡을 신청했다. 강의 진도가 50%정도 나가고 본격적인 코코아톡을 만들 때 너무 지쳐버려서 그 후로 안 봤다.. 2021년이 되고, 도저히 미루면 안되겠다는 생각에 챌린지를 신청했다. 이제 와서 html, css 하려고 보니까 예전에는 그렇게 복잡하고 어려워 보였는데 이제는 꽤 간단해졌다. html은 뚝딱 만들 수 있게 되었고, css는 하다가 가끔씩 '어라..?' 할 때가 있지만 MDN과 함께라면 해결할 수 있었다.

3. 프로젝트 진행
처음에는 강의를 따라서 만들 계획이었다. 그런데 강의를 보다 보니 제출 마감일이 코앞이라 강의를 차근차근 따라 하기에는 무리였다. 그래서 '내가 아예 처음부터 만들어버리자'라는 생각으로 만들었다. 거의 절반 정도 만들고 나서 알아차린 사실은, Nico는 모바일 버전, 나는 pc 버전의 클론을 만들었다는 것이었다. 처음에는 당황했지만 '오히려 좋아!'라는 마음가짐으로 계속 만들어 나갔다.

4. 테마
지난 기수분들의 우수작을 보니 한 가지씩 테마가 있었다. 마블, DC, 스폰지밥 등 다양했다. 어떤 테마를 하면 좋을까 생각하다가 '카카오톡 하면 노랑... 노랑하면 피카츄!' 그렇게 해서 테마는 포켓몬이 되었다. index.html로 들어가면 피카츄가 문지기처럼 팔짱을 끼고 있다. pc 카카오톡은 패스워드를 네 글자 이상 입력해야 버튼이 활성화가 되는데, 이것도 js의 힘을 조금 빌렸다. input 내용이 바뀔 때마다 input.value.length를 확인해서 4 이상이면 버튼을 활성화했다. 들어가보면 여섯 포켓몬 친구들이 있는데, 각 채팅창의 배경색을 대화하고 있는 포켓몬의 대표 색상으로 물들였다. 대표 색은 root에 변수로 만들었고, transparent, opacity로 아이콘 색상을 조절했다.

5. CSS...
CSS 파일이 무려 12개다. 지금껏 진행한 프로젝트 중 CSS를 이렇게 많이 사용한 적은 처음이다. 물론 파일을 세분화하는 과정에서 그 수가 늘어난 것은 사실이다. 그렇다 해도 12개라니! 더 큰 프로젝트를 진행하면 더 많은 파일을 다루게 되겠지...

6. px vs rem
강의에서는 px 단위만 사용한다. 그런데 반응형 웹페이지를 디자인할 때는 em, rem 등을 사용하라는 글들을 많이 봐서 일단 rem을 사용해봤다. rem을 사용하면 나중에 html의 font-size만 변경해도 모든 값이 상대적으로 바뀌어서 반응형 만들 때 편하다고 한다.

7. 진행하면서...
프로젝트를 진행하면서 정말 바쁘게 지냈다. 매일 일어나면 조금씩 보완하고 commit 하고를 반복했다. 심지어 챌린지가 끝난 후에도 계속 업데이트했다. '채팅창을 새 탭에 띄우는 건 어떨까?', '아예 새 창에 띄우는 게 낫겠지?', '프로필 창도 만들자!', ⋯ 끝도 없을 것 같아서 후다닥 마무리해버렸다. 새로운 기능들도 익히고 무언가에 집중하는 시간을 가질 수 있어서 좋았다. 가장 좋은 점은 나의 결과물을 공유할 수 있다는 점이었다. (이놈의 과시욕) 클론 코딩을 하다 보니 디자인 감각도 생기는 것 같고, 이제는 웹사이트만 들어가면 html 구조를 생각해보게 되었다. 아무튼 바쁘고, 생산적인 일주일이었다.

8. Screenshots

undefined

undefined

undefined

undefined

undefined

undefined

4 comments