전체 글
-
스타벅스 제주 샤이닝 바나나 크림 프라푸치노이건 먹어보니 어때? 2020. 11. 18. 14:22
JEJU ONLY 메뉴를 먹어보고 싶어서, 제주도에 방문한 김에 스타벅스를 시간내서 다녀왔습니다:) 갑작스레 찾아왔던 추위에 패딩을 꺼내 입던 내륙과 달리 제주도는 반팔을 입어도 이상하지 않을 정도로 따뜻한 날씨였습니다. 그래서 열대과일 바나나가 샛노랗게 잘 자랄 것 같은 남쪽나라 제주도에서 마셔본 첫번째 JEJU ONLY 메뉴는 바로 제주 샤이닝 바나나 크림 프라푸치노 입니다. 제주 샤이닝 바나나 크림 프라푸치노 가격: 7,500원 칼로리: 525Kcal 1회 제공량: 473ml 카페인: 0mg *우유 내가 주는 맛 별점: ★★☆(2.5/5점) 휘핑크림 많이 주문했더니, 컵 한가득 휘핑크림을 올려주셔서 사진을 예쁘게 찍을 수 있었네요 흐흐 가끔... 휘핑크림 대충 올려주는 매장에서.. 음료 받고나면 기..
-
카카오톡 클론 코딩 #12 resetCSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 18. 01:46
이번 포스팅부터는 CSS를 작성해 보겠습니다. 그 전에, CSS를 작업하기 위해서, resetCSS라고 불리는 것을 불러(import) 오도록 하겠습니다. 큰 파일인 resetCSS는 모든 스타일 값을 0으로 바꿔줍니다. 앞서 작성했던 수많은 HTML 태그들은 이미 스타일을 가지고 있습니다. ex. magin(마진), padding(패딩) 등 index.html, 채팅창의 검사(N)을 살펴보면, 헤더부분의 h1태그는 글자 크기와, margin, 마진이 따로 설정되어 있고, 네비게이션바에서 ul태그에서도 padding, margin의 값이 설정되어 있습니다. 위와 같이 스타일의 이미 설정되어 있는 값들을 사용하지 않고, reset하고 싶을 때(default값을 0으로 설정할 수 있지만..) resetCSS..
-
카카오톡 클론 코딩 #11 대화창이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 17. 01:21
이번시간에는 채팅목록을 누르면 넘어가는 대화창을 만들어 보도록 하겠습니다. chat.html을 만든 다음, settings.html의 내용들을 복사-붙여 넣어서 내용들을 수정해 줍니다. 먼저, head에 있는 title은 room으로 고쳐주고, header태그에서는 왼쪽 화살표에 연결되어 있는 하이퍼링크는 index.html로 변경해 주고, title은 사용자로, 돋보기 옆에는 三 아이콘도 추가(fontawesome이용) 해 줍니다. 채팅창의 목록을 클릭하면 대화창으로 넘어가게 만들어 주기 위해, 채팅 목록 부분을 하이퍼링크를 걸어줍니다. 이제 대화창의 main부분을 수정해 주겠습니다. 메시지는 목록화 되어 있기 때문에, ul태그를 이용해 줍니다. 여기서 대화창의 구성을 살펴 보면, 두 종류의 메시지, ..
-
카카오톡 클론 코딩 #10 설정창이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 16. 06:21
설정창은 각 창들의 상단의 위치한 톱니바퀴를 누르면 실행되는 창이기 때문에, 그럼 더보기창의 톱니바퀴를 눌렀을 때, 설정창으로 넘어가도록 more.html의 header부분의 톱니바퀴 아이콘에 하이퍼링크를 걸어 주겠습니다. (다른 창들의 톱니바퀴도 똑같이 수정해 주면 됩니다) 이제 설정창을 살펴 보면, 다른 창과 유사하게, 1> 상태표시줄, header, 그리고 2> 두 개의 목록들, 3> navigation bar로 이뤄져 있습니다. 위와 같이 만들어 주기 위해, more.html을 복사해서 settings.html에 붙여 넣은 후, 위쪽부터 차례대로 수정해 주도록 하겠습니다. 먼저 창의 타이틀, 제목을 바꿔주고,(더보기 -> 설정) 그리고 header에 위치한 title, 이름도 (더보기->설정으로)..
-
카카오톡 클론 코딩 #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 클래스로 만들어서 사용할 수 있습니다. 즉, 글로벌 스타일을 위한 파일을 만들어서, 웹사이트의 모든 곳, 어떠한 위치에도 영..