[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

반응형 CSS 프레임워크 부트스트랩을 체험해보다

이것도 나중에 포스팅 하겠지만 제로보드로 현재 작업중인 사이트가 있습니다. 근데, 제가 JAVA 쪽이다 보니 PHP는 전혀 몰라서 문법적으로 수정하는걸 못하고 있었어요.. 대략 끼워 맞춰서 억지로 만들고는 있지만 원하는 기능을 구현을 못하고 있었는데, 우연히 부트스트랩 동영상을 봤습니다. 아... 퍼블리싱을 공부하고 있는 저한텐 거의 충격이네요. jQueryMobile을 봤을 때도 그냥 모바일용 프레임 워크라는 느낌이었는데.. 이건 뭐 혁명 수준입니다. 우선 유툽 보시죠!! 영어의 압박이 있지만 후반부에 드래그해서 반응형 페이지를 만드는걸 보면 왠지 xCode 느낌도 나구요.. 드림위버가 제일 비슷한것 같네요. 예전에 퍼블리싱 공부하던책에서 부트스트랩을 잠깐 언급한게 기억이 납니다. 잘짜여진 CSS집합체..

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

모바일작업시 전화번호 강제링크 생성될때

모바일페이지를 작업하다보면 전화번호 링크가 강제로 생겨서 지워줘야 할 때가 있습니다.링크를 삭제하기 위해서는 자동리크 없애는 태그를 삽입해 주세요. 단순히 하이퍼텍스트의 색을 변경처리해도 전화번호로 바로 연동이 되기에 사용자 실수로 잘못 누를 경우를 대비해서 없애주는게 좋을 듯합니다. 필요하면 해당페이지에서만 쓰면 되니 아래 태그를 넣어주세요.

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