아이콘
-
카카오톡 클론 코딩 #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태그 아..
-
카카오톡 클론 코딩 #8 검색창카테고리 없음 2020. 11. 14. 05:25
이번 포스팅에서는 카카오톡 예전 버전에 있었던 검색 창을 만들어 보도록 하겠습니다. 먼저, find.html에서 header태그 뒤에(nav태그 앞에), main태그를 만들어 주고, header태그를 만들어 주겠습니다. 그리고 4개의 버튼을 만들어 준 다음, 4개의 버튼의 이름 뒤에 header-btn을 추가 입력하고, span태그를 이용하여, 아이콘과 이름을 넣을 공간을 만들어 주겠습니다. 나머지는 복사-붙여넣기하여 만들어 주고, QR코드 아이콘과, 이름을 넣어 주었습니다. QR코드 아이콘이 작기 때문에, fa-2x를 추가 입력하여, 크기를 수정해 주고, 나머지들도 위와 같이 차례대로 입력해 주겠습니다.(연락처, contact -> ID -> 초대, envelop으로 검색) 여기서 다른 아이콘들도 크기..
-
카카오톡 클론 코딩 #7 Friends Screen이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 13. 01:30
이번 포스팅에서는 friends screen, 친구창을 만들어 보겠습니다. 채팅창을 살펴보면, 상태표시줄, status bar과 네비게이션바, navigation bar는 저번 포스팅에서 만들어 보았고, 이번 포스팅에는 그 사이에 사진, 이름, 상태메시지, 그리고 노래를 넣어 주도록 하겠습니다. 그리고 카카오톡 사용자와 친구의 크기 차이가 있기 때문에, 크기에서 차이를 주면 됩니다. 그럼 카카오톡 유저의 사진, 이름, 그리고 상태메시지를 만들어 보도록 하겠습니다. 그 전에, 프로필 사진들이 둥근 모양의 형태로 전부 같은 스타일로 되어 있기 때문에, 이미지를 위한 전역, global 클래스로 만들어서 사용할 수 있습니다. 즉, 글로벌 스타일을 위한 파일을 만들어서, 웹사이트의 모든 곳, 어떠한 위치에도 영..
-
카카오톡 클론 코딩 #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에서 ..
-
카카오톡 클론 코딩 #3 status bar이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 9. 06:55
이번 포스팅부터는 처음에 열리는 페이지인 index.HTML, 채팅 목록 창의 전체 구조를 만들어 보도록 하겠습니다. 이번 포스팅에는 (1) status bar, 스테이터스 바 를 만들고, (2) header, 상단, (3) navigation bar, 네비게이션 바, 하단을 만들고, (4) 그리고 채팅창을 순서대로 만들어 보겠습니다. 여러 번 반복해서 쓰일 상단, status bar와 하단부분, navigation bar는 컴포넌트 단위로 시작하거나, 반복되는 페이지로 시작하도록 하겠습니다. 이제 Emmet의 html5 단축명령, html: 을 입력 후, 탭키를 눌려주거나, html:5를 선택하여 엔터키를 눌려주면, html5 코드를 확인할 수 있습니다. title, 제목은 chat | Kakao Cl..