43. Splash Screen 만들기 (html,css - Splash 화면 1)

1 ) splash-screen 생성하기

friends.html 화면

friends.html 파일의 

nav-bar 밑에 splash-screen을 만들어줌.

박스 안에 채워진 채팅창 아이콘만 넣어주면 됨!

 

 

추가된 모습

아이콘이 추가된 것을 볼 수 있음.

 

 

 

2) 배경색 넣기

friends.css 화면

 기존에 사용하던 노락색을 불러와서 적용함.

 

 

적용된 모습

아이콘 주변에 배경색이 생김.

 

 

 

3) 배경색 키우기

friends.css 화면

absolute 하고

너비와 높이를 지정해줌.

 

vh는 height의 100% 이고,

vw는 width의 100%임.

 

 

적용된 모습

배경색이 커짐!

 

 

friends.css 화면

top을 0으로 해줌.

 

 

적용된 모습

아이콘과 배경이 모든 것을 가려버림.

 

 

 

4) 아이콘 위치조정하기

friends.css 화면

flex하고 가로 세로 모두 중앙으로 맞춰줌.

 

 

적용된 모습

아이콘이 화면 중앙으로 감.

 

 

friends.css 화면

아이콘 사이즈를 크게 키워줌.

 

 

적용된 모습

아이콘이 커짐.