[CSS / orientation: portrait]가로 / 세로모드로 자동변환하는 CSS (feat. 에스파 홈페이지)

 

📌 예시 (Aespa -Armageddon webpage)

PC일경우 / 모바일일경우

PC일경우 / 모바일일경우

 

가로폭이 세로폭보다 큰 PC의 경우 가로로,

가로폭이 세로폭보다 작은 모바일의 경우 세로로

변환하여 디자인이 일관적으로 보이게 하는 컨셉 Web page다

(이런 페이지들은 금방 사라져서 아쉽 ㅠㅜ)

 

인터렉션 요소가 많아서 재밌는 이 사이트 처럼 기기별 가로 사이즈에 따라

가로세로를 변경하려면 아래 코드를 사용하면 된당

https://aespa.com/

aespa

 

 

 

 

📌 적용예제 코드

See the Pen 자동가로/세로변경 css by galaxy_star (@fold6) on CodePen.

 

 

📌 핵심코드

    /* 핵심코드 */
    /* 가로폭이 세로폭보다 작은 경우, 즉 장치가 세로 모드일 때를 감지 */
    @media (orientation: portrait) {
        html {
            /* 화면을 -90도 회전시킵니다 */
            transform: rotate(-90deg);
            /* 회전의 기준점을 화면의 왼쪽 상단 모서리로 설정합니다 */
            transform-origin: top left;
            /* 절대 위치를 사용합니다 */
            position: absolute;
            /* 회전 후에 화면의 맨 위를 화면의 아래로 위치시킵니다 */
            top: 100%;
            /* 회전 후에 화면의 왼쪽을 원래 위치로 둡니다 */
            left: 0;
            /* 회전 후 화면의 너비를 보이는 높이로 설정합니다 */
            width: 100vh;
            /* 회전 후 화면의 높이를 보이는 너비로 설정합니다 */
            height: 100vw;
        }
    }

 

 

반응형으로 작업해서 기기에 맞게 보이는것도 좋지만

이런 방법으로 디자인의 일관성을 유지하며,

게임하는듯한 느낌을 주는것도 재밌는것 같당

 

(필자 또한 틀린그림찾기 게임을 구현하기 위해 이 기능을 찾게됨!)