programming study/Clone coding (11) 썸네일형 리스트형 [노마드코더]코코아톡 클론코딩 (11)(2021.1.11) 본 내용은 해당 강의 토대로 작성 Publishing our website 1. Branches on Git Branch는 코드의 평행세계와 같다. 검증된 코드는 Master에 저장 기능 추가, 시험은 Branch에서 시행 원하는 Branch를 Master와 합칠 수 있다. GitHub Desktop에서 원하는 Branch를 이동하며 코드를 작업할 수 있다. 여러 사람과 Project를 할 때 유용하다. 2. Publisihing on Gihub pages gh-pages 라는 이름의 Branch를 가지고 있으면 Github에서 무료 hosting을 지원한다. URL(유저이름.github.io/저장소이름)이 생성된다. Static 웹 사이트인 경우에만 지원 HTML, CSS, JavaScript로만 이루.. [노마드코더]코코아톡 클론코딩 (10)(2021.1.10) 본 내용은 해당 강의 토대로 작성 Clonning time 1. Splash Screen 로딩화면을 구현한다. 사라지는 효과를 넣는다. Splash Screen part One 첫 화면인 friends.html에 구현한다. 하단에 독립적인 div를 만든다. Splash Screen CSS 화면 전제를 채울 수 있도록 한다. #splash-screen { background-color: var(--yellow); position: absolute; height: 100vh; width: 100vw; top: 0px; display: flex; justify-content: center; align-items: center; font-size: 132px; } 모든 layer의 위로 오게 하기 위해서 pos.. [노마드코더]코코아톡 클론코딩 (9)(2021.1.9 ~ 10) 본 내용은 해당 강의 토대로 작성 Cloning time chat.html Chat Screen part One settings.html을 토대로 코드 작성한다. 목표와 비교하며 수정, 삭제 html을 기반으로 필요한 CSS 코드 작성 import 꼭 하기 chats.html 링크 chats.html 에서 특정 대화를 누르면 대화창이 뜨도록 구현한다. 그러므로 chats.html의 component에 아래와 같이 링크를 설정한다. Jaemin My nickname is greedysiru 12:00 1 Background color 설정 대화창의 배경 색상을 설정한다. css/screens/chat.css .mgr { margin-right: 25px; } #chat-screen { background-.. [노마드코더]코코아톡 클론코딩 (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 ... [노마드코더]코코아톡 클론코딩 (7)(2021.1.8) 본 내용은 해당 강의 토대로 작성 Cloning time 1. chats.html Chats Screen part One 이제부터는 전의 html코드를 가져와서 사용하므로 빠르게 진행할 수 있다. 목표로하는 페이지의 모습에 맞게 header와 icon들을 적절한 것들로 바꾼다. 상단 icon 추가 하단 chat icon 채워짐 효과(다른 icon으로 대체) 하단 friends icon 비워짐 효과(다른 icon으로 대체) subtitle 추가 및 프로필 삭제 등 margin, padding을 조절한다. Chats Screen part Two badge component 지난 시간에 만들었던 badge는 이번 페이지에도 사용되므로 component화 한다. css/components/badge.css 에 .. [노마드코더]코코아톡 클론코딩 (6)(2021.1.7 ~ 8) 본 내용은 해당 강의 토대로 작성 Cloning time friends.html Friends 페이지를 Cloning한다. Navigation bar VSC 단축키 nav>ul>li>*4>a 위 단축키를 입력하면, 아래의 html 코드가 생성 html 코드 작성 Navigation bar의 기본 html 코드를 작성한다. BEM 작명법을 사용한다. CSS 코드 작성 componetns 폴더 아래에 nav-bar.css를 생성하고 CSS 코드를 입력한다. styles.css에 꼭 @import 한다. .nav { background-color: #f9f9fa; padding: 20px 50px; border-top: 1px solid rgba(121, 121, 121, 0.3); } .nav__list {.. [노마드코더]코코아톡 클론코딩 (5)(2021.1.7) 본 내용은 해당 강의 토대로 작성 Git and Github Git: 파일의 변경 내역을 관리할 수 있다. Github : Git의 사항을 조회할 수 있다. Github Desktop : Github과 데스크톱을 연동한다. .gitignore : git으로 추적하고 싶지 않은 파일을 적어놓으면, 해당 파일을 무시된다. Cloning time 1. Introduction 카카오톡을 HTML과 CSS만으로 구현한다. 로딩 화면 회원 가입 페이지 친구 목록 페이지 대화 목록 페이지 검색 페이지 더보기 페이지 설정 페이지 채팅방 백엔드는 적용하지 않는다. 2. index.html 기본적으로, 대부분의 웹 서버는 index.html을 먼저 읽어 낸다. HTML과 CSS로 위 페이지를 Cloning 한다. 기본 구.. [노마드코더]코코아톡 클론코딩 (4)(2021.1.6) 본 내용은 해당 강의 토대로 작성 Advanced CSS 1. Transitions 어떤 상태에서 다른 상태로 변화할 때 애니메이션 효과를 줄 수 있다. 규칙 transitions는 state가 없는 요소에 붙어야 한다. 그렇지 않으면 자연스럽게 동작하지 않는다. state에 들어있는 것을 기준으로 애니메이션 효과를 준다 사용 예시 Go home a:hover에서 변경되는 것들을 기준으로 애니메이션 효과가 적용된다. color 1s ease-in-out 적용할 속성, 시간, 변화하는 방법 순으로 쓴다 바뀌는 모든 속성에 적용할 때는 all 1s ease-in-out을 쓴다. https://matthewlein.com/tools/ceaser 에서 다양한 변화 방법을 볼 수 있다. 자신이 원하는 Transi.. 이전 1 2 다음
