• Save
HTML5 BOILERPLATE를 소개합니다.
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5 BOILERPLATE를 소개합니다.

  • 2,764 views
Uploaded on

HTML5 웹 개발에 있어 선행되어야 했던 사항들을 정의해 놓은 보일러플레이트를 소개합니다.

HTML5 웹 개발에 있어 선행되어야 했던 사항들을 정의해 놓은 보일러플레이트를 소개합니다.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,764
On Slideshare
2,760
From Embeds
4
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
18

Embeds 4

http://cafe.naver.com 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 안녕하세요, 프론트엔드개발팀의 주우영입니다. 오늘은 HTML5보일러플레이트에 대해서 간단하게 소개하는 것으로 주간 세미나를 시작할까 합니다.
  • 웹 개발의 현장에서 팀원이 즉시 웹 개발을 무리없이 시작할 수 있도록 파일 구조, 기본적인 명명 규칙, 표준 라이브러리등 일반적인 사항들을 포함는 하나의 표준 파일 세트를 만들어 놓고 진행하는게 좋다고 하죠. 이렇게 표준 파일 세트를 정의하는 이유는 프로젝트의 시작을 보다 빠르게 하고, 팀원들의 이해 부담을 줄일 뿐만 아니라, 코딩 표준을 준수할 수 있도록 하는 힘이 있고파일의 구조와 구성을 통일화할 수 있다는 장점에서 기인 한다고 합니다.
  • 구글에서 검색 결과로 자주 만날 수 있는 분이죠.html5 보일러플레이트는 이분의 결과물입니. 바울 아이리쉬는 앞서 설명한 웹 개발 현장의 표준 파일 세트 개념을 차용해 HTML5 웹 개발을 위한 예문 집과 같은 것을 만든 것입니다.A rock-solid default for html5 awsome즉 훌륭한 html5를 위한 견고한 기본 이라고 이야기 하고 있네요.
  • 여기서 말하는 예문 집이란 기본 초석과 같은 것입니다. 우리는 이 초석 기반으로 처음부터 모범 사례가 적용된 사이트 및 페이지를 만들 수 있게 되는 것입니다. 여기서 말하는 "모범 사례"란 브라우저간 차이에 대응하고효율적인 Javascript, CSS코드를 작성하기 위한 노하우와 응답성 좋은 사이트를 만들기 위한 프론트 엔드 개선책 등을 말한다고 생각 합니다. 쉽게 말해 프로젝트 시작 전 안전한 기초 공사를 도와준다는 것 정리할 수 있습니다.
  • 이제 잠깐 사용하는 방법을 알아 보겠습니다.
  • 이 보일러플레이트를 얻기 위한 방법 중 하나는 공식 홈페이지에서 다운로드 하는 방법입니다.
  • 두 번째 방법은 깃으로 클론을 뜨면 됩니다.
  • 무엇보다 좋은 방법은 이니셜라이저를 이용해 프로젝트 환경에 필요한 사항만 콕 찝어 팀플릿을 만들어 사용하는게 좋을 것이다.
  • 앞서 설명한 세가지 방법을 이용해 파일을 받고 압축을 풀면 최상위 디렉토리가 떨어지죠,. 그 파일 구성에 대해서 간단히 설명 드리겠습니다.
  • 플래쉬를 사용하지 않는다면 crossdomain.xml은 필요 없는 파일이 되겠네요. 여기서 눈 여거 보셔야 할것은 humans.txt파일입니다. 이런 파일이 http프로토콜에 존재한다고 알고 계셨나요? 저는 몰랐습니다. 보일러플레이트를 통해서 알게되었습니다. 나중에 뒤에서 간단히 설명해 드리겠습니다.
  • Index.html에는 선행 되어야할 코드들이 작성되어 있습니다. 자바스크립트의 위치 라던지,ie를 위한 조건부 주석 등이죠
  • Css 는 개발을 시작하기 전에 항상 선행 되었던 코드를 묶어 놓았습니다.
  • 자바스크립트에서 index.html에 정의된 것외에 명가지 라이브러리를 포함하고 있습니다. 본래 미디어쿼리를 지원하지 않는 브라우저에서 그것과 같은 기능을 하게 해주는 response.js도 포함되어 있었지만 버전 3부터 제외 되었다고 합니다.
  • 앞서 못다한 homan.js설명을 간단하게 진행하도록 하겠습니다.
  • 앞서 잠깐 만났던 Humans.txt는 무엇일까요? 사용자가 사이트를 방문하면 최선을 다해 자신이 얻고자 하는 정보를 얻기위해 노력 합니다. 사이트를 방문하는 사람에 따라 얻고자 하는 정보가 다를 것입니다. 그러나 대게는 사이트에서 얻을 수 있는 정보는 무엇인지 궁금해 할 것이며, 만일 개발자라면 무엇을 사용하여 만들어 졌는지 궁금해 할 것입니다. 이 파일은 그들을 위해 작성 됩니다. 우리는 로봇이 아닌 사람이다. 라는 문구가 다소 우스운데요. 하지만 철학 만큼은 멋있다고 느껴집니다. 이 파일을 작성하면(클릭) 이렇게 브라우저에서 만날 수 있게 됩니다. 매우 친절하다는 느낌을 받게 되네요
  • 앞서 잠깐 만났던 Humans.txt는 무엇일까요? 사용자가 사이트를 방문하면 최선을 다해 자신이 얻고자 하는 정보를 얻기위해 노력 합니다. 사이트를 방문하는 사람에 따라 얻고자 하는 정보가 다를 것입니다. 그러나 대게는 사이트에서 얻을 수 있는 정보는 무엇인지 궁금해 할 것이며, 만일 개발자라면 무엇을 사용하여 만들어 졌는지 궁금해 할 것입니다. 이 파일은 그들을 위해 작성 됩니다. 우리는 로봇이 아닌 사람이다. 라는 문구가 다소 우스운데요. 하지만 철학 만큼은 멋있다고 느껴집니다. 이 파일을 작성하면(클릭) 이렇게 브라우저에서 만날 수 있게 됩니다. 매우 친절하다는 느낌을 받게 되네요
  • 여기까지 HTML5보일러플레이트에 대한 소개를 진행했던 주우영이었습니다. 감사합니다.

