웹프로그래밍

Global It Leader!!


CSS


 
 

HTML5 Boilerplate(보일러 플레이트) 소개

페이지 정보

작성자 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 3,449회 작성일 17-03-30 12:36

본문

웹에서 가장 인기있는 프런트엔드 템플릿... 소개페이지에 그렇게 문구가 적혀있습니다. HTML5 관련 자료들을 찾다보면 자주 마주치는 템플릿이기도 하고 각종 추천되는 소스들이 총집합 되어있어 처음 시작하는 사람들은 물론 체계적인 구성이 필요한 분들이라면 꼭 한 번쯤 살펴보길 권하는 템플릿입니다.

보일러 플레이트 소개

HTML5로 프로젝트를 이제 막 시작하거나 CSS의 다양한 지원을 원하는 개발자라면 HTML5 보일러 플레이트의 사용을 고려해 보자. 이것은 필수적인 스타일과 폴리필, 모더나이저 같은 툴을 포함하여 HTML5를 사용함에 있어 크로스브라우징을 좀더 쉽게 도와주는 템플릿이다. 또한, 자동으로 CSS와 JS 파일을 합치고 주석을 제거해 제품 출시가 가능한 코드를 만들어주는 툴도 포함하고 있다.

이 프로젝트는 수년에 걸친 반복적인 제품 개발과 커뮤니티 지식이 결합된 결과물이다. 특정 개발 철학 또는 프레임워크를 부여하지 않으며 원하는 방식으로 자유롭게 구조를 구축할 수 있다.



보일러 플레이트 특징

  • HTML5를 사용하는데 확신을 가지고 새로운 요소를 사용하도록 도와준다.
  • 점진적 기능 향상을 염두에 두고 설계되었다.
  • 포함하는 것:

    • CSS를 정상화하고 일반적인 버그를 개선하기 위해 Normalize.css를 사용한다.
    • 로컬 폴백과 함께 jQuery CDN을 사용한다.
    • 기능 검사를 위해 Modernizr의 커스텀 빌드를 이용한다.
    • 웹 사이트의 성능 및 보안을 향상시키기 위해 아파치 서버 설정을 이용한다.
  • Placeholder CSS Media Queries.
  • 유용한 CSS 헬퍼 클래스를 사용한다.
  • 성능이 최적화된 기본 인쇄 스타일을 제공한다.
  • 구글 유니버셜 애널리틱스 코드의 최적화된 버전을 제공한다.
  • 구형 브라우저에서 자바스크립트 오류의 원인되는 console 문에 대한 보호장치가 제공된다.
  • 필요없는 부분을 쉽게 삭제할 수 있도록 구성되어 있다.
  • 광범위한 인라인 및 첨부 문서를 제공한다.

브라우저 지원

  • Chrome (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 8+
  • Opera (latest 2)
  • Safari (latest 2)

위에서 언급한 브라우저들에서 호환성을 유지하지만 그 밖의 구형 브라우저에 사용할 수 없다는 것을 의미하진 않는다. 만약 구형 브라우저의 지원(IE 6+, Firefox 3.6+, Safari 4+) 이 필요하다면 HTML5 Boilerplate v4를 사용할 수 있지만 더 이상 개발이 진행되진 않는다.

보일러 플레이트 사용법

홈페이지에서 HTML5 보일러 플레이트를 다운로드한 후에, 사이트나 애플리케이션에 포함시킨다:

  • 사이트의 기본 구조를 설정한다.
  • 일부 콘텐츠, 스타일과 기능을 추가한다.
  • 어떻게 보이는지 로컬에서 사이트를 실행해 본다.
  • 선택적으로 사이트의 최적화를 자동화하는 빌드 스크립트를 실행
  • 사이트를 배포
딱히 사용법이랄것이 있는 것은 아니고 그것이 중요한 것도 아니다. 포함하고 있는 코드들이 중요하고 제작하게 될 사이트나 애플리케이션에 알맞은 구조와 스타일, 기능이 중요할 뿐...

보일러 플레이트 기본구조

기본 HTML5 보일러 플레이트 사이트 구조는 아래와 같으며, 웹 사이트나 애플리케이션을 제작할때 이 구조를 참고하여 작성하도록 하자.

.
├── css  (이 디렉토리는 모든 프로젝트들의 CSS 파일을 포함)
│   ├── main.css  (거의 모든 페이지에 삽입될 기본 CSS 파일을 이 곳에 작성)
│   └── normalize.css  (CSS 리셋을 위한 파일)
├── doc  (이 디렉토리에 모든 HTML5 보일러 플레이트 설명서가 있음)
├── img  (사이트 제작시에 필요한 이미지들을 이 곳에 저장)
├── js  (이 디렉토리는 모든 프로젝트들의 JS 파일을 포함)
│   ├── main.js  (사이트 및 애플리케이션의 자바스크립트 코드를 참조하거나 포함하는 용도로 사용)
│   ├── plugins.js  (jQuery 플러그인 및 제 3자 스크립트와 같은 다른 모든 플러그인을 포함하는 용도로 사용하며, console 오류를 방지하는 폴백을 포함)
│   └── vendor  (이 디렉토리는 모든 제 3자 라이브러리 코드를 포함하는 용도로 사용)
│       ├── jquery.min.js  (기본적으로 최신의 jQuery 라이브러리를 압축된 버전으로 포함)
│       └── modernizr.min.js  (기본적으로 최신의 Modernizr 라이브러리를 압축된 버전으로 포함)
├── .editorconfig  (다른 편집기와 IDE 사이에 일관된 코딩 스타일을 유지하기 위해 도움을 줌)
├── .htaccess  (아파치 서버 설정을 위한 기본 설정을 포함)
├── 404.html  (커스텀 404 페이지를 제공)
├── apple-touch-icon.png  (애플 터치 아이콘으로 사용될 아이콘)
├── browserconfig.xml  (IE11에 대한 커스텀 타일에 대한 설정을 포함)
├── index.html  (모든 페이지의 기초를 형성하는 기본 HTML 골격)
├── humans.txt  (해당 사이트 및 애플리케이션 제작자들의 기술적 자문을 구하기 위한 연락처와 같은 정보 기술)
├── robots.txt  (검색 엔진 크롤러가 액세스하지 않기를 바라는 구역을 설정)
├── crossdomain.xml  (크로스 도메인 요청 작업을 위한 템플릿)
├── favicon.ico  (파비콘)
├── tile-wide.png  (IE 타일 아이콘)
└── tile.png  (IE 타일 아이콘)

다음 장 부터는 주요 파일들을 자세히 들여다보고 이에 대한 해설을 덧 붙입니다.



출처: http://webdir.tistory.com/449 [WEBDIR]

 

댓글목록

등록된 댓글이 없습니다.

전체 80
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
40 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3073 08-06
39 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3089 08-03
38 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3071 08-03
37 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3034 08-03
36 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3074 08-03
35 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3607 04-03
열람중 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3450 03-30
33 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3280 03-02
32 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3198 03-02
31 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3163 11-10
30 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3161 10-26
29 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3618 10-26
28 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3011 10-17
27 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3067 12-25
26 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3554 06-30
25 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3210 06-10
24 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3329 06-09
23 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3252 06-05
22 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4701 05-20
21 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3777 05-20