이번 글에서는 HTML에 대해 처음 배우는 분들을 위해, 간단한 예제 코드를 통해 HTML의 기본 구조와 기능을 설명하겠습니다. 이 코드는 Vite와 React, TypeScript를 사용하는 프로젝트의 기본 HTML 파일이며, 각 부분이 어떤 역할을 하는지 자세히 알아보겠습니다.
코드:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<button id="insertButton">Press Button</button> <!-- 버튼 ID 수정 -->
<script type="module" src="/src/main.tsx"></script>
<script>
function insertInputs() {
console.time("Press Button");
const divEl = document.querySelector("#root"); // #root를 선택
const fragment = document.createDocumentFragment(); // 성능 향상을 위한 DocumentFragment 생성
for (let i = 0; i < 3000; i++) {
const inputEl = document.createElement('input'); // input 요소 생성
inputEl.type = 'text';
inputEl.value = `input${i}`;
fragment.appendChild(inputEl); // Fragment에 추가
}
divEl.appendChild(fragment); // Fragment를 한 번에 DOM에 추가
console.timeEnd("Press Button");
}
// 버튼 클릭 시 insertInputs 함수를 실행
const button = document.querySelector("#insertButton");
button.addEventListener("click", insertInputs);
</script>
</body>
</html>
처음에 이걸 보면 뭐라하는지 이해를 못할 것이다. 이를 쉽게 이해할 수 있도록 하나 하나 뜯어보도록 하자.
코드 상세 설명
1.<!doctype html>
이 선언문은 HTML5 문서를 정의하는 문법으로, 웹 브라우저에 이 문서가 HTML5 표준을 따르고 있음을 알립니다.
2.<html lang="en">
<html> 태그는 HTML 문서의 루트 요소입니다. lang="en" 속성은 문서의 기본 언어가 영어임을 지정합니다.
<head>
<head>태그 안에는 웹페이지의 메타데이터가 포함됩니다. 이 메타데이터는 페이지의 제목, 문자 인코딩 방식, 아이콘 파일 등 다양한 정보를 담고 있습니다.<meta charset="UTF-8" />: 이 줄은 웹페이지의 문자 인코딩을 UTF-8로 설정합니다. UTF-8은 전 세계의 대부분의 문자를 표현할 수 있는 인코딩 방식입니다.<link rel="icon" type="image/svg+xml" href="/vite.svg" />: 이 줄은 웹페이지의 탭에 표시되는 아이콘을 설정합니다. 여기서는 vite.svg 파일을 사용합니다.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: 이 줄은 모바일 장치에서 웹페이지가 잘 보이도록 뷰포트의 크기를 설정합니다.<title>Vite + React + TS</title>: 이 줄은 웹페이지의 제목을 설정하며, 브라우저의 탭에 표시됩니다.
4.<body>
-
<body>태그 안에는 웹페이지에 실제로 표시되는 콘텐츠가 포함됩니다. -
<div id="root"></div>: 이 div는 React 애플리케이션이 렌더링될 위치를 나타냅니다. 나중에 JavaScript가 이 div를 찾아서 React 컴포넌트를 렌더링합니다. -
<button id="insertButton">Press Button</button>: 이 버튼은 사용자가 클릭할 수 있는 요소입니다. id="insertButton"으로 버튼을 식별할 수 있습니다.
5.<script>
-
<script>태그 안에는 JavaScript 코드가 포함됩니다. 이 코드는 웹페이지가 로드된 후 실행됩니다. -
<script type="module" src="/src/main.tsx"></script>: 이 줄은 외부 JavaScript 파일을 불러옵니다. 여기서는 main.tsx 파일을 모듈로 불러와서 사용합니다. -
function insertInputs() {...}: 이 함수는 버튼이 클릭될 때 3000개의 input 요소를 동적으로 생성하고, 이를 DOM에 추가하는 역할을 합니다. -
console.time("Press Button") / console.timeEnd("Press Button"): 이 두 줄은 버튼을 클릭한 후 input 요소들이 DOM에 추가되는 데 걸리는 시간을 측정합니다. -
document.querySelector("#insertButton"): 이 줄은 버튼 요소를 선택하고, 클릭 이벤트를 추가합니다. 버튼이 클릭되면 insertInputs 함수가 실행됩니다.
전방을 향해 힘찬 함성 소리 3초간 발사! 으아아아ㅏ아아아!!!
이번 예제 코드를 통해 HTML의 기본 구조와 역할을 이해할 수 있었습니다. HTML은 웹페이지의 뼈대를 구성하며, 각 태그는 특정한 역할을 담당합니다. <"head">에는 메타데이터와 관련된 정보가, <"body">에는 실제 콘텐츠가 들어가며, JavaScript를 사용하여 동적인 기능을 추가할 수 있습니다.
특히, React와 같은 JavaScript 라이브러리와 함께 사용할 때 HTML이 어떻게 구성되고 연결되는지 알 수 있었으며, JavaScript를 통해 DOM을 동적으로 조작하는 방법도 배웠습니다. 이러한 기초 지식을 바탕으로 더 복잡한 웹 애플리케이션을 이해하고 개발할 수 있는 능력을 키울 수 있을 것입니다.
앞으로 HTML과 JavaScript의 더 많은 기능을 탐구하고, 이를 실전 프로젝트에 적용해보는 경험을 쌓고자 합니다. 이 글이 HTML을 처음 접하는 분들에게 도움이 되기를 바랍니다.
