[CSS] @media query 가로·세로 적용

stylesheet 반응형 작업중에 고민되는 것 중 하나가 모바일 기기에서의 가로·세로 반응형 작업이다.

 

머릿속으로는 있을거야... 하고 생각만해놓고 1도 찾아보지 않은 내가 밉다...

 

모바일기기의 가로 세로를 체크하는 방식은 반응형 작업을 할 때 처럼 미디어쿼리를 사용한다.

 

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

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

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

사실 다른 방법으로는 javaScript를 이용하여 페이지에 접속 할 때 혹은 디바이스 화면의 width 혹은 height값이 변화할 때 

 

css파일 혹은 style적용 방식을 다르게 해주면 되지만

 

처음에 css를 배울 때 JavaScript를 최대한 사용하지 않고 css를 짜는게 가장 좋다(?)고 배웠기때문에 css로 적용 가능한 

 

방식만 기록해두겠습니다.

 

정말... 왜 안찾아봤을까...?

 

사실상 정말 잘 짜여진 stylesheet라면 아마 가로·세로가 필요 없을 것 같지만

 

그래도 혹시 모르니 기록으로 남겨놓는다!