CSS - 모바일 가로보기 landscape

모바일 쪽 작업을 하다보면 가로보기와 세로보기의 레이아웃을 다른게 해야할 일이 있을 때도 있습니다. 세세한 width 값을 맞춘다던가, 가로보기를 할 때 넓어진 width 에 무언가를 넣을 경우도 생길 수 있을 것입니다. 이럴때 여러가지로 고민을 하게 되는데, 여러가지 방법들 중에 CSS를 다르게 불러와 보는 것도 하나의 좋은 방법일 수도 있습니다.

​

<link rel="stylesheet" type="text/css" media="all and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" type="text/css" media="all and (orientation:landscape)" href="landscape.css">

​

위와 같은 방식으로 사용하면 디바이스를 세로로 볼 때는 portrait.css 를 불러오고, 가로로 볼 때는 landscape.css 를 불러오게 됩니다. 그런데 이렇게 사용하게 되면 portrait 와 landscape 의 경우 두가지 CSS를 제작해야하고 만약에 세로와 가로의 레이아웃이 거의 비슷하고 일정 부분만 다른 경우 이렇게 사용하면 동일한 부분의 수정은 두 파일을 항상 동시에 수정해주어야 하는 번거로움이 발생하게 됩니다. 그래서 세로를 기준으로 하고 가로보기 시에 특정한 무언가를 약간만 수정하고 싶다면 아래와 같은 방법을 사용하면 더 좋을 것 같습니다.

​

<link rel="stylesheet" type="text/css" media="all" href="basic.css">

<link rel="stylesheet" type="text/css" media="all and (orientation:landscape)" href="landscape.css">

​

위와 같이 사용하게 되면 항상 basic.css 가 불러오게 되고 가로로 볼 경우 landscape.css 를 추가적으로 불러오게 됩니다. 그렇다면 basic.css 를 통해 기본적인 레이아웃을 구현하고 landscape.css 를 통해 가로보기 시에 필요한 몇가지만 추가해 주면 훨씬 더 효율적으로 사용할 수 있을 것 같습니다.

​

출처: https://htglss.tistory.com/122 [행복하기]