클론코딩/노마드코더 코코아톡10 [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #8 마무리 깃허브 https://github.com/211dbwls/clone-coding_kokoatalk GitHub - 211dbwls/clone-coding_kokoatalk Contribute to 211dbwls/clone-coding_kokoatalk development by creating an account on GitHub. github.com 결과물 https://211dbwls.github.io/clone-coding_kokoatalk/ KokoaTalk Clone No Service 10:04 95% 211dbwls.github.io 2022. 10. 4. [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #7 수정 및 추가 기능 구현 naviagtion-bar에 내용 잘리는 부분 수정 - 스크린 부분에 margin-bottom: 80px 추가. 2022. 9. 30. [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #8 Splash Screen, Animations, No Mobile Splash Screen - 화면 생성 - splash screen 생성. (friends.html) (friends.css) ... #splash-screen { background-color: var(--yellow); position: absolute; height: 100vh; width: 100vw; top : 0; display: flex; justify-content: center; align-items: center; font-size: 132px; } Splash Screen - 애니메이션 추가 - SplashScreen 사라지도록 애니메이션 추가. - forwards : 마지막 속성 값을 애니메이션이 끝나고 유지함. → opacity : 0으로 남아있음. → 클릭을 해도 실행되지 않음,.. 2022. 9. 30. [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #7 수정 및 추가 기능 구현 navigation-bar 아이콘 색 변경 - 화면에 해당하는 navigatoin-bar 아이콘 색 변경. (nav-bar.css) ... .nav__link { position: relative; color: rgba(0, 0, 0, 0.3) } .nav__link--click { color: #2e363e; } - 해당하는 링크에 nav__link--click 클래스 추가. Chats Screen - header 아이콘 변경 (chats.html) Chats Chats Screen - 채팅방 추가 (chats.html) Hani Good Day~~ 10:04 1 Wendy Thanks! 08:08 Chat Screen - 채팅 내용 추가 - 채팅 내용 추가. (chat.html) Monday, Jun.. 2022. 9. 29. [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #6 Setting Screen, Chat Screen Setting Screen - header (setting.html) Settings - 재사용 가능하도록 따로 파일 생성. (alt-screen-header.css) .alt-header { margin-top: 30px; padding: var(--horizontal-space); margin-bottom: 15px; display: flex; justify-content: center; align-items: center; } .alt-header__title { font-size: 26px; font-weight: 600; } .alt-header__column:first-child { margin-right: auto; } .alt-header__column:last-child { margin-.. 2022. 9. 28. [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #5 수정 및 추가 기능 구현 Sign Up Screen - 필수로 입력하도록 설정 (index.html) Find Kokoa Account or Password Friends Screen - header 아이콘 추가 및 아이콘 간의 간격 수정 (friends.html) Friends (screen-header.css) .screen-header__icons span { margin-left: 15px; } Friends Screen - 프로필 뮤직 추가 (friends.html) Smile:) After LIKE - IVE(아이브) (user-component.css) ... .user-component__music-box span { border: 2px solid #00cd3c; border-radius: 20px; paddin.. 2022. 9. 28. [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #4 Chats Screen, Find Screen, More Screen Chats Screen - navigation-bar 아이콘에 따라 링크 수정. - chats-screen에 맞게 navigation-bar의 아이콘, header의 text 및 아이콘, user-component 수정, - badge.css 따로 생성. 사용되는 부분에 badge 클래스 추가하여 적용. .badge { background-color: tomato; width: 26px; height: 26px; border-radius: 13px; display: flex; justify-content: center; align-items: center; color: white; font-weight: 600; } - user-component의 오른쪽 column 수정.(HTML) 시간, badge .. 2022. 9. 27. [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #3 Friends Screen Friends Screen - Navigation Bar(HTML) - 단축키 nav>ul>li*4>a → Enter : 안에 안에 4개와 한번에 생성됨. - Navigation Bar(HTML) 1 Friends Screen - Navigation Bar(CSS) - box-sizing: border-box; width와 padding을 같이 설정할 경우, 브라우저는 padding을 주고, 입력받은 width를 맞추기 위해 padding만큰 width를 늘리게 됨. 따라서 box 사이즈가 늘어나게 됨. → 이러한 현상을 없애기 위해 'box-sizing: border-box;'를 사용함. 'box-sizing: border-box;'은 padding은 상관없으니 box사이즈를 변경하지 말라는 것을 의미.. 2022. 9. 26. 이전 1 2 다음
