PC 모니터 크기에 맞춘 웹 페이지를 다른 디바이스에 적용할 수 있는 방법은?
디바이스별 해상도
모니터
- 19인치 화면(표준 비율): 1280 x 1024 픽셀
- 20인치 화면(표준 비율): 1600 x 1200 픽셀
- 22인치 화면(와이드스크린): 1680 x 1050 픽셀
휴대폰
- 아이폰X : 1125x2436픽셀
- 갤럭시S10+ : 1440x3040픽셀
- V50 : 1440x3120픽셀
태블릿PC
- iPad Mini: 768x1024픽셀
- iPad Pro(10.5inch):1668 x 2224픽셀
만약 웹에서 구현하는 픽셀의 크기를 1440x3040을 기준으로 만들게 된다면 갤럭시나 V50에서는 보기 편하겠지만
보다 큰 모니터나 iPad Pro에서는 작게보여 옆에 여백이 많이 남을 것이고,
보다 작은 iPad Mini에서는 내용이 잘려서 보일 것입니다.
해결 방법은 view port라는 메타태그로 화면에 맞게 페이지를 축소 할 수 있습니다.
하지만 viewport로 디바이스에 크기에 맞게 페이지가 나오더라도
아래와 같이 방대한 양의 컨텐츠가 있으면 가독성이 안좋습니다.
이런경우 css3과 미디어 쿼리를 사용하면 화면의 크기에 맞는 레이아웃을 지정해 줄 수 있습니다.
@media (max-width: 400px){
width: 500px;
} 최대 너비가 400px일 때 스타일 적용
이런식으로 말이죠!
방식을 이용해 반응형 레이아웃에 필요한 css파일을 따로 만들어 링크를 걸어 두면 반응형 웹페이지를 쉽고 빠르게 만들 수 있습니다.
아래는 감사하게도 오픈해주신 반응형 웹 오픈소스입니다. 공개해주신 블로거님께 감사인사를 올립니다.