PC 모니터 크기에 맞춘 웹 페이지를 다른 디바이스에 적용할 수 있는 방법은?

 

디바이스별 해상도

 

모니터

  1. 19인치 화면(표준 비율): 1280 x 1024 픽셀
  2. 20인치 화면(표준 비율): 1600 x 1200 픽셀
  3. 22인치 화면(와이드스크린): 1680 x 1050 픽셀

휴대폰

  1. 아이폰X : 1125x2436픽셀
  2. 갤럭시S10+ : 1440x3040픽셀
  3. V50 : 1440x3120픽셀

 

태블릿PC

  1. iPad Mini: 768x1024픽셀
  2. 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파일을 따로 만들어 링크를 걸어 두면 반응형 웹페이지를 쉽고 빠르게 만들  수 있습니다. 

 

아래는 감사하게도 오픈해주신 반응형 웹 오픈소스입니다. 공개해주신 블로거님께 감사인사를 올립니다. 

 

https://m.blog.naver.com/PostView.nhn?blogId=cyclo80916&logNo=220780530391&proxyReferer=https%3A%2F%2Fwww.google.com%2F

 

40가지 반응형 웹사이트 오픈소스

파일첨부합니다. https://html5up.net/ 도움이 되셨다면 댓글하나 부탁드려요.

blog.naver.com

 

+ Recent posts