코딩
-
카카오톡 클론 코딩 #13 상태표시줄이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 19. 01:45
이번 포스팅에서는 상태표시줄을 만들어 보겠습니다. 그 전에, style.css에서 몇 가지 값을 default 하겠습니다. body에서 배경색은 흰색으로, padding값은 10px(상하), 20px(좌우)로 설정해 줍니다.(page ruler redux이용) 그리고 글자색은 #1D1D1D로 설정해 줍니다(pick color from page 이용) css파일과 html파일을 함께 볼 수 있도록, style.css는 창 위에, index.html을 창 아래쪽에 두도록 하겠습니다. 이제 status-bar.css라는 새파일을 만들어서, styles.css에 import 합니다. 아래와 같이 배경색을 넣어 보면, 상태표시줄 부분이 선택 되었다는 확인할 수 있습니다. 이번에는 dispaly: flex를 이용해..
-
카카오톡 클론 코딩 #9 더보기창이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 15. 04:35
이번 포스팅에서는 카카오톡의 더보기창을 만들어 보도록 하겠습니다. 먼저, 사용자의 프로필 줄이 헤더가 되도록, 클래스명이 more인 main태그를 열고, header태그를 만들어 보았습니다. header태그 안에는 Friends.html에서 friends__list의 내용들을 복사-붙여 줍니다. 그런 다음, 사용자 프로필 사진과 이름을 수정해주고, 상태메시지 자리에는 이메일을 입력하도록 하겠습니다. 이제, friend__now-listening를 지우고, 오른편 2개의 아이콘은 button 태그를 이용해 넣어 주겠습니다. 여기서 사용된 li태그는 필요없기 때문에, li태그 대신 div태그로 고쳐 줍니다. 그럼 아래 아이콘들은 li태그를 이용해서 만들어 주면 됩니다. 먼저 ul태그를 열어주고, li태그 아..
-
카카오톡 클론 코딩 #6 Chat Screen이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 12. 05:05
이번시간에는 index.html에서 (4) 채팅창, chat screen을 만들어 보도록 하겠습니다. 그 전에, 각 창의 title, 제목 줄에 있는 아이콘들을 살펴 보겠습니다. 먼저, 친구창은 채팅창과 비교해서, header 부분에 comment, 말풍선을 지워주고, 유저아이콘을 넣어 주겠습니다. 검색창과 설정창은 일단 놔 두고, 게임별창은 comment, 말풍선과 음악, note 아이콘이 없으니, 지워 줍니다. 그리고 더보기 창에는 검색부분과 스캔하는 부분, 그리고 음악, 설정 기능이 있기 때문에, 코딩했던 부분에서, comment를 지워주고, 스캔 아이콘을 추가 해 주겠습니다. 먼저, 스캔은 QR코드 아이콘으로 사용해서, 카카오톡 더보기창과 유사한 화면을 만들어 줍니다. Status bar, 상태표..
-
카카오톡 클론 코딩 #4 Screen Title이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 10. 01:10
이번시간에는 (2) header, 상단을 만들어 보도록 하겠습니다. 먼저 header를 생성하고, 클래스로 header를 다시 명명해 줍니다. 그리고 자식 열, column 2개를 추가해 주겠습니다. 위와 같이, class, 클래스로 명명하고, column으로 사용한 이유는 편리성 때문입니다. 첫 번째 열에는 큰 h1태그를 사용해서, 채팅을 입력 하겠습니다. 두 번째 열에는 여러 아이콘들을 입력하도록 하겠습니다. 그 전에, 아이콘들 사이에 빈 공간, 즉, 간격을 재어보면 대략 25px입니다. 위와 같이, 아이콘 사이의 간격이 25px로 모두 동일하기 때문에, 아이콘들을 하나의 박스, div태그 안에 넣겠습니다. 첫 번째 아이콘은 돋보기이고, 저번 포스팅에서 했던 방식 그대로, Font Awesome에서 ..
-
카카오톡 클론 코딩 #2 colorzilla, page ruler redux이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 8. 05:00
이번시간에는 크롬 웹스토어, chrome web store에서 유용하게 사용할 수 있는 앱들을 살펴보도록 하겠습니다. 먼저, 사이즈를 구하고 색상을 입힐 수 있게 도와 주는 툴인 ColorZilla는 크롬 웹스토어에서 추가하게 되면, 웹페이지에서 색을 확인할 수 있게 합니다. 크롬에서 이미지를 열어서, ColorZilla의 Page Color Picker Active를 클릭해 주면, 색상을 확인할 수 있습니다. 이번에는 웹페이지에서 길이를 잴 수 있게 도와주는 앱, Page ruler redux를 다운로드 하겠습니다. 이제 이미지를 웹페이지에서 열어서 Page ruler redux를 클릭한 후, 프로필사진의 사이즈를 마우스로 드래그 하면, 프로필 사진의 너비가 57px이라는 것을 확인할 수 있습니다. 위..
-
카카오톡 클론 코딩 #1 프로젝트이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 7. 02:10
이번 시간부터는 카카오톡의 디자인(안드로이드 버전)을 코딩해 보도록 하겠습니다. 그 전에, 카카오톡 화면을 살펴보면, 5개의 화면, 친구 목록, 대화 목록, 게임, 설정 화면으로 이루어져 있습니다. 그리고 카카오톡의 기본 화면들은 색상을 다양하게 사용하지 않았고, 아이콘이나 박스가 많이 사용하고 있습니다. 이제 프로젝트를 만들어 보면... Github Desktop을 켠 다음, File에서 New Repository...를 클릭하여, Name, 이름은 kakao-clone-v2를, Description, 설명에는 Kakao Clone v2를 입력하고, Local Path, 경로는 Documents로 저장하고, README는 체크해 줍니다. Git Ignore, License 모두 None으로 설정한 다음..