HTML CSS62 Day1: HTML 입문 1 HTML 프로그램 언어가 아닌 Markup Language_태그 를 이용해 어떠한 요소를 화면에 표시하고 구성 태그의 요소 inline: 연달아 작성된 태그는 서로 같은 줄에 표시 block: 연달아 작성된 태그는 서로 다른 줄에 표시_앞선 태그가 표시되면 그 다음줄에 다음 태그가 표시 - 제목 태그 head 에 태그를 작성하여 상단 탭에 출력됨 출력: Block element block의 성질을 갖고있는 ~ 과 태그를 사용해 작성 출력: 출력: Inline element inline의 성질을 갖고있는 태그를 사용 출력: 태그 출력: 이 태그를 사용하면 글꼴이 이탤릭체로 적용됨 특수문자 리스트 HTML Standard HTMLLiving Standard — Last Updated 10 June 2021 .. 2021. 6. 12. KokoaTalk Clone Coding: more(animation) 2 chat-room 에서 수신하는 message는 message-row가 왼쪽에서 나타나도록 animation translate를 이용해서 x축으로 움직임 발신하는 message는 message-row--own이 오른쪽에서 나타나도록 animation 앞서 실행한 message-row가 실행되고 이후에 실행되도록 실행시간만큼 animation을 지연시켜주고, 그동안 보이지 않도록 default를 opacity: 0; 으로 설정하고 forwards로 마지막 설정을 기억 완성 focus-within: reply 내부에 focus 된 element가 있는지 확인 만약 reply에서 어떠한 element 가 focus 되어 있다면, 앞의 내용이 참이 되면서 뒤에 내용을 실행함 reply 내부에서 어떠한 eleme.. 2021. 6. 8. KokoaTalk Clone Coding: more(animation) 1 screen-header의 setting icon에 마우스를 올려놓으면, 회전할 수 있도록 animation 생성 회전하려면 z축을 따라 rotate 시켜야 함 setting icon의 클래스를 찾아 작성 from-to 단계로 아무것도 실행되지 않는 상태에서 회전하는 상태로 변경 완성 heart icon 위에 마우스를 올려놓으면 심장이 뛰는 것 처럼 animation 생성 animation이 실행되면 실행 할 내용이 없는 상태 - 실행 - 실행 할 내용이 없는 상태 3단계를 거침 실행할 내용: 색이 변하면서 크기가 커지면 심장이 뛰는 것처럼 표현됨 크기가 커지는 과정에서 icon에 위치가 약간씩 변하는 움직임이 생김 will-change 를 통해 브라우저에게 변화가 생길 것임을 알려줄 수 있음 완성 2021. 6. 8. KokoaTalk Clone Coding: navigation screen(animation) navigation-bar에 animation nav__notification 알림에 animation 3단계로 나눠서 y축을따라 움직이고, 회전하는 animation 작성 animation 실행 조정 nav__btn에 animation 아래에서부터 위로 올라오는 animation 작성 4개의 icon이 하나씩 위로 올라오도록 조정 첫번 째 icon을 제외한 다음 icon들의 animation을 지연 → animation이 시작하고 0.5초 동안 두번 째 icon은 animation이 없음 모든 icon이 위에 고정되어 있는 상태에서 animation이 시작하면 아래에서 위로 올라오도록 설정되어 있는 것을 아래에 고정시키고 위로 올라오게 조정 from에 있던 내용을 nav__btn으로 옮겨서 animat.. 2021. 6. 4. KokoaTalk Clone Coding: splash screen(animation) splash screen html css 작성 friends screen이 나타나기 전에 애니메이션으로 1초간 나타나고 사라지면서 friends screen이 나타남 → friends screen과 다른 레이어를 구성해서 friends screen 위에 화면이 나타나고 사라짐 splash-screen을 script 전, 마지막 부분에 작성 position: absolute; 로 작성하면 앞서 작성한 friends.html과 다른 레이어로 작성됨 position: relative; 작성 없이 body를 기준으로 정렬되도록 함 높이와 너비를 100으로 작성해 모든 화면에 100% 로 차지하도록 함 icon을 가운데 위치하게하고, 크기 조정 이제 위에서 만든 레이어를 사라지게 만들면서 friends scree.. 2021. 6. 1. KokoaTalk Clone Coding: chat-room screen 3 chat-room lower screen html css 작성 입력창을 form으로 작성하고 플러스 icon과 메세지창 두 열로 나눠줌 reply 창을 아래쪽에 고정시켜줌 input 으로 들어간 메세지 입력창에 너비를 100%로 주기위해서 각 column에도 너비를 줘야함 첫번째 column은 너비를 주면서 위치를 움직일 필요가 없고, 두번째 column의 icon들은 위치를 원하는 만큼 움직이기 위해서 먼저 position: absolute; 를 작성하고 적용될 icon에 position: absolute; 를 작성 → 위치를 원하는 만큼 움직임 icon에 opacity 조정해서 흐리게 만들고 button은 opicity: 1; 로 조정 아래 입력창은 완성 입력창 아래 키보드는 모바일에서 입력되는 키보.. 2021. 6. 1. 이전 1 2 3 4 5 ··· 11 다음
