[CSS] 반응형웹페이지의 필수 - 미디어쿼리 활용

반응형웹페이지에서 제일처음 고려해야할건 역시나 익스플로러 7과 익스플로러8 인것 같습니다. 왜냐하면 웹표준을 따르지도 않을 뿐더러 플러그인을 통한 반응형지원이 완벽하지가 않아서 디자이너/퍼블리셔분들이 항상 고생하고 계십니다. 반응형 웹페이지 사용은 간단합니다. 각각 디바이스 기기의 해상도에 맞춰서 화면 크기를 잡아주는 것이죠. 반응형 웹페이지는 크게 3가지 정도로 나눌수 있겠네요. 디바이스 해상도 기준을 320px, 1024px 로 잡고 320px 이하면 모바일, 1024px 이하면 타블렛, 이상이면 데스크탑 이렇게 말이죠. 크게 개념을 잡으면 간단하게 나뉘어지지만. 스마트폰도 레피나 해상도 지원되는것도 있고, 타블렛도 일반 피씨 해상도 넘어선지 오래입니다. 게다가 모바일은 가로세로 전환이 있죠. 그래서..

• format_list_bulleted IT정보센터/HTML & CSS
• · 2015. 6. 26.
• textsms

[CSS] 반응형웹 개발시 기종별해상도 테스트 사이트

반응형 페이지를 테스트할 때 기기별로 화면이 제대로 나오는지 확인이 필요할때 유요한 사이트가 있어서 소개해 드립니다. 예전에는 반응형웹페이지를 개발 할때 모든 기기를 구비해서 테스트할 수 없으니 모발일버전으로 소스를 고쳐서 화면 해상도 바꿔가면서 확인하거나, 아는 지인들 불러서 잘나오냐고 확인했던 기억이 있네요. 기종별해상도테스트 : http://troy.labs.daum.net 사이트에 들어가시면 상단위의 URL에 링크주소를 입력하시고 왼쪽의 기기를 선택하시면 기기별로 화면이 제대로 표시되고 있는지 확인이 가능합니다. 이런거 만드신분 상줘야 됩니다. 진짜 ㅠ 디바이스를 선택하면 선택한만큼 나열이 되구요 한화면에서 상태를 전부 볼수 있어서 유용하네요. 국내 발매된 거의 모든 모바일기기가 있는것 같네요. ..

• format_list_bulleted IT정보센터/HTML & CSS
• · 2015. 6. 23.
• textsms