[#5] 풀 스크린 배경과 캐러샐

05-1 풀스크린 배경

이미지나 동영상을 화면 전체에 가득 채워서 풀 스크린으로 보여주는 기법

 

05-2 이미지로 만드는 풀 스크린 배경

1. 풀 스크린 배경에 적합한 이미지

2. 화질이 좋은 이미지

3. 용량이 크지 않는 이미지

 

05-3 동영상으로 만드는 풀 스크린 배경

HTML5에는 <Video> 태그가 이썽서 플러그인 프로그램 없이도 웹 브라우저에서 직접 도영ㅇ상을 재생할 수 있음

1. 동영상 파일은 용량이 작을수록 좋다

2. 로딩되는 동안 보여줄 포스터 이미지도 함께 준비

3. 가급적 오디오는 제거하고 넣는 것이 좋음

 

05-4 풀 스크린 배경에 어울리는 고스트 버튼

'고스트 버튼(Ghost Button)': 테두리나 배경이 투명하고 희미해서 버튼이 아닌 것처럼 문서 배경이 그대로 드러나는 버튼

장점: 배경 이미지가 투명하게 드러나 깨끗하고 깔끔해 보이는 장점

단점: 배경 이미지를 잘못 선정할 경우 버튼이 제대로 보이지 않을 수 있다는 점

 

05-5 여러 가지 중요한 정보를 슬라이드로 보여준다! - 캐러셀

캐러셀(Carousel): '수화물 벨트' 또는 '회전 목마'라는 의미로 무엇인가 반복해서 회전하는 것을 기리킴

장점: 눈에 가장 잘 띄는 공간에 여러 내용을 배치

단점: 사용자가 캐러셀 내용을 다 보지 못할 수도 있음

[ 주의점 ]

1. 캐러셀에는 중요한 것부터 순서대로

2. 캐러셀의 내용은 사용자의 시선을 끌 수 있게

3. 캐러셀에 필요한 내비게이션