IE6부터 크로스 브라우저 지원을 위한 최고의 HTML5 템플릿
작성일 12-12-04 17:05
페이지 정보
작성자서방님 조회 113회 댓글 0건본문
HTML5+CSS3+JS(JQuery) 개발하다보면 항상 골칫거리인게 크로스 브라우저 지원입니다.
특히 인터넷 익스플로러6, 7, 8버젼은 문제가 많은데 아직도 사용자 수 가 많아서 무시 할 수 도 없죠.
이런 문제를 최대한 해결할 수 있는 HTML5 템플릿 HTML5BoilerPlate를 소개합니다.
1.
프레임워크나 거추장스러운 템플릿이 아닌 HTML5를 시작할 때 필요한 최소한의 세트를 구성해놓았습니다.
다운을 받아 폴더를 열어보면 HTML파일, JavaScript폴더(JQuery 포함), CSS폴더 등으로 구성되어있습니다.
모바일 서포트를 위한 아이폰 아이콘 그래픽 파일부터 브라우저 아이콘을 위한 favicon.ico도 포함되있습니다.
2.
인터넷익스플로러6 포함 모든 브라우저에서 가장 합리적이고, 최대한 정확하게 코딩을 시작 할 수 있도록
HTML파일, CSS파일, JS파일에 기초 코딩이 되있습니다.
코멘트(영어)를 읽어보면 세세히 "왜 이렇게 시작해야하는가"에 대한 설명이 자세히 써있습니다.
브라우저로 index.html를 열어보면 그냥 하얀 빈 페이지입니다.
즉 이 기초 코딩은 미적인 것을 제외한체 브라우저 지원을 위해 써있는 코드입니다.
3.
물론 사이트 퍼블리슁을 위한 코멘트 없는 버젼을 받을 수 도 있습니다.
아니면 더 세세하게 minified (간결화) 시킬건지 등을 세팅해서 받을 수 도 있고요.
더 상세하게 기초 템플릿을 받고 싶다면 아래 Initialzr에서 직접 만들 수 있습니다.
여기 Initializr도 HTML5BoilerPlate 기반입니다.
4.
스크립트 실행으로 퍼블리슁 직전 당신의 웹 앱을 최적화해줍니다.
예를 들어 JS와 CSS 파일들을 Minified화 시켜주고, 큰 이미지 파일들을 알아서 웹에 알맞게 최적화 시켜주고 등등.
즉 쓸데 없는 서버 사용을 최소화 해줍니다.
5.
HTML5 선구자들에 의해 수 년 간의 연구, 개발을 통해 만들어진 템플릿입니다.
한 명 소개하자면 Lead 개발자 Paul Irish는 현 JQuery 이사이자 구글 크롬팀에서 일하면서 HTML5 관련 JS라이브러리도 만들고, 10개가 넘는 다양한 HTML5+CSS3 도움 웹사이트를 만들어 HTML5 생태계를 주도하고 있는 사람입니다.
이 사람 사이트 중 하나인 CSS3 Please도 CSS3 크로스 브라우저 지원을 위한 엄청 유용한 툴입니다.
추가 ----
- 크로스 브라우저 지원 (IE6+도 지원)
- HTML5 준비 완료. 확실한 기초 위에 HTML5 태그를 써보자.
- A급 퍼포먼스를 위한 최적화된 캐슁과 압축 지원.
- 좋은 웹사이트를 만들기 위한 모범 기본세트
- 모바일 브라우저 최적화
- 사용성, HTML5 마크업 강조로 어느 브라우저에서든지 꼭 필요한 정보를 얻을 수 있고, 최신 고급 브라우저에선 멋지게 표현됨. 동시에 페이지 어딘가에 문제가 있더라도 최대한 문제 없이 처리.
- 익스플로서에선 익스 전용 클래스들 사용하는 등, 각 브라우저의 파워를 최대 사용
- .no-js와 .js 클래스를 통해 필요한 상황에 맞게 CSS 스타일 적용. (사용자가 브라우저 JavaScript를 꺼놓으면 .no-js 사용. 반대로 켜져있음 .no-js 무시)
- Console.log 지원
- doctype과 markup들 어떻게 써야될지 헷갈릴 필요 없음.
- 프린트용으로 최적화 된 CSS 기본 코딩 제공
- iOS, 안드로이드, 오페라모바일에 맞는 markup과 CSS 기본 코딩 제공
- .clearfix (floating 할 때 세로 길이 유지), .visuallyhidden (전체적인 틀은 유지한체 숨기기) 같은 유용한 클래스들 기본 제공
- 서버용 설정파일 .htaccess 도 빠른 HTML5 로딩을 위해 최적화 되어있음
- jQuery 최신 버젼 유지를 위한 CDN 서버에 있는 JQuery 사용. 물론 로딩 실패시를 위한 로컬 JQuery도 지원.
개인적인 사용 소감:
미국에서 특히 스타트업들 사이에서 가장 많이 쓰이는 유명한 템플릿입니다. 아예 경쟁자가 없다고 봐도 과언이 아님.
마술처럼 익스6, 7, 8 지원안하던 것들이 갑자기 확 지원되게 해주는 툴은 절대 아닙니다.
HTML, CSS 쓰다보면 크로스 브라우저 지원, 특히 익스 때문에 구글링해서 이거 저거 집어넣고.. 코드가 더러워지는 느낌인데..
그럴 필요 없이 첫 시작할 때 좋은 개발/코딩 방향을 잡아주는 훌륭한 템플릿인 것 같습니다.
댓글목록
등록된 댓글이 없습니다.