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