천진난만 코딩 스토리

1 ) no-mobile 생성하기 모든 html 파일에 no-mobile 박스를 작성해줌. no-mobile.css 파일을 만들고 import 해줌. 2) no-mobile 스타일하기 no-mobile 박스에 노란색의 배경을 주고 absolute하여 위치를 어디든 바꿀 수 있게 함. z-index: 99; 를 하여 다른 화면이 위로 못 올라오게 함. 높이와 너비를 100%로 주고 top:0; 을 하여 맨 위로 올림. flex 를 하고 텍스트를 중앙으로 옮기고 텍스트의 크기를 키움. 노란색 배경의 문구가 모든 화면의 맨 앞에 잘 나타남. 3) media query @media screen and (max-width: 580px)를 하여 화면이 580px보다 클 경우를 선택함. 이 경우에 no-mobile ..

1 ) 설정 아이콘 돌아가게 하기 screen-header에 있는 설정 아이콘에 z축으로 360도 빙글빙글 돌아가는 애니메이션을 1초동안 계속 재생되게 함. 설정 아이콘이 빙글빙글 돌아감. 2 ) 커서가 올라가면 돌아가게 하기 마우스 커서가 아이콘 위에 올라간 hover 상태일때만 애니메이션이 재생되게 함. 마우스 커서가 올라가면 애니메이션이 재생됨. 3 ) 하트 심작박동 애니메이션 만들기 find 화면의 open chat 부분의 heart count의 heart 아이콘의 색이 하얀색에서 빨간색이 되는 애니메이션을 1초 동안 계속 재생되도록 함. 아이콘의 색이 계속 변하는 것을 볼 수 있음. 4 ) 하트 크기 키우기 아이콘의 크기가 빨간색일때 크게 되도록 만듬. 아이콘이 빨간색일때 커지지만 흔들리며 불안..

1 ) notification에 애니메이션 넣기 notificaion이 위로 올라가는 애니메이션을 만들어서 2초동안 계속 재생되도록 함. notification이 위로 올라갔다 아래로 내려오는 것을 반복하고 있는 모습이 보임. notification이 위아래로 움직이면서 빙글빙글 돌도록 함. notification이 위아래로 움직이면서 빙글빙글 도는 것을 볼 수 있음. 2 ) navigation bar에 애니메이션 넣기 navigation bar가 아래에서 투명하게 있다가 위로 올라오며 진해지도록 만듬. navigation bar가 아래에서 점점 진해지며 올라옴. 3 ) 각 버튼 하나씩 움직이기 두번째에 조금의 딜레이를 세번째에는 조금 더 마지막에 조금 더 딜레이되게 하여 순서대로 차례로 올라오도록 함...

1) 애니메이션 주기 에니매이션을 만들고 splash 화면에 적용함. 이 애니메이션은 진하기가 1에서 0으로 가는 애니메이션을 1초 동안 줌. 애니메이션이 진행됨. 2) 애니메이션 마지막 속성 유지하기 forwards는 마지막 속성 값을 애니메이션이 끝나도 유지하게 함 애니메이션이 끝나면 opacity:1로 돌아가는게 아니라 opacity:0이 애니메이션이 끝나도 유지됨. 하지만 화면에서 완전히 사라지는 것이 아님. 마지막 투명도를 높여서 확인해보면 이렇게 완전히 사라진 것이 아닌 화면에 남아있는 것을 볼 수 있음. 그렇기에 클릭이 되지 않음. 3) 화면 숨기기 visibility: hidden을 해주어 화면을 숨겨줌. 클릭도 되고 화면에서 보이지 않지만 브라우저에서 완전히 사라진 것은 아님. 검사를 눌..

1 ) splash-screen 생성하기 friends.html 파일의 nav-bar 밑에 splash-screen을 만들어줌. 박스 안에 채워진 채팅창 아이콘만 넣어주면 됨! 아이콘이 추가된 것을 볼 수 있음. 2) 배경색 넣기 기존에 사용하던 노락색을 불러와서 적용함. 아이콘 주변에 배경색이 생김. 3) 배경색 키우기 absolute 하고 너비와 높이를 지정해줌. vh는 height의 100% 이고, vw는 width의 100%임. 배경색이 커짐! top을 0으로 해줌. 아이콘과 배경이 모든 것을 가려버림. 4) 아이콘 위치조정하기 flex하고 가로 세로 모두 중앙으로 맞춰줌. 아이콘이 화면 중앙으로 감. 아이콘 사이즈를 크게 키워줌. 아이콘이 커짐.

