[CSS] 모바일 가로 화면 대응

웹에서 화면 비율을 이것저것 맞춰보고 모바일로 넘어가서 확인 보는데 다 맞는데 가로전환했을 때 이상하게 뜨는 경우가 있다.

(그게 바로 내 경우다..)

 

아래의 미디어 쿼리의 orientation property를 이용해 가로 전환의 경우에 css를 바꿔주면된다.

 

#가로 모드일 때
@media(orientation: Landscape){
    body {
        padding-top:100px;
        margin-right:20px;
        margin-left:20px;             
    }
}

#세로 모드일 때
@media(orientation: Portrait){
    body {
        padding-top:100px;
        margin-right:20px;
        margin-left:20px;             
    }
}

 

css는 프로그래밍언어가 아니다... 수십번 되뇌인다...