[css] 모바일 가로, 세로 모드 미디어 쿼리로 해결

데스크탑 보다는 모바일 기기로 인터넷을 접하는 요즘, 모바일 전용의 퍼블리싱 요청이나 반응형(하나의 소스로 PC와 Mobile 디바이스 별로 보이게) 요청이 들어온다.

 

그 중에 모바일 가로, 세로 모드 조건에서만 보일 수 있도록 하는 요청이 들어오는데, 그럴 땐 미디어쿼리를 사용하여 해당 상황에 맞춰서 스타일을 추가하면 된다.

 

@media (orientation: portrait) {
/* 세로 모드 일 경우 */
}

@media (orientaion: landscape) {
/* 가로 모드일 경우 */
}

 

portrait는 디바이스가 세로 모드일 경우를 뜻하며,

landscape는 디바이스가 가로 모드일 경우를 뜻한다.