11) message input - html chat.html 파일의 main 코드 밑에 form을 만들어줌. message input이 만들어짐. 2) message input 스타일 하기 chat.css 파일에 form을 하단에 고정하고 배경색을 흰색으로 한 다음 일정한 간격을 두고 높낮이를 맞춤. padding도 줌. form이 하단에 고정된 채 스타일이 된 것을 볼 수 있음. 3) input width:100% 하기 input에 width:100%를 해줌. 적용이 되었지만 화면을 벗어나고 요상해진 모습이 됨. 그 이유는 column에 width를 설정하지 않았기 때문임. 그렇기에 + 아이콘이 있는 첫 column에는 10을 글자쓰는 칸과 그 외의 아이콘이 있는 column에는 90의 width를 ..

18) 반대쪽 메세지 버블 만들기 메세지 버블을 복사하여 밑에 붙여넣음. 메세지 버블이 두 개가 됨. 19) 스타일 변경하기 필요없는 부분인 이미지와 이름을 삭제함. 메세지 버블이랑 시간만 남음. 메세지 버블을 반대쪽으로 이동시킴. 두 개의 메세지 버블이 서로 반대쪽에 위치하게 됨. 메세지 버블이 반대로 이동하였으니 말풍선의 모양도 변경되어야 함. 색을 기존에 사용했었던 노란색으로 변경하고 기존에 0px인 부분은 다시 15px로 만들고 반대쪽에 0px을 줌. 두 메세지 버블의 모습이 다르게 됨. 20) 메세지 버블과 시간 위치 바꾸기 (order) 노란색 메세지 버블에 order:1을 해줌. 메세지 버블과 시간의 순서가 서로 바뀜. 현재 message__info는 flex 상태임. flex의 자식들에게는..

14) 메세지 버블 만들기 메세지 버블에 배경색을 주고 padding을 주고 모서리를 둥글게 함. 메세지 버블이 생김. 15) 시간 밑으로 내리기 flex 해주고 flex-end 해주어 밑으로 내림. 메세지 버블과 시간이 밑으로 조금 내려간 것을 볼 수 있음. 16) 시간 스타일 하기 시간을 메세지 버블과 약간의 거리를 두고 글자색을 연하게 하고 글자 크기를 키움. 이때 시간의 글자색과 크기는 이름과 동일함. 17) 메세지 버블 말풍선 모양으로 만들기 원하는 위치의 border를 선택하여 (border-top-left) radius를 0으로 해줌. 말풍선 처럼 변경된 것을 볼 수 있음. 글자 크기를 더 키워줌. 말풍선처럼 생긴 메세지 버블이 만들어짐!

11) 타임스탬프 스타일하기 타임스탬프의 배경색을 조금 더 어두운 색으로 변경하고 글자색과 글자크기를 변경함. padding을 주고 border를 둥글게 변경함. 타임스탬프의 스타일이 변경됨. main 파트에 flex를 하여 주축과 교차축을 바꾸어 요소들이 세로로 정렬되게 함. 주축과 교차축이 변경되었기 때문에 가로에서 중앙에 위치하게 하려면 align-items를 중앙으로 해주어야 함. 타임스탬프가 만들어짐. 12) 메세지 만들기 main의 타임스탬프 코드 밑에 메세지 코드를 작성함. 프로필 사진과 닉네임, 대화내용과 시간을 작성해줌. 작성한 것들이 나타남. 13) 메세지 스타일 변경하기 이미지의 크기를 작게 줄이고 모서리를 둥글게 해줌. widht:100% 를 해주고 요소들이 가로로 위치해야 하기 때..

6) 스크롤을 만들기 위해 body의 길이를 매우 길게 만듬. 아이콘 사이에 공간을 주기 위해 아이콘을 감싸고 있는 span 중 두 번째 아이콘을 지정하기 위해 span:last child를 해주어 공간을 줌. 이 header는 스크롤이 내려가도 상단에 위치해야 하기 때문에 fixed를 하여 고정해줌. 적용이 되었지만 fixed를 하며 header의 간격이 이상해짐. 이를 해결하기 위해 먼저 margin을 설정해주고 box-sizing: border-box를 하여 border 안에 요소들이 전부 위치하게 함. 적용하였지만 중앙에 위치해야 하는 제목이 치우쳐져 위치하게 됨. 7) 간격 다시 조정하여 정렬하기 균등한 공간을 먼저 배부함. 공간이 일정하게 주어짐. 마지막 column:last-child 인 오..