프로젝트/코코아톡 클론코딩10 [코코아톡 클론코딩] animation 추가, 완료 animation 효과 목록 1. 채팅 alarm bounce 2. 채팅 메세지 나타내기 3. gear spin bounce, spin 애니메이션은 아래 링크 속에서 마음에 드는 것을 골라 조정하였다. https://codepen.io/nelledejones/pen/gOOPWrK CSS Bounce-in Animation ... codepen.io 그리고 모바일이 아닐 때 화면을 모바일처럼 줄여달라는 메시지를 보이게 만들었다. 드디어 github의 무료 호스팅을 통해 웹페이지를 공유한다. 링크: https://soaringwave.github.io/html-JS-css/kokoa-talk/ Welcome to Kokoa Talk No Service 12:00 178% soaringwave.github.i.. 2023. 1. 13. [노마드스터디] 주간회고록 2주차 이번 주 목표 [x] 내가 만들 것 화면 구성과 기능 기록하기 [ ] 코코아톡 클론코딩 완료하기 [x] 블로그에도 정리 꾸준히 하기 [x] ai 해커톤 찾아보기 이번 주 결과 이번주 주말까지 코코아톡 완료할 수 있다 (목요일 기준) 코코아톡 6.35까지 수강 완료 만들고 싶은 것 화면 구성 및 기능 정리 과제 모두 완료! 😭 버리거나 고쳐야하는 것 모르는 것을 계속 붙잡고 진행을 늦추지 말자 작은 디테일에 연연해 하지 말자 style을 한 파일로 방치하지 말자 하나의 답이 있다고 생각하지 말자 😎 계속 해야 할 것 꾸준히 과제 완료하자 구조적으로 이해하고 큰 덩이부터 만들어 나가자 내 일과를 조절하여 매일 수강하자 💬 공유하고 싶은 고민이나 질문 강의를 파트를 나눠서 수강한 후 코드는 보지 않고 작성한다.. 2023. 1. 13. [코코아톡 클론코딩] chat page, splash screen 완료 + 디버깅 완료 - chat 페이지의 상대방, 본인의 채팅을 나타냈다. - 메시지를 입력하거나 다른 미디어를 전달하는 input을 만들었다. - friends 페이지로 이동하면 잠깐 나타나는 splash screen을 만들었다. - animation 속성을 추가하여 짧은 시간 동안 보이고 사라지게 만들었다. 디버깅 한 것 - more 페이지의 노란 아이콘들을 위의 icons-row와 동일하게 배치하였다. - 휴대폰의 상태를 나타내는 status-bar에 box-sizing 속성을 추가하여 body 안에 표현되도록 했다. - 마찬가지로 chat, settings에 나타나는 screen-header-alt 바도 body 안에 표현되도록 하고, 위치를 조정했다. - status, screen-header-alt 바가 각 페이.. 2023. 1. 12. [코코아톡 클론코딩] setting, chat page 구현, 상태 바 디버깅 (디버깅을 위해 특정 영역에 배경색을 입혀주었다) - settings 안의 이모티콘과 글자들을 배열해줬다. - more 페이지로 이동할 수 있도록 screen header alt 바를 만들었다. - 바가 스크롤이 바뀌어도 존재하도록 position을 조정했다. - chats 페이지에서 개별 chat 페이지로 이동할 수 있도록 만들었다. - chat 페이지에도 screen header alt 바를 추가했다. - 배경 색을 조정했다. 디버깅 완료 relative로 위치시킨 아이콘들이 겹쳐 보이는 것을 z-index로 해결했다. status 바의 z-index를 높게 설정하여 가장 위에 드러나도록 바꿔주었다. 디버깅 필요 - chat과 settings의 위는 거의 같은데 화면에서는 다르게 표현된다. - set.. 2023. 1. 12. 이전 1 2 3 다음
