HTML 기본
이 문서에서는 HTML의 기본에 대해 설명합니다.
이것은 DOCTYPE 선언, <html>, <head>, <body> 태그와 같은 주요 태그를 설명합니다. 또한 태그, 속성 및 특수 문자를 설명합니다.
YouTube Video
HTML 기본
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>파일의 시작 부분에서 이 문서가 HTML5 문서임을 선언하여 HTML5 규칙을 따름을 나타냅니다.
-
<html><html>태그는 HTML 문서에서 전체 내용을 감싸는 가장 바깥쪽 요소입니다. 각 HTML 파일에는<html>태그가 하나만 포함되며, 다른 모든 태그는 이 태그 내부에 중첩되어 있습니다. 시작<html>태그 안의lang="en"은 속성이라고 불리며, 문서가 영어로 작성되었음을 브라우저에 알려줍니다. 이는 화면 리더와 검색 엔진에 문서의 언어를 알리는 데 도움이 됩니다. -
<head><head>태그는 페이지에 대한 메타데이터(정보)를 정의합니다. 여기에는 페이지 제목, 문자 인코딩 및 반응형 디자인 설정이 포함됩니다. 반응형 디자인은 웹사이트나 앱이 다양한 장치와 화면 크기에 맞게 적응하고 잘 표시되도록 설계된 방법을 의미합니다. 이를 통해 사용자는 스마트폰, 태블릿, 데스크톱과 같은 다양한 장치에서 콘텐츠를 편안하게 볼 수 있습니다.<meta charset="UTF-8">는 문서의 문자 인코딩을 UTF-8로 설정합니다.<meta name="viewport" content="width=device-width, initial-scale=1.0">는 모바일 장치에 맞춰 화면을 최적화하는 설정입니다. 페이지가 장치의 화면 너비에 맞춰 조정됩니다.<title>은 브라우저 탭에 표시되는 페이지 제목을 나타냅니다. 이 예에서 'HTML의 기본'이라는 제목이 설정됩니다. -
<body><body>태그는 사용자에게 내용을 표시하는 부분을 포함합니다. 이 태그 안에는 텍스트, 이미지, 링크 등이 작성됩니다. -
<main><main>태그는 페이지의 주요 콘텐츠를 나타냅니다. 여기에는 제목과 단락이 포함됩니다. -
<h1><h1>태그는 페이지에서 가장 중요한 제목을 나타냅니다. 문서에서<main>태그와<h1>태그를 한 번만 사용하는 것이 일반적입니다. -
<p><p>태그는 단락을 나타냅니다. -
<!-- Comment -->HTML에서 이 형식으로 주석을 작성할 수 있습니다. 클라이언트 측 HTML은 누구나 볼 수 있으므로 주석에 비밀번호나 API 키와 같은 민감한 정보를 포함하지 마세요.
HTML에는 많은 태그가 있지만, 여기에서는 다음 사항에 주목하세요. HTML 파일은 DOCTYPE 선언과 하나의 <html> 태그로 구성됩니다. <html> 태그에는 하나의 <head> 태그와 하나의 <body> 태그가 포함됩니다. HTML에서는 모든 태그가 <html> 태그 안에 포함되어 있으며, 부모, 자식 및 형제 관계를 통해 텍스트의 구조를 표현하며, 이는 트리 구조와 유사합니다. HTML을 작성할 때 문서 구조에도 집중하세요.
태그와 속성
다음으로, HTML 태그와 속성을 살펴보겠습니다.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->태그는 꺾쇠 괄호 (<, >)로 둘러싸여 있으며 일반적으로 시작 및 종료 태그의 쌍으로 구성됩니다. 그러나 <meta> 태그와 <img> 태그와 같이 내용을 포함하지 않는 단일 태그도 있습니다. 단일 태그는 종료 태그가 필요하지 않습니다.
태그에는 추가 정보를 제공하는 속성을 가질 수 있습니다. 속성은 시작 태그 안에 attributeName="value" 형식으로 작성됩니다.
여기서 <div>는 태그라고 하며, <div>Content</div>는 요소라고 합니다.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>HTML에서 일반적인 속성에는 id, class, style 등이 있습니다. id 속성은 요소에 고유 식별자를 부여하는 데 사용되며, 같은 페이지에 동일한 id를 가진 요소는 하나만 있을 수 있습니다. JavaScript나 CSS로 특정 요소를 조작할 때 유용합니다. class 속성은 클래스 이름을 할당하여 여러 요소를 CSS 또는 JavaScript와 함께 그룹화할 수 있게 합니다. 여러 요소에 같은 클래스를 할당할 수 있어 스타일을 공유할 수 있습니다. style 속성은 요소에 대한 CSS 스타일을 인라인으로 지정합니다. 보통 스타일은 외부 스타일시트나 <style> 태그 안에 정의되지만, 개별 요소에 스타일을 직접 지정하고자 할 때 이 속성을 사용합니다.
HTML에서의 특수 문자
다음으로, HTML에서의 특수 문자를 살펴보겠습니다.
HTML에서는 특정 기호와 문자를 표시하는 데 사용되는 특수 문자가 있습니다. 이러한 특수 문자는 엔티티라고 불립니다. 특수 문자는 &(앰퍼샌드)로 시작하고, 이름이나 숫자가 뒤따르며, ;(세미콜론)으로 끝납니다.
HTML의 대표적인 특수 문자
몇 가지 일반적인 특수 문자입니다.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
HTML에서 특수 문자를 사용하는 예시
특히, 각괄호(<, >)와 큰따옴표는 HTML에서 올바르게 사용되어야 합니다.
꺾쇠 괄호(<, >)와 큰따옴표는 아래와 같이 HTML에서 특수 문자로 표현되어야 합니다.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTML 버전
여기에서 HTML 버전을 살펴봅시다.
HTML 버전은 웹 페이지의 구조와 기능을 정의하도록 발전해 왔습니다. 다음은 주요 버전입니다:.
-
HTML 1.0 (1993)
첫 번째 HTML 버전은 매우 기본적인 마크업 기능만을 가지고 있었습니다. 링크, 제목, 단락, 목록 등의 요소를 정의했습니다.
-
HTML 2.0 (1995)
양식과 테이블 지원 등을 포함하여 더 많은 요소가 추가된 최초의 표준화 버전입니다.
-
HTML 3.2 (1997)
스타일 요소와 스크립트를 삽입할 수 있도록 더 많은 레이아웃 기능이 추가되었습니다. 또한,
<table>요소를 사용한 레이아웃이 일반화되었습니다. -
HTML 4.01 (1999)
구조와 표현의 분리가 진전되었고, CSS가 도입되었습니다. 표준을 준수하는 사이트의 생성이 권장되었습니다. 게다가, 문서의 국제화와 접근성이 향상되었습니다.
-
HTML5 (2014)
비디오와 오디오, 캔버스, 로컬 스토리지, 지리 위치 그리고 기타 새로운 API들을 지원하는 최신 주요 버전입니다. 모바일 친화적이며, 더 많은 상호작용 웹 애플리케이션 개발을 가능하게 합니다.
HTML5.2는 2017년에 권장된 HTML의 버전이며, HTML5의 개선된 버전입니다. HTML5.2 이후로, 고정 버전 번호 대신 HTML Living Standard로 지속적으로 업데이트되고 있습니다.
HTML은 이러한 버전을 거치면서 진화하였고, 더 유연하고 강력한 웹 기술로 발전해왔습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.