[css] 강제 가로 모드

[css] 강제 가로 모드

 

세로화면에서

강제로 가로 모드로

적용하는 법입니다.

 

모바일 화면 웹을 만들 때, 
텍스트가 꽉 찬 테이블(시간표, 식단표)를 만들때 
세로 화면에서 강제로 가로모드의 화면을 만들때가 있습니다. 

단순히 스타일에 transform: rotate(-90deg); 만 준다면 기존의 가로폭이 세로에 적용이 되어 여전히 좁은 폭의 막혀있습니다. 

 

강제 가로모드 css

  transform: rotate(-90deg);
  transform-origin: top left;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vh; //세로 너비를 적용
  height: 100vw; //가로 너비를 적용