여러 해상도의 웹 호환성을 한눈에! Daum Troy

여러가지 스마트 기기가 발전하면서 웹 사이트 또한 몇가지 해상도만으로는 나타내기 힘들어졌습니다.

각 스마트 기기의 해상도에 맞춰 코딩 할 수도 없는 노릇이고...

그래서 나온게 반응형 웹입니다.

반응형 웹을 만드는 방법으로 각종 해상도에 쉽게 대처할 수 있게 되었습니다.

하지만, 위처럼 반응형 웹 또한 각각의 해상도에서의 상태를 알아야 하고, 그 부분에 맞춰 설정을 해줘야하기 때문에

여러 해상도에서 시험을 해봐야겠죠?

Daum Troy는 간단한 방법으로 여러가지 해상도에서 웹 페이지를 보여줍니다!

정말 쉬우니 한번 따라해보세요!

Daum Troy

먼저 위의 버튼을 눌러 Daum Troy 링크를 눌러주세요!

Daum Troy 사이트로 이동이 되셨다면, 먼저 간단히 설명해드리겠습니다.

위의 이미지를 보시면 4개를 표시해 뒀는데요.

먼저 http://m.daum.net/ 이라고 적힌 부분에 주소를 적게 되면 작은 화면 안에 원하는 주소의 웹이 표시됩니다.

그리고 주소 오른쪽의 작은 핸드폰 모양, 큰 핸드폰 모양은 보이는 작은 화면의 확대와 축소를 뜻합니다.

보이는 기기의 해상도와는 별개이므로 주의하세요!

그리고 좌측 목록에 보시면 여러가지 기기들이 있습니다.

핸드폰과 태블릿, 데스크탑 & 데스크탑 와이드까지 있구요.

빨간 네모 박스로 표시해놓은 Custom의 경우는 원하는 해상도로 변경시킬 수 있습니다.

작은 화면 오른쪽 화단의 화살표를 누른채로 드래그 하시면 원하는 크기로 변경이 가능합니다.

한번 사용해보겠습니다.

먼저 1600 * 900 해상도 다음으로 많이 사용하는 1366*768 해상도입니다.

저희집은 이 정도라도 됐으면 좋겠네요 ㅋ

17인치 4:3 모니터 안습 ㅠㅠ

일단 1366*768에서 제 블로그를 열었을 때의 화면입니다.

데스크탑 해상도이기 때문에, 별 문제 없이 잘 동작하네요.

다음은 1024 * 768 해상도입니다.

광고 크기가 바뀌었죠?

반응형 광고로 해두어서 그렇습니다.

1024*768이하에서는 광고가 정상적으로 보이지 않기 때문에 더 작은걸로 변경했습니다.

1024*768에서도 레이아웃은 큰 변화가 없죠?

이번엔 아이패드 사이즈입니다.

이번에도 데스크탑과 큰 변화가 없네요.

문제라면 사이드바 보기가 좀 불편한정도??

현재 많은 사랑을 받고있는 갤럭시 노트 3의 사이즈입니다.

360 * 640이네요.

레이아웃이 확 변했습니다.

먼저 헤더부분은 목록이 생겼구요.

광고도 더욱 줄어들었습니다.

그리고 글 옆에 있던 사이드바가 글 밑으로 내려갔습니다.

해상도가 낮으니 어쩔 수 없죠.

이번에는 정말 작은 화면을 자랑하는 iPhone 3GS입니다.

320x480이네요. 무지 작습니다...

보시는 것과 같이 광고 아래 몇줄밖에 보이지 않네요.

이러한 방식으로 반응형 웹을 만들 때나, 여러 기기에선의 호환성을 알고싶으실 때는 몇가지 선택만으로 확인이 가능합니다.

오류를 알아야 수정을 하겠죠?

여러 해상도의 웹 호환성을 한눈에! Daum Troy를 써보세요!

반응형 웹? 그게 뭔지  알아볼까요?