웹페이지 가로/세로 모드 css

웹 기준으로 화면을 설계하다가 반응형 웹도 어느정도 신경 써주기 위해 모바일 버전에서 확인 했는데 모바일 화면이 가로 모드일 때 글자들이 겹치는 문제가 발견되어서 이를 해결하기 위해 찾아봤는데 portrait와 landscape 를 사용한 가로/세로 모드를 인식하는 미디어 쿼리가 있다는 걸 알고 기록할려고한다.

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

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

• Landscape 사용 전
  

• Landscape 사용 후