Home-theater-designers
새 웹사이트를 구축할 때 요즘에는 HTML5와 호환되기를 원할 것입니다. 하지만 HTML5의 복잡함을 처음부터 배우는 데 불필요한 시간을 보내고 싶지 않으신가요?
다행히도 HTML5 상용구 템플릿 도울 수있다. 몇 분 만에 HTML5 웹사이트를 만드는 데 사용할 수 있는 간단한 프런트 엔드 템플릿입니다. 그러나 복잡하고 완전한 기능을 갖춘 사이트의 기초로 사용할 수 있을 만큼 강력합니다.
mac os x는 이 컴퓨터에 설치할 수 없습니다
이 HTML5 상용구 튜토리얼에서는 템플릿에 포함된 내용, 템플릿 사용 방법에 대해 알아야 할 기본 사항, 추가 학습을 위한 몇 가지 리소스에 대해 설명합니다. 또한 몇 줄의 HTML만으로 매우 기본적인 사이트를 만들기 위해 템플릿을 사용하는 방법을 보여 드리겠습니다.
HTML5 상용구 템플릿
HTML5 Boilerplate에서 템플릿을 다운로드하면 여러 폴더와 파일을 얻게 됩니다. 다음은 ZIP 파일의 내용입니다.
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.png여기서는 템플릿의 모든 요소를 살펴보지 않고 기본 사항만 살펴보겠습니다. 모든 파일을 사용할 수 있는 리소스가 있는지 확인하기 위해 도움말 문서부터 시작하겠습니다.
HTML5 상용구 도움말 문서
상용구에는 다음 모음이 있습니다. GitHub에서 호스팅되는 도움말 문서 . 이것은 기술적인 질문이 있거나 무언가가 원래대로 설계된 이유가 궁금할 때 큰 도움이 됩니다.
문서의 거의 모든 내용은 템플릿의 doc 폴더에도 포함되어 있습니다. 상용구 사이트를 구축하는 방법을 알아내는 데 큰 도움이 되는 여러 Markdown(.md) 파일을 볼 수 있습니다.
모든 것을 읽으려면 TOC.md로 시작하고 거기에서 다른 Markdown 파일로 연결되는 링크를 따르십시오. 특정 문제에 대한 도움말을 찾고 있다면 관련이 있을 것 같은 파일을 찾으십시오. usage.md는 시작하기에 좋은 곳입니다.
HTML5 상용구의 CSS로 시작하기
HTML5 상용구 템플릿에는 main.css 및 normalize.css라는 두 가지 CSS 파일이 있습니다.
두 번째 파일인 normalize.css는 여러 브라우저에서 일관된 방식으로 요소를 렌더링하는 데 도움이 됩니다. 작동 방식에 대해 자세히 알아보려면 다음을 확인하세요. GitHub의 normalize.css 프로젝트 .
한편, main.css는 필요한 모든 코드를 입력하는 곳입니다. CSS로 사이트 형식 지정 . 템플릿에 포함된 표준 CSS는 개발자와 HTML5 Boilerplate 커뮤니티에서 수행한 연구의 결과입니다. 그것은 읽기 쉽고 다른 브라우저에서 멋지게 표시됩니다.
자신의 CSS를 추가하려면 작성자의 사용자 정의 스타일 섹션에 추가할 수 있습니다. 예제 페이지에 약간의 링크 스타일을 추가하겠습니다.
또한 기본 CSS에 포함된 유용한 도우미 클래스가 많이 있습니다. 그 중 일부는 표준 브라우저와 화면 판독기(또는 일부 조합)에서 항목을 숨깁니다.
또한 main.css에서는 반응형 디자인 및 유용한 인쇄 설정에 대한 지원을 찾을 수 있습니다.
이 모든 항목은 CSS의 주석으로 명확하게 설명됩니다.
일반적으로 기본 CSS로 시작할 수 있습니다.
템플릿에 나만의 HTML 추가하기
상용구에는 404.html과 index.html이라는 두 개의 HTML 파일이 포함되어 있습니다.
색인 페이지는 귀하의 홈페이지(또는 간단한 한 페이지를 사용하려는 경우 유일한 페이지)를 만드는 곳입니다.
브라우저에서 색인 페이지를 열면 한 줄의 텍스트가 표시됩니다. 그러나 HTML을 살펴보면 코드에 더 많은 것이 숨겨져 있음을 알 수 있습니다. 변경에 대해 정말로 걱정해야 하는 유일한 것은 Google 웹로그 분석 코드입니다('UA-XXXXX-Y' 텍스트를 찾아 자신의 추적 코드로 대체).
색인 페이지의 나머지 HTML에는 웹 앱에 대한 정보, 이전 브라우저에 대한 알림 및 유용한 JavaScript가 포함됩니다. 시작할 때 이 중 하나를 엉망으로 만들 필요가 없습니다.
그러나 미리 채워져 있는 것은 사이트가 HTML5를 최대한 활용할 수 있도록 준비하는 좋은 방법입니다.
페이지를 만들려면 파일의 태그 사이에 HTML을 삽입하세요. 다음은 나 자신에 대해 추가할 몇 가지 기본 정보입니다.
더 많은 페이지를 만들고 싶으십니까? 이 파일의 복사본을 만들고 모든 HTML을 복사하여 붙여넣을 필요가 없도록 이름을 바꿉니다. 그런 다음 콘텐츠를 추가합니다.
404 페이지를 사용자 정의하려면 HTML 파일을 수정하면 됩니다. 404 페이지에 무엇을 입력해야 할지 모르십니까? 이 훌륭한 404 페이지 디자인 예제를 확인하십시오.
파비콘(및 기타 아이콘) 추가
파비콘을 교체하고 싶으십니까? 그런 다음 favicon.ico는 교체해야 하는 파일입니다.
아직 계정이 없으면 새로 만들어야 합니다. 온라인 파비콘 생성기를 사용하거나 직접 디자인할 수 있습니다. 16 x 16 픽셀이고 .ico 파일 유형인지 확인하십시오.
부팅 가능한 DVD를 굽는 방법
파비콘에 생각을 넣어보는 것이 좋습니다. 이 유명한 파비콘을 사용하여 브레인스토밍을 안내하세요. 새 favicon을 추가할 때 favicon.ico라고 하는지 확인하십시오.
사이트의 루트 디렉토리에 icon.png, tile.png 및 tile-wide.png의 세 가지 다른 이미지가 있음을 알 수 있습니다. 이것들은 무엇을 위한 것입니까?
- icon.png는 Apple 터치 아이콘에 사용됩니다. 웹 앱을 빌드하는 경우 iPhone 또는 iPad 사용자가 홈 화면에 앱을 추가할 때 이 아이콘이 사용됩니다.
- tile.png 및 tile-wide.png는 Windows의 '고정' 기능용이며 Windows 10에 표시됩니다.
이러한 모든 경우에 아이콘을 제공하는 것이 좋습니다. 하지만 웹 앱을 빌드하지 않는 경우 우선 순위가 낮을 수 있습니다.
더 많은 기능 추가
HTML과 파비콘(포함하려는 CSS 포함)을 추가하면 사이트를 게시할 준비가 된 것입니다. 이것이 바로 HTML5 Boilerplate를 사용하는 것이 얼마나 쉬운지입니다. 서버에 업로드하면 완료됩니다!
다음은 우리 페이지의 모습입니다.
보시다시피, 몇 줄의 텍스트만으로 완전한 기능을 갖춘(약간 밋밋한 경우) 웹사이트가 만들어졌습니다. 많지는 않지만 몇 분 밖에 걸리지 않았습니다. HTML5로 확장성이 뛰어납니다. 이것이 바로 상용구 템플릿의 힘입니다.
하지만 원한다면 보일러플레이트 템플릿으로 할 수 있는 일이 훨씬 더 많습니다. 찾고 있는 특정 항목이 있는 경우 도움말 문서에서 찾을 가능성이 큽니다.
HTML5로 무엇을 할 수 있는지 확실하지 않지만 알고 싶다면 도움이 될 웹 디자인 튜토리얼이 많이 있습니다.
공유하다 공유하다 트위터 이메일 호환되지 않는 PC에 Windows 11을 설치해도 되나요?이제 공식 ISO 파일을 사용하여 구형 PC에 Windows 11을 설치할 수 있습니다... 하지만 그렇게 하는 것이 좋은 생각입니까?
다음 읽기 관련 항목- 프로그램 작성
- HTML5
- 코딩 튜토리얼
Dann은 기업이 수요와 리드를 생성하도록 돕는 콘텐츠 전략 및 마케팅 컨설턴트입니다. 그는 또한 dannalbright.com에서 전략 및 콘텐츠 마케팅에 대한 블로그를 운영하고 있습니다.
댄 올브라이트가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.