천진난만 코딩 스토리
43. Splash Screen 만들기 (html,css - Splash 화면 1) 본문
1 ) splash-screen 생성하기
friends.html 파일의
nav-bar 밑에 splash-screen을 만들어줌.
박스 안에 채워진 채팅창 아이콘만 넣어주면 됨!
아이콘이 추가된 것을 볼 수 있음.
2) 배경색 넣기
기존에 사용하던 노락색을 불러와서 적용함.
아이콘 주변에 배경색이 생김.
3) 배경색 키우기
absolute 하고
너비와 높이를 지정해줌.
vh는 height의 100% 이고,
vw는 width의 100%임.
배경색이 커짐!
top을 0으로 해줌.
아이콘과 배경이 모든 것을 가려버림.
4) 아이콘 위치조정하기
flex하고 가로 세로 모두 중앙으로 맞춰줌.
아이콘이 화면 중앙으로 감.
아이콘 사이즈를 크게 키워줌.
아이콘이 커짐.
'노마드코더 > 코코아톡 클론코딩' 카테고리의 다른 글
45. Navigation Animation 만들기 (html,css - Navigation Animation ) (0) | 2022.12.11 |
---|---|
44. Splash Screen 만들기 (html,css - Splash 화면 2) (0) | 2022.12.11 |
42. Chat Screen 화면 만들기 (html,css - Write Message Input ) (0) | 2022.12.11 |
41. Chat Screen 화면 만들기 (html,css - 채팅화면 5) (0) | 2022.12.09 |
40. Chat Screen 화면 만들기 (html,css - 채팅화면 4) (0) | 2022.12.09 |