1. 디바이스 가로/세로 구분

• 세로 모드 : Portrait (포트레이드) 모드
• 가로 모드 : Landscape (랜드 스케이프) 모드

코드
a. CSS를 이용한 방법

• 미디어 쿼리 사용

@media (orientation: portrait) {
	/* Portrait 세로 모드일 때 적용할 CSS */
}

@media (orientation: landscape) {
	/* Landscape 가로 모드일 때 적용할 CSS */
}

b. 스크립트를 이용한 방법

• window.matchMedia(‘(orientation: portrait)’).matches
• window.matchMedia(‘(orientation: landscape)’).matches
• 값은 boolean 로 구분 (true, false)

if (window.matchMedia('(orientation: portrait)').matches) {
	// Portrait 모드일 때 실행할 스크립트
	// 폭과 높이가 같으면 Portrait 모드로 인식돼요
} else {
	// Landscape 모드일 때 실행할 스크립트
}

※ 반응형으로 구현 시, ‘Resize’ 이벤트 사용

window.addEventListener('resize', function () {
	if (window.matchMedia('(orientation: portrait)').matches) {
		// Portrait 모드일 때 실행할 스크립트
		// 폭과 높이가 같으면 Portrait 모드로 인식돼요
	} else {
		// Landscape 모드일 때 실행할 스크립트
	}
});

2. Main banner Video 적용

• PC 에선 video 재생, Tablet, mobile 은 기본 이미지
• 영상 type/mp4

코드 ✍️

<video src={Video} autoplay="autoplay" loop="loop" muted="muted" />

a. {Video} 는 import 로 불러온 영상 경로

++ 사이트에서 사용되는 영상의 경우 대개 Mp4 를 사용하는데 요즘 Webm 확장자를 사용한 사이트도 보임.
→ PC 에서만 영상을 사용할 거라면 MP4, Webm 상관없이 사용 권장.

Webm, MP4 참고)

• https://www.winxdvd.com/answers/webm-vs-mp4.htm
• https://9to5mac.com/2021/08/10/apple-adding-webm-audio-codec-support-to-safari-with-ios-15/