본문 바로가기

WebTip

[TIP] 크기에 따른 반응형 웹 확인하자!

반응형


[ 크기에 따른 반응형 웹 확인하자! ]



떠오르는 웹 트렌드의 하나인 반응형! 

이제는 필수적인 요소로 되어버린 반응형 웹은 기업에서뿐만 아닌 티스토리 블로그에서도 하시는 분들을 많이 볼 수 있으며, 우리 주변에서 쉽게 볼 수 있는 부분이 되었습니다. 티스토리를 하시는 분들 또한 반응형을 엄두해 두시며 제작하는 분이 많으실텐데요!


그런분들을 위한 반응형을 만들때 알아두면 좋은 사이트를  소개해 드릴까 합니다!^^!




[  The Responsinator ]





http://www.responsinator.com/



웹이 다양한 디바이스에서 어떻게 보여지는지 시뮬레이션 할 수 있는 웹 사이트로, 다양한 기기에서 반응형 웹 사이트가 실제로 어떻게 보여질지 가늠하기에 좋으며 Portrait와 Landscape 모드를 지원합니다. 사용법은 좌측 상단 입력칸에 보고자 하는 사이트의 URL을 입력하고 ‘GO’ 버튼을 클릭하면 됩니다.




[ TROY ]





http://troy.labs.daum.net/



TROY’는 다음 커뮤니케이션즈에서 제공하는 서비스로 다양한 디바이스를 확인해 볼 수 있는 사이트 입니다. 아무래도 한국어로 되어 있어서 국내 사용자에게 더욱 친숙하고, 국내에 출시 된 대표적인 스마트 기기 별로 테스트를 할 수 있다는 장점이 있습니다. 또한, ‘Custom’ 모드를 제공하여 기본적으로 제공하는 스크린 사이즈 이외에 특수한 경우의 수까지 미리보기를 할 수 있어서 더욱 편리합니다.




Responsive.is ]





http://responsive.is/typecast.com



Responsive.is’는 반응형 웹 사이트를 대표적인 스크린 사이즈에 맞추어 미리보기 할 수 있는 사이트로, 기본 모드는 ‘AUTO’이다. ‘Desktop, Tablet Landscape, Tablet Portrait, Smartphone Landscape, Smartphone Portrait’ 모드를 지원하며, 사용법은 좌측 상단 입력칸에 사이트의 URL을 입력하신 후 ‘GO’ 버튼을 클릭하고, 상단 중앙에 디바이스 별 버튼을 클릭하여 사이즈를 조정하면 됩니다.





이상으로 알아본 반응형 웹 사이트를 만들때 도움이 되는 사이트의 모음입니다^^









반응형