- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
HTML [HTML 디자인] 웹페이지 가로 모드/세로 모드 인식하기
2022.02.14 16:17
[HTML 디자인] 웹페이지 가로 모드/세로 모드 인식하기
웹페이지 가로 모드/세로 모드 인식하기
2020-03-11 / 일분이베프
모바일 트래픽이 데스크탑을 앞지른 시대인 요즘은, 모바일이나 데스크탑 어디에서도 콘텐츠가 무리 없이 보이도록 대부분의 웹페이지들이 반응형으로 제작됩니다.
반응형 페이지를 만들 때 폰을 세로로 들고 있느냐 가로로 들고 있느냐를 판별하고, 그에 따라 레이아웃을 맞춰 주어야 하는 일이 꽤 자주 있어요. 데스크탑에서 브라우저 창의 폭과 높이 중 어느게 더 큰지를 판별하는 것으로 생각해도 됩니다. 같은 동작이에요~
세로 모드: Portrait(포트레이트) 모드
가로 모드: Landscape(랜드스케이프) 모드
판별은 CSS로도 가능하고 자바스크립트로도 가능한데요,
용도에 따라 적절한 걸 사용하면 되겠지요~
CSS를 이용한 방법
미디어 쿼리를 사용합니다.
자바스크립트를 이용한 방법
window.matchMedia(‘(orientation: portrait)’).matches 가 true면 Portrait 모드이고,
window.matchMedia(‘(orientation: landscape)’).matches 가 true면 Landscape 모드입니다.
아래↓처럼 브라우저 창 사이즈를 비교해서 판별할 수도 있어요.
두 가지 방법의 실행 속도는 큰 차이가 없으니, 취향에 맞는 방법을 쓰세요~
창 사이즈가 바뀔 때마다 체크하고 싶다면, ‘resize’ 이벤트에 바인딩된 이벤트핸들러 함수에서 체크해주면 됩니다.
이렇게요↓
[출처] https://studiomeal.com/archives/1068
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.