반응형

HTML Boilerplate

HTML Boilerplate란 HTML 문서를 생성하기 위한 기본 구조 또는 템플릿이다. HTML 문서를 적절히 포매팅하고 다양한 브라우저에서 작동하도록 해주는 필수 element와 tag들이 포함되어 있다.

HTML Boilerplate는 웹 개발 시작 초기에 사용되는 템플릿이다.

아래와 같은 boilerplate 코드를 모든 HTML 파일에 추가해야 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 

HTML 기본 구조

HTML의 기본 구조를 이해하기 위해, boilerplate에서 내용이 좀 더 추가된 아래 코드를 분석해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A brief description of the webpage.">
    <meta name="keywords" content="HTML, CSS, JavaScript, web development">
    <meta name="author" content="Your Name">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="preload" href="main.js" as="script">
    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    
    <main>
        <p>This is a basic HTML boilerplate template.</p>
    </main>
    
    <footer>
        <p>&copy; 2024 Your Name</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

 

위 코드의 컴포넌트들을 하나씩 설명한다.:

  • <!DOCTYPE html>: HTML Living Standard 문서임을 명시한다. HTML Living Standard는 점진적으로 진화 중인, 현재 최신의 HTML 표준을 가라킨다.
  • <html>: HTML 문서의 루트(최상단 element)이며, 문서의 시작과 끝을 나타낸다.
    • lang="en" lang 속성은 HTML 문서의 주 언어를 선언한다. 이 경우엔 영어이며, 한국어로 지정하고 싶다면 "en" 대신 "ko"를 명시해야 한다.
  • <head>: 문서의 메타데이터를 정의하는 부분이다. 웹페이지의 설정, 정보, 스타일 및 스크립트 등을 포함한다.
    • <meta>: 웹페이지의 메타 정보를 담고 있다. 문서의 가장 윗부분에 적시되며, 웹페이지 자체에 디스플레이되지는 않지만, 웹페이지가 어떻게 동작할지, 인덱스될지, 스타일링될지 등의 핵심적인 정보를 제공한다.
      • <meta charset="UTF-8">: charset 속성은 캐릭터 인코딩을 UTF-8로 세팅한다. UTF-8로 하면 세계 각종 언어의 거의 대부분을 커버할 수 있다.
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">: 이 웹페이지가 모바일 장치의 디스플레이에서도 정상적으로 표시되도록 하는 반응형 디자인을 갖추도록 제어한다.
      • <meta name="description" content="A brief description of the webpage.">: 검색엔진에 의해 검색되는 부분이며, 검색결과의 미리보기 텍스트(snippet)로 활용된다.
      • <meta name="keywords" content="HTML, CSS, JavaScript, web development">: 과거엔 중요했지만, 현대의 검색엔진에선 무시된다.
      • <meta name="author" content="Your Name">: 작성자 정보를 나타낸다.
      • <title>: 웹페이지의 제목을 나타낸다. 브라우저의 tab이나 검색엔진의 검색결과에 나타난다.
    • <link>: 외부리소스와 현재 HTML 문서를 연결하는 역할을 한다. 빈 태그와 속성만을 포함하고, <head> 안에만 위치할 수 있다. rel 속성은 대상 파일의 속성을 나타내며, href 속성은 연결 시 참조할 파일의 위치를 나타낸다.
      • <link rel="stylesheet" href="styles.css">: 스타일링을 위해 외부의 CSS 파일을 링크한다.
      • <link rel="icon" href="favicon.ico" type="image/x-icon">: 브라우저 탭에 표시될 작은 아이콘(파비콘)을 설정한다.
      • <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        </head>: 외부 custom font를 로드한다.
      • <link rel="preload" href="main.js" as="script">: 리소스를 미리 로드하여 성능 최적화
      • <link rel="prefetch" href="future-page.html">: 리소스를 예비로 로드하여 성능 최적화
    • <script>: JavaScript 코드를 HTML 문서에 포함하거나 외부 JavaScript 파일을 연결함으로써, 웹 페이지의 동적 기능을 추가하는 데 사용된다. 
      • <head> 내에 <script>를 삽입하는 경우, 주로 문서 로딩 시 필요한 라이브러리나 설정 정보를 포함한다. 다만, <head>에 넣으면 페이지 로딩이 완료되기 전에 JavaScript가 실행되므로 페이지 로딩 성능에 영향을 줄 수 있다. 일반적으로 <body> 끝쪽에 넣는 것이 더 효율적이다.
      • <script src="script.js" defer></script>: 외부 Javascript 파일인 script.js을 연결한다. defer 속성은 HTML의 로딩이 끝난 뒤에 script를 동작시키도록 한다. defer가 아닌 async가 사용된 경우, JavaScript 파일을 비동기적으로 로드하여 페이지 렌더링에 영향을 미치지 않도록 한다.
  • <body>: 웹페이지의 본문을 나타내며, 실제로 사용자에게 보여지는 콘텐츠가 포함된다. 즉 페이지의 시각적인 부분 및 상호작용하는 요소들이 들어가는 영역이다. 웹페이지의 모든 내용은 <body> 안에 작성되어야 한다. 브라우저는 <body> 내부의 내용을 해석해서 렌더한다.
    • <header>: 웹페이지를 소개하는 내용 또는 navigational link를 담는다. 보통 웹사이트의 로고, 제목, 또는 메인 navigation 메뉴를 포함한다.
      • <h1>Welcome to My Website</h1>: 웹사이트의 title을 디스플레이 하고 있다.
    • <main>: 웹페이지의 주 콘텐츠(text, image 등)가 위치한다. 
      • <p>This is a basic HTML boilerplate template.</p>: 웹페이지를 묘사하는 단순한 문단이다.
    • <footer>: 웹페이지의 footer 콘텐츠(저작권, contact 정보, 링크 등)가 위치한다.
      • <p>&copy; 2024 Your Name</p>: 저작권 및 이름 정보가 담긴 문단이다.
    • <script>: 외부 JavaScript 파일을 연결하여 웹페이지의 동적 기능을 추가한다.
      • 위 <head>의 <script> 부분에서 말했듯이, <head> 안에 배치될 수 있지만, 성능 최적화를 위해 <body> 끝에 배치하는 것이 일반적이다. 또한  async와 defer 속성을 사용하여 JavaScript 파일의 로딩 방식을 제어할 수 있다.
      • <script src="script.js"></script>: 외부 Javascript 파일인 script.js을 연결한다.

 

(브라우저 렌더 결과)

 

 

참고 링크)

https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/

 

Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project

When you are building a new website, it is important to have a good starting foundation. In this article, I will explain what an HTML 5 boilerplate is and how to create a basic template to use in your projects. What is an HTML 5 boilerplate? Accordi...

www.freecodecamp.org

 

반응형
저작자표시

'HTML&CSS' 카테고리의 다른 글

[HTML&CSS] CSS Box Model  (0) 2024.12.18
[HTML&CSS] Font 설정하기  (0) 2024.12.17

+ Recent posts

티스토리툴바