Transcript

  • 1. HTML5 ★ BOILERPLATEINTRODUTIONTO
  • 2. 웹 개발 현장의표준 파일 세트팀원들이 즉시 웹 개발을무리없이시작할 수 있도록 일반적인 사항들을수립하여 하나의 표준 파일세트를 만들어 놓고 진행하는 것이 좋다.
  • 3. Paul Irish바울 아이리쉬A Rock-solid defaultfor HTML5 awesome”“
  • 4. TML5 웹을 개발 하는데있어 파생된 수 많은 모범사례 중 필요한 사례를결합하여 HTML5프로젝트에 있어 최소한으로 선행 되어야할기본 초석을 제공SAFEFoundation workH
  • 5. H5BP ★ HOW TO USE
  • 6. HTML5 ★ BOILERPLATEThe web’s mostpopular front-endtemplateDownload v4.2.0http://html5boilerplate.com/
  • 7. git clonehttps://github.com/h5bp/html5-boilerplatehttps://github.com/h5bp/html5-boilerplate
  • 8. Initializrhttp://www.initializr.com/
  • 9. H5BP ★ DIRECTORY
  • 10. H5BP ★ DIRECTORYcssjsimgindex.html404.htmlcrossdomain.xmlhumans.txtrobot.txtfavicon.icoapple-touch-icon.pngapple-touch-icon-*.png애플 장치의 홈 등록용 아이콘세트웹 크롤러를 제어 파일인간을 위한 정보를 작성 하는파일(iGoogle의 humans.txt)참고Flash 용 크로스 도메인 정책에대한 파일
  • 11. H5BP ★ DIRECTORYcssjsimgindex.html404.htmlcrossdomain.xmlhumans.txtrobot.txtfavicon.icoapple-touch-icon.pngapple-touch-icon-*.pngIndex.html 파일,HTML5를 위해 작성되어야 할여러 사항이 선행 작성되어 있음• IE6의 Chrome Frame 대화 표시• IE를 위한 조건부 주석 코멘트• X-UA-Conpatible• Javascript always at the bottom• jQuery의 loading fallback• Google Analytics의 비동기로드최적화
  • 12. H5BP ★ DIRECTORYcssjsimgmain.cssnormalize.cssmain.jsplugins.jsvendorjquery-1.9.1.min.jsmodernizr-2.6.2.min.js기본 속성값을 표준화 하기위해정의된 스타일 시트 전통적으로재 설정되는 빈도가 높은 값의집합• HTML5 요소를 지원하지 않는브라우저를 위한 표시 처리• iOS의 방향 변경시 텍스트조정• 모바일의 사용자의 줌기능 방지 처리• form 요소의 표시를 최적화처리
  • 13. H5BP ★ DIRECTORYcssjsimgmain.cssnormalize.cssmain.jsplugins.jsvendorjquery-1.9.1.min.jsmodernizr-2.6.2.min.js- modernizrHTML5, CSS3의 기능을 사용할수 있는지 여부를 테스트하고그 결과를 <html>태그의 클래스이름으로 설정 해주는라이브러리- html5shivIE8이하 브라우저에서 HTML5태그를 인식하고 스타일을설정할 수 있도록 해주는라이브러리(해당 파일에 포함)http://modernizr.com/https://code.google.com/p/html5shiv/http://responsejs.com/
  • 14. H5BP ★ ETC
  • 15. humans.txtwe are people, Not Machinesrobots.txt는 로봇을 위한 설명이라면,humans.txt는 사람을 위한 설명이다.
  • 16. humans.txtwe are people, Not Machinesrobots.txt는 로봇을 위한 설명이라면,humans.txt는 사람을 위한 설명이다.
  • 17. THANK YOU