당신은 주제를 찾고 있습니까 “코코아 톡 – 코코아 클론코딩 V2.0 소개 | Introduction“? 다음 카테고리의 웹사이트 ppa.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.maxfit.vn/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 노마드 코더 Nomad Coders 이(가) 작성한 기사에는 조회수 10,313회 및 좋아요 81개 개의 좋아요가 있습니다.
코코아 톡 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 코코아 클론코딩 V2.0 소개 | Introduction – 코코아 톡 주제에 대한 세부정보를 참조하세요
(한글자막을 ON 해주세요!)
코코아톡의 프론트엔드를 클론코딩합니다.
이를 통해 기초 지식인 html, css 를 배울 수 있어요!
.
.
Youtube 구독은 사랑입니다 ❤️
니콜라스와 코딩 공부하기 👉🏻https://nomadcoders.co 👈🏻
노마드 코더가 궁금하다면? 💃 https://linktr.ee/nomad_coders 💃
코코아 톡 주제에 대한 자세한 내용은 여기를 참조하세요.
코코아톡 클론 코딩 – 노마드 코더 Nomad Coders
클론코딩은 인스타그램, 카카오톡, 유튜브 등등 실제 서비스를 따라 만들면서 배우는 공부 방식입니다. 실제 구현되어있는 서비스를 직접 내 손으로 한땀 한땀 따라 만들 …
Source: nomadcoders.co
Date Published: 12/28/2021
View: 3652
사람과 세상을 향한 모든 연결의 시작, 카카오톡
학생, 직장인, 다양한 연령의 사람들이 핸드폰으로 카카오톡을 하고 있는. 카카오톡 심볼. 사람과 세상, 그 이상을 연결하는 카카오톡 전 우주 통신규약을 꿈꾸는
Source: www.kakaocorp.com
Date Published: 11/1/2022
View: 8558
노마드코더 코코아톡 클론코딩 솔직한 수강후기 (수강난이도 …
나는 코코아톡 강의 수강 후 챌린지를 도전해 챌린지 수강증도 같이 받은 상태이다. “코코아톡 클론코딩”은 노마드코더에서 수업을 시작하려면 필수로 …
Source: bangsil.tistory.com
Date Published: 4/16/2022
View: 8143
[HTML, CSS] 코코아톡 클론 코딩 수강 완료 리뷰(광고 아님)
드디어 코코아톡 클론 코딩의 95개 강의 수강을 모두 완료했습니다! 혹시 보셨을지 모르겠지만 수강 완료한 당일 블로그 모먼트도 올렸었는데요,.
Source: m.blog.naver.com
Date Published: 11/16/2022
View: 7451
코코아톡 클론코딩 :: 챌린지 후기 (18기) & 포트폴리오 공개
안녕하세요. 코딩하는 희야입니다 : ) 이번 주 월요일 15일동안 진행되었던 노마드코더 코코아톡 클론코딩 18기 챌린지가 드디어 종료되었습니다 …
Source: heeyasworld.tistory.com
Date Published: 4/30/2021
View: 7087
코코아톡 클론코딩 1일차 정리
: 노마드코더 코코아톡 클론코딩은 2주 기간의 챌린지가 있습니다. 이를 신청하면 2주간 매일 코드 문제나 퀴즈가 진행되며 완주시 타 강의 할인쿠폰(30%) …
Source: comp-jae.tistory.com
Date Published: 9/24/2022
View: 2980
코코아톡 클론코딩 #1 INTRODUCTION – velog
오늘부터 2주간 노마드코더에 코코아톡 클론코딩 챌린지를 시작하였다. 요즘 강제성이 부족해서 공부를 하는데 좀 자주 무너지는거같아서 나름에 강제성을 좀 부여해 …
Source: velog.io
Date Published: 12/2/2022
View: 9133
코코아콜백 – 카카오톡, 문자 콜백서비스 – Google Play 앱
[주요 기능] ⦁ 카카오 알림톡(카카오톡 메시지)을 통한 콜백 메시지 전송 ⦁ 문자(단문, 장문, 그림 문자)를 통한 콜백 메시지 전송Source: play.google.com
Date Published: 12/29/2022
View: 6701
[노마드코더]코코아톡 클론코딩 (8)(2021.1.8 ~ 9)
[노마드코더]코코아톡 클론코딩 (8)(2021.1.8 ~ 9). greedysiru 2021. 1. 9. 01:01. 본 내용은 해당 강의 토대로 작성. Cloning time. 1. more.html …Source: greedysiru.tistory.com
Date Published: 11/4/2022
View: 6593
주제와 관련된 이미지 코코아 톡
주제와 관련된 더 많은 사진을 참조하십시오 코코아 클론코딩 V2.0 소개 | Introduction. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 코코아 톡
- Author: 노마드 코더 Nomad Coders
- Views: 조회수 10,313회
- Likes: 좋아요 81개
- Date Published: 2019. 3. 25.
- Video Url link: https://www.youtube.com/watch?v=T0l6C6f6bEw
코코아톡 클론 코딩 – 노마드 코더 Nomad Coders
제공합니다 이 강의에서는 아래 자료들을 제공합니다
총 95 개의 동영상 강의
총 795 분 강의 분량
영어 강의라고 겁먹지 마세요!
전체 강의에 한글 자막을 제공합니다.
실시간 질의응답
니꼴라스 선생님이 직접 100% 답변합니다.
노마드코더 코코아톡 클론코딩 솔직한 수강후기 (수강난이도, 장단점)
반응형
본 포스팅은 직접 내 돈으로 수강하고 느낀 점을 정보공유 차원에서 적은 개인적인 후기입니다. 개인에 따라 느끼는 점이 다를 수 있습니다.
노마드코더 솔직한 수강후기를 올렸었는데, 그때 다하지 못한 이야기를 좀 더 자세히 해보려고 한다. 저번 후기에서는 노마드코더 플랫폼에 대한 이야기를 했다면, 이번에는 “코코아톡 클론코딩”수업에 관한 후기이다.
1. 노마드코더 “코코아톡 클론코딩” 수업은?
우선 내가 노마드코더에서 처음 들었던 강의는 바로 “코코아톡 클론코딩”이다.
노마드코더 코코아톡 수강증
노마드코더 코코아톡 수강 후 받는 수강증이다. 나는 코코아톡 강의 수강 후 챌린지를 도전해 챌린지 수강증도 같이 받은 상태이다.
“코코아톡 클론코딩”은 노마드코더에서 수업을 시작하려면 필수로 들어야 하는 수업이라고 생각하면 된다. 노마드코더은 결국 웹사이트/어플리케이션을 만드는 게 목적인데, 그 시작은 바로 HTML이기 때문이다.
“코코아톡 클론코딩”은 HTML, CSS를 배우는 수업이다. 정말 아무것도 모르는 쌩초보를 위해 아주 간단히 이야기해보자면, 기본 웹사이트를 만들려면 HTML, CSS, Javascript를 이용할 줄 알아야 한다.
HTML과 CSS에 대해서 이야기 하자면, HTML은 웹사이트를 만들고 어떤 구성 요소가 있는지 알려주는 수단, CSS는 이러한 웹사이트를 예쁘게 꾸밀 때 쓰는 도구라고 생각하면 된다. HTML을 사용할 줄 알면, 웹사이트를 만들 수 있지만, 이 것만으로는 fancy 한 웹사이트를 만들 수 없다. 그렇기 때문에 CSS도 같이 배워야 한다. 웹사이트를 만들기 위해서는 Javascript도 사용하기도 한다. 자바스크립트는 웹사이트를 똑똑하게 만들어주는 언어로 반응형을 넣을 때 사용된다.
“코코아톡 클론코딩”은 위의 3가지 중 HTML과 CSS의 기본을 배우는 강의라고 생각하면 된다. 그리고, HTML과 CSS를 배우는 것은 우리가 잘 아는 “카카오톡”을 똑같이 만들면서 배우게 된다. “카톡”을 그대로 따라 만든다고 어플 하나를 뚝딱 만든다는 의미가 아니라, 카카오톡과 똑같은 인터페이스를 웹사이트 버전으로 만든다고 생각하면 된다. 클릭하면 이동하고, 디자인은 어떻게 만들어지고 아이콘은 어떻게 배치하고 이런 것들을 만든다.
노마드코더 강의
또한, 코딩을 하는 사람이라면 당연히 알아야하는 Github에 대해서도 살짝 맛볼 수 있다. 이 점도 좋았던 점 중 하나이다.
2. 수강대상과 수강 난이도는?
그럼 “코코아톡 클론코딩”은 어느 정도의 실력을 가진 사람이 들어야 하는 수업일까? 나의 경우, 쌩초보의 수준은 아니고 패키지와 코딩을 배우긴 했지만 늘 독학이었고, 비전공자에 업무적으로 쓸 일도 없었기 때문에 프로젝트를 한 적은 없었다. 그러니까 코딩된 것을 읽으면 대략 유추는 할 수 있지만, 뭘 제대로 만들어 본 적은 없는 수준이었다.
이러한 나에게 이 강의만 보면 살짝 쉽다고 느껴졌다. 근데, 이것은 HTML과 CSS가 쉬운 것이지 수업이 쉬운 것이 아니다. 실제로 실습을 하면서 내가 직접 프로젝트를 하고 어떤 것을 끝낼 수 있는가?를 생각해봤을 때 그건 만만한 일이 아니었기 때문이다. 이 강의에서는 그런 것까지 배울 수 있었다.
노마드코더 코코아톡 클론코딩 교육과정 소개서
어느 정도 코딩의 경험이 있는 나의 느낌은 위와 같지만, 이 수업은 정말 코딩을 아예 한 번도 해본 적 없는 사람도 들을 수 있다. 그리고, 마음만 먹는다면 무난히 따라갈 수 있다. 하지만, 정말 쌩초보가 듣거나 코딩의 감각이 없는 사람이 시작한다면 살짝 어려울 수도 있었다. 처음에는 우선 처음이기 때문에 뭔가 자세한 느낌이라면, 뒤로 갈 수록 앞에 보다는 속도가 빠르기 때문에 다시 돌려보는 것도 필요할 수 있다.
3. 장단점과 그 밖의 이야기
장점은 너무나도 많다. 우선, 강의를 마치고 나면, 웹사이트를 하나 만들어낸 느낌이 확 오게 된다. 그리고, 그게 사실이다. 어떤 웹사이트를 시작하던 그 시작은 무조건 바로 이 HTML부터 시작을 해야 하고, 그런 점에서는 최고의 강의가 아닐까 생각한다.
간혹 전공자나 현업에서는 HTML과 CSS를 돈 주고 배운단 말이야? 라고 하는 사람들도 있을 수 있다. 하지만, 정말 쌩초보들은 “커리큘럼”이 확실한 “수업”을 원한다. 블로그나 유튜브에서 물론 공짜로 찾을 수 있다. 그러나, 이렇게 찾은 지식들이 맞는 것인지 아닌 것인지 판단을 할 정도의 지식을 가지고 있지 않다. 잘못된 정보로 배우느니 처음부터 차근차근 배워나가는 게 낫다.
그리고, 온라인 강의에 그래도 꽤나 돈 많이 쓰고 다닌다는 내가 평가하기로는 노마드코더의 “코코아톡 클론코딩” 강의는 초보에게는 정말 괜찮은 강의라고 생각이 들었다. 초보자들은 재미없는 함수와 문법을 자세히 듣느니, 이런 것도 배우면서, 직접 만들어 나가는 게 훨씬 흥미를 줄 수 있기 때문이다.
이러한 장점에도 불구하고, 약간의 단점은 뒤로 갈수록 어려워진다는 것이다. 어떤 강의든지 뒤로 가면 어려워질 수 밖에 없지만, 어느새 뒷부분 강의를 보다 보면, ‘아.. 만들 때 다시 봐야겠다.’라는 생각이 들면서 그냥 보게 된다.. 결국은 챌린지 때 다시 보게 되었지만…
노마드코더 챌린지 프로그램
노마드코더는 챌린지 프로그램을 같이 운영하는데, 강의와 짝꿍이라고 생각하면 된다. 챌린지 프로그램은 강의를 들었다면 공짜!! 2주 동안 힘든 챌린지를 통해서 매일매일 과제를 하다 보면, 실력이 쑥쑥 늘어가는 것을 느낄 수 있다. 위의 수강증의 “코코아 클론 2주 완성반”이 바로 “코코아톡 클론 코딩”의 챌린지 프로그램이다. 그리고, 강의를 들어야 챌린지를 도전할 수 있다. 챌린지의 마지막 과제가 바로 내가 만든 결과물 제출이기 때문에 결국은 강의를 끝까지 듣고 따라 할 수밖에 없다!
노마드코더의 “코코아톡 클론코딩”강의의 솔직한 후기를 적어보았다. 나로서는 이 수업은 그래도 추천하는 강의이다. 리뷰를 찾아보는 사람에게 조금이나마 도움이 되었으면 좋겠다.
참고할 글 :
2020/11/06 – [Learning/Data Science] – 노마드코더 후기 – 아마도 당분간 온라인코딩강의는 여기로 정착…
2020/10/29 – [Learning/Data Science] – 스파르타 코딩클럽 수강후기
반응형
[HTML, CSS] 코코아톡 클론 코딩 수강 완료 리뷰(광고 아님)
그렇다고 생각합니다. 저는 컴퓨터 언어에 대한 경험이 아예 없는 편은 아니라 정말로 제로베이스에서 시작하시는 분들의 입장까지는 포괄하지 못할지도 모르지만 HTML, CSS에서만큼은 다른 분들과 똑같이 완전한 제로 베이스였습니다.
정말로 초보자가 듣기에도 괜찮다고 생각한 이유는 크게 3가지인데요, 첫째는 니꼬의 강의, 둘째는 소스 코드, 셋째는 슬랙입니다. 니꼬가 정말로 이론부터 차근차근 설명해줍니다.(클론 코딩 전의 HTML, CSS 강의는 총 36강 정도 됩니다.) 외우면 좋은 것과 외울 필요 없는 것을 말해주고(대부분 외울 필요 없음), 비유도 자주 들어줍니다. 그리고 계속 써먹을 걸 알려주기 때문에 강의를 따라하다보면 잘 익히게 됩니다. 그리고 클론 코딩을 시작하면 매 강의마다 깃허브 소스 코드도 같이 올라와 있습니다. 나는 분명히 똑같이 했는데 왜 안되지?(←초보자들이 매번 하는 생각)하는 시점을 크게 줄여줍니다. 마지막으로 강의 못지 않게 유용했던 슬랙. 초보자에게 빛과 소금이 되어주시는 분들이 많이 계십니다. 질문을 올리면 답변해주십니다. 역시 초보자의 좋은 점은 나를 가르쳐줄 수 있는 사람이 엄청 많다는 것입니다. 챌린저 분들의 결과물도 보고 다른 분들의 대화도 들을 수 있는…행복한 커뮤니티입니다.
첨언이지만 만든 결과물을 깃허브의 웹 호스팅을 통해서 진짜 웹주소로 받아볼 수 있는데요, 이걸 또 보여주러 다니는 맛이…
노마드코더 :: 코코아톡 클론코딩 :: 챌린지 후기 (18기) & 포트폴리오 공개
반응형
안녕하세요. 코딩하는 희야입니다 : )
이번 주 월요일 15일동안 진행되었던
노마드코더 코코아톡 클론코딩 18기 챌린지가
드디어 종료되었습니다 : )
일단 정말 챌린지는 빡셉니다.
강의 10만원 주고 구매하고나서
1회로 듣는 분들이라면 솔직히 챌린지
끝까지 2주 과제하는 건 성공 가능할 거
같기는 하고, 그 코드 챌린지들이
생각보다 꽤나 빡세기 때문에
확실히 실력도 많이 느는 기분이었습니다.
코코아톡 클론코딩 친구목록 & 채팅목록 창 구현
하지만, 챌린지 수행을 하기 위해서
들어야 하는 강의 내용 부분들은
마지막 졸업작품, 즉 본인만의 코코아톡
작품을 만드는 클론코딩 단계 이전까지의
수업들로 구성이 되어 있고,
클론코딩 단계 자체가 꽤나 강의의
러닝타임이 길기 때문에
모든 코드 챌린지들을 다 우수하게
참여하시는 분들이 마지막 졸업작품
단계에서 시간 부족으로 인해서
다음 번 챌린지 재도전하겠가고
드랍하시는 경우가 많아 보였습니다ㅠㅠ
코코아톡 클론코딩 나에게 채팅창, 친구와의 채팅창 구현
저는 강의 듣기 전에 이미 90% 정도
클론코딩까지 강의를 다 듣고
니꼬 샘이 만든 내용과 거의 흡사한
웹사이트를 만들어본 상황이었고
챌린지 과제를 하면서도 처음부터 다시
제가 만들고 싶은 Fit Talk 이라는 웹을
만들면서 진행했기 때문에
15일 총 챌린지 기간이 끝나기 전
14일만에 내용을 끝낸 후 사이트를
업로드할 수 있었습니다.
코코아톡 클론코딩 find & info 창 구현
하지만, 15일차 마지막날 동안
하나 더 추가로 만들어보고 싶은 페이지가
있어서 클론코딩 내용에는 없었지만
네이버 밴드 어플의 동호회별 게시판
탭을 참고해서 페이지들을 여러장
추가작업하고 마무리했습니다 : )
fit talk 로그인 & 회원 가입 창
덕분에 정말 저로서는 너무나도
만족스러운 첫 웹사이트 포트폴리오
하나를 완성할 수 있었구요!!
fit talk 친구목록 & 채팅목록 & 채팅창 구현
현재는 그 다음 단계인 JS(JavaScript)
강의를 듣고 있고 거의 마무리 단계까지
예습이 끝나가고 있습니다.
fit talk 운동 관련 창(오늘의 운동/베스트 운동그룹/운동 아티클) & 운동 동호회 상세 게시판(네이버 밴드 참고)
프론트엔드 개발자를 꿈꾼다면
일단 기본중 기본으로 HTML, CSS 그리고
JS 까지는 반드시 공부를 해야 하는데요.
노마드코더에선 JS 강의는 아예 무료로
제공해주고 계시고 챌린지 역시도 다음 주
월요일(이틀 뒤)부터 시작인데
이 역시도 무료라서 넘 좋습니다ㅠㅠ!
fit talk info창 & 설정창 구현
코코아톡 예습기간 약 1주 + 실제 챌린지 약 2주
정도 한 다음에 또 JS 예습기간 약 1주 +
실제 챌린지 약 2주 이렇게 6주동안
아주아주 알차고 빡시게 내용들을 즐겁게
배울 수 있는데다가 결과물도 총 두 개
만들어 낼 수 있다는…!!!!!!!!!
그럼 저는 제가 만든 두 가지 웹사이트
1. 니꼬샘 코코아톡 클론코딩과 거의 유사한 작품
2. 제가 만들고 싶은 Fit Talk 이라는 작품
: 운동하는 사람들을 위한 채팅 앱 컨셉으로
운동 동호회 탭이 있어서 같은 운동을 하는
사람들끼리 커네션이 생겨나고
운동 친구들, 운동 정보, 구매, 정보 등을
한 번에 볼 수 있는 메신저 서비스.
이렇게 두 가지 사이트 주소도 올려볼게요!!
어떻게 만들었는지 한 번 직접 클릭해보시고,
(애니이션도 꽤 많이 넣었어요ㅋㅋㅋㅋ)
로그인 페이지는 실제 가입하실 필요가 전혀 없고
아이디 랜덤으로 아무 말이나 넣으시고
비밀번호 역시 아무 말이나 10자리 이상만 넣으시면
링크 바로 넘어갑니다 : )
1. 강의 결과물 : )
이 강의들으면 누구나 만들 수 있음! 😆
https://heeyasworld.github.io/kokoa-clone-2021
2. 이게 저의 “찐 HTML, CSS 포트폴리오!” 🥰
https://heeyasworld.github.io/fit-talk
그럼 또 약 2주 뒤에는 노마드코더 JS 강의
완강 후기 & 포트폴리오 후기 가지고 올게요! 헷!
결론 : 강추! 10만원 조금 넘는 금액으로
HTML, CSS, JS까지 6주 뽀개개 갑시다!!
반응형
개발자를 희망하는 초보개발자의 자기개발 이야기
반응형
코코아톡 클론코딩 1일차 정리(#1.3~ #1.7)
Welcome
: HTML과 CSS를 기초부터 배울 수 있습니다. 애니메이션 효과, flex, 미디어쿼리, 깃 등에 대해서 배우게 됩니다.
Software Ruquirements
: 이 수업을 위해서는 3가지 프로그램이 필요하며 모두 무료입니다.
Join the Challenge
: 노마드코더 코코아톡 클론코딩은 2주 기간의 챌린지가 있습니다. 이를 신청하면 2주간 매일 코드 문제나 퀴즈가 진행되며 완주시 타 강의 할인쿠폰(30%) + 노마드코더 뱃지 + 수료증을 획득할 수 있습니다.
What Makes a Website?
: 웹사이트는 제목, 본문, 이미지로 구성된 text입니다. 우리가 배울 건 알맞게 text를 쓴다면 우리도 직접 웹사이트를 만들 수 있습니다. 어떤 종류의 text를 써야하고 어디에 써야하는지를 배워서 브라우저로 전달하면 브라우저가 텍스트를 해석해 웹사이트를 만들어줍니다.
What is HTML
– 웹사이트를 만들 때 사용하는 언어(text)는 최소 1가지~ 최대 3가지 입니다. 기본 구성은 HTML, CSS, JAVASCRIPT(이하 JS)입니다.
– 이 중 HTML은 Markup Language로 컨텐츠가 어떤 구성인지 명시해주는 역할을 합니다.
What is CSS
– CSS는 HTML을 꾸며주기 위해 쓰는 Design Language 입니다.
– HTML은 ‘이건 제목이야’ 라고 알려주는 역할이라면, CSS는 ‘제목은 글자가 빨간색에 크기가 16px이야’ 같은 내용을 지정합니다.
출처
반응형
카카오톡, 문자 콜백서비스
[주요 기능]⦁ 카카오 알림톡(카카오톡 메시지)을 통한 콜백 메시지 전송
⦁ 문자(단문, 장문, 그림 문자)를 통한 콜백 메시지 전송
⦁ 스마트폰, 유선전화(LG 센트릭스) 콜백 지원
⦁ 상황별(수신, 발신, 부재중) 메시지 자동 전송
⦁ 스케줄 기능(요일/시간대 설정, 동일번호 발송 횟수 제한)
⦁ 콜백 메시지 전송 연락처, 그룹별 관리
⦁ 단체(전체 or 그룹) 메시지, 수동 발송 기능
⦁ 발신 제외번호 관리
⦁ 다양한 첨부 이미지+이미지 제작 지원
※ 카카오톡으로 콜백 메시지를 발송하면 좋은 점은?
1. 문자 메시지보다 확인율이 높다.
2. 사용자의 카카오톡 채널 추가를 유도할 수 있다.
(마케팅 메시지를 받을 수 있는 가망 고객으로 전환)
3. 채널 추가한 대상자에게 마케팅 메시지를 발송할 수 있다.
(매출을 높일 수 있는 저비용 고효율 채널)
[필수 접근 권한]⦁ 전화 – 메시지 발송 대상 전화 번호 확인을 위해 접근 필요
⦁ 저장 – 공유 저장 공간의 콘텐츠 저장을 위해 접근 필요
⦁ 주소록 (연락처) – 전송 내역 관리를 위해 접근 필요
⦁ SMS – 단문, 장문, 그림 문자의 전송을 위해 접근 필요
[고객센터를 통해 도움 받으세요]⦁ 코코아콜백, 서비스 이용 문의
⦁ 카카오톡 채널 및 알림톡 등록 지원
⦁ 맞춤형 이미지, 무료 제작 지원
[고객센터]⦁ 상담시간 : 월~금요일 09:30~18:30
⦁ 상담전화 : 1544-0630
업데이트 날짜 2021. 6. 20.
[노마드코더]코코아톡 클론코딩 (8)(2021.1.8 ~ 9)
본 내용은 해당 강의 토대로 작성
Cloning time
1. more.html
More Screen part One
chats.html을 토대로 코드 작성하기 margin, padding 페이지에 맞게 조절
.more-screen .icon-row { margin-top: 35px; } .more-suggestions { margin-top: 50px; border-top: var(–main-border); padding-top: 40px; } .more-suggestions__title { margin-bottom: 30px; }
자주 사용되는 find-icon 컴포넌트화 하기 css/components/icon-row.css에 icon-row 클래스명으로 정리 styles.css에 import
.icon-row { display: flex; justify-content: space-between; } .icon-row__icon { display: flex; flex-direction: column; align-items: center; } .icon-row__icon i { font-size: 35px; } .icon-row span { margin-top: 18px; }
More Screen part Two
카카오 아이콘 설정
하단의 카카오 스토리 아이콘을 만든다.
css/screens/more.css
.more-suggestions__icons { display: flex; margin-top: 30px; } .more-suggestions__icon { margin-right: 30px; display: flex; flex-direction: column; align-items: center; } .more-suggestions__icon-image { width: 60px; height: 60px; background-color: var(–yellow); border-radius: 10px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .more-suggestions__icon-image i { font-size: 32px; color: whitesmoke; }
완성된 페이지
2. settings.html
settings.html 링크 추가하기
more.html의 cog 그림에 settings로 이어지는 링크를 추가한다.
Settings Screen part One
more.html 토대로 코드 작성하기 삭제할것, 수정할것 처리 CSS코드 작성 후 import하기
.settings__setting { padding: 20px 0; border-bottom: var(–main-border); font-size: 18px; display: flex; align-items: center; } .settings__setting i { opacity: 0.8; margin-right: 20px; font-size: 22px; } .settings__setting { display: flex; } .settings__setting span:first-child { margin-right: 20px; }
header component 작성하기
.alt-header { display: flex; align-items: center; padding: var(–horizontal-space); margin: 15px 0px; justify-content: center; } .alt-header__title { font-size: 28px; font-weight: 600; } .alt-header__column:first-child { margin-right: auto; } .alt-header__column:last-child { margin-left: auto; }
Settings Screen End
main 리스트 column 추가
column을 추가하여 요소를 더 넣을 수 있게 한다.