분류 전체보기
-
카카오톡 클론 코딩 #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, 상태표..
-
카카오톡 클론 코딩 #5 Navigation Bar이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 11. 01:55
이번시간에는 하단에 위치한 (3) navigation bar, 네비게이션 바를 만들어 보도록 하겠습니다. 먼저, navigation을 줄인 nav라는 클래스명을 가진 nav태그를 입력해 주겠습니다. 5개의 버튼은 리스트로, link태그를 이용하기 위해서는, ul을 먼저 만들어 주어야 합니다. li.nav__list-item*5>a.nav__list-link 입력 후, li태그 안에 a태그를 이용하면, nav__list-item이라는 클래스명을 가진 li태그와, 그 안에 nav__list-link라는 클래스명을 가진 a태그를 만들 수 있습니다. 하이퍼링크에 ./friends.html을 입력하여, 친구창으로 이동할 수 있도록 해 주겠습니다. 차례대로 채팅창, 검색창, 게임창, (game.html을 추가해 주..
-
패스트캠퍼스 부동산 투자 올인원 패키지 Online 챌린지 참여 후기이거 공부 했더니 어때?/부동산투자 2020. 11. 10. 17:32
급변하는 부동산 세법과 지식을 습득하기 위해 수강하게 된 부동산 투자 올인원 패키지 Online 100% 환급 마지막 미션 수행을 위해 참여 후기를 남깁니다. 부동산 관련 지식을 습득하기 위해 인강같은 데서 도움을 받고 싶어 찾던 중, 운 좋게 패스트캠퍼스에서 부동산관련 100% 환급 강의를 찾을 수 있었습니다. 목차를 살펴보니, 궁금했던, 청약, 경매/공매 등 접해보고 싶었던 강의들이 있어서 두 번 정도 고민하고 결제를 했습니다. 공공주택에 관한 강의로 강의를 시작했습니다. 강의를 보면 볼수록, 생각해 본 적 없던 공공주택에 대한 장점이 눈에 보였고.. 기회만 된다면 공공주택에 거주하고 싶단 욕심이 생겼습니다. (아직 다 수강을 못해서.. 그 중 꼽자면) 지금까지 60일간의 수강 강의 중에 기억남는 건..
-
카카오톡 클론 코딩 #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..
-
스타벅스 토피 넛 팝콘 트리 프라푸치노이건 먹어보니 어때? 2020. 11. 8. 16:18
어느새 2020년도 끝물에 접어들고, 크리스마스 시즌이 돌아왔습니다! 얼마만에 쓰는 스타벅스 후기인지 모르겠네요~ 위드코로나였던 이번년도는 스타벅스를 거의 방문하지 못했답니다ㅠ 아직 안심할 단계는 아니지만, 연말 크리스마스 e-프리퀀시는 누구보다 빠르게 달성해 보려고 합니다! 첫 스타트를 끊은 음료는 바로 노피넛 팝콘 트리 프라푸치노입니다. 토피 넛 팝콘 트리 프라푸치노 가격: 6,500원 칼로리: 345Kcal 1회 제공량: 355ml 카페인: 85mg *대두, 우유 내가 주는 맛 별점: ★★☆(2.5/5점) 알록 달록한 팝콘으로 크리스마스 트리를 표현했다는 토피 넛 팝콘 트리 프라푸치노의 비주얼에 반해서 제일 먼저 주문하게 되었답니다~ 음료를 받자마자 요리찍고 조리찍어봤지만, 테이크아웃 잔에 받아서 ..
-
카카오톡 클론 코딩 #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이라는 것을 확인할 수 있습니다. 위..