HTML의 기본 문서 구조는 다음과 같습니다:
1. DOCTYPE: HTML 문서에 대한 정의입니다.
2. HTML 요소: 모든 HTML 문서의 기본 요소입니다.
3. Head 요소: 브라우저에게 HTML 문서에 대한 정보를 제공합니다.
4. Body 요소: HTML 문서의 실제 콘텐츠가 포함되어 있습니다.
예:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
# DOCTYPE
DOCTYPE 선언은 HTML 문서의 문서 타입을 지정하는 것입니다. 이 선언은 HTML 문서의 첫 라인에 위치하여야 하며, 브라우저에게 HTML 문서가 어떤 버전의 HTML을 사용하는지 알려줍니다.
예를 들어, HTML5 문서의 경우에는 다음과 같이 선언합니다:
<!DOCTYPE html>
DOCTYPE은 프로젝트에서 사용할 HTML 버전에 따라 달라집니다. HTML4, XHTML1 등 다양한 버전에 대한 DOCTYPE이 있습니다. 따라서 HTML 버전에 맞는 DOCTYPE을 선언하여 브라우저에게 HTML 문서가 어떤 형식으로 작성되었는지 알려줍니다.
DOCTYPE 선언은 HTML 문서의 렌더링 방식을 결정하는 것이기 때문에, HTML 문서의 정상적인 렌더링을 위해서는 정확한 DOCTYPE 선언이 필요합니다.
# HTML tag
HTML tag는 HTML 문서의 기본 요소입니다. 태그는 어떤 요소를 정의하고, 브라우저에게 그 요소의 의미와 구조를 알려줍니다. HTML tag는 여는 태그와 닫는 태그로 구성되어 있으며, 어떤 요소를 정의할 때는 여는 태그와 닫는 태그 사이에 콘텐츠를 포함할 수 있습니다.
예를 들어, 제목을 정의하는 <h1> tag는 다음과 같이 작성할 수 있습니다:
<h1>이것은 제목입니다</h1>
HTML tag는 다양한 요소를 정의할 수 있습니다. 몇 가지 주요 tag는 다음과 같습니다:
- <html>: HTML 문서의 최상위 tag입니다. HTML 문서 전체를 감싸는 tag입니다.
- <head>: HTML 문서의 head 영역을 감싸는 tag입니다. head 영역에는 문서의 제목, 메타 데이터 등이 포함됩니다.
- <body>: HTML 문서의 body 영역을 감싸는 tag입니다. body 영역에는 문서의 실제 콘텐츠가 포함됩니다.
- <p>: 문장을 정의하는 tag입니다.
- <a>: 링크를 정의하는 tag입니다.
- <img>: 이미지를 정의하는 tag입니다.
- <ul>: 순서없는 목록을 정의하는 tag입니다.
- <ol>: 순서있는 목록을 정의하는 tag입니다.
- <li>: 목록 항목을 정의하는 tag입니다.
- <table>: 테이블을 정의하는 tag입니다.
- <tr>: 테이블의 행을 정의하는 tag입니다.
- <th>: 테이블의 헤더 셀을 정의하는 tag입니다.
- <td>: 테이블의 데이터 셀을 정의하는 tag입니다.
HTML tag에는 또한 속성을 포함할 수 있습니다. 예를 들어, <a> tag에는 href 속성을 포함할 수 있습니다.
href 속성은 링크의 URL을 정의합니다. 다음과 같이 <a> tag에 속성을 추가할 수 있습니다:
<a href="https://www.example.com">이것은 링크</a>
HTML tag와 속성을 이용하여 HTML 문서의 내용을 구조화하고 꾸며줍니다.
HTML 문서의 서식과 레이아웃은 CSS(Cascading Style Sheets)를 이용하여 꾸며줄 수 있습니다.
HTML은 또한 JavaScript를 사용하여 동적으로 웹 페이지의 기능을 개선할 수 있습니다.
JavaScript를 이용하여 사용자 입력에 따라 페이지의 내용을 변경하거나 애니메이션 효과를 추가할 수 있습니다.
HTML, CSS, JavaScript의 조합으로 웹 페이지를 만드는 것은 웹 개발의 기본입니다.
HTML은 웹 페이지의 내용을 구조화하고 꾸며주는 것,
CSS는 웹 페이지의 서식과 레이아웃을 꾸며주는 것,
JavaScript는 웹 페이지의 기능을 개선하는 것을 담당합니다.
# Head tag
HTML 문서의 head 태그는 문서의 정보를 제공하는 역할을 합니다.
head 태그 안에는 문서의 제목, 메타 데이터, 스타일 정보, 스크립트 등을 포함할 수 있습니다.
head 태그는 문서의 body 태그와 달리 화면에 표시되지 않습니다.
head 태그 안에서 가장 중요한 태그는 title 태그입니다.
title 태그는 브라우저의 탭이나 즐겨찾기에서 보여지는 문서의 제목을 정의합니다.
또한 head 태그 안에서는 meta 태그를 사용하여 문서의 설명, 키워드, 문자 인코딩, 로봇 정책 등의 정보를 제공할 수 있습니다.
link 태그를 사용하여 문서에서 사용하는 CSS 파일을 연결할 수 있습니다.
script 태그를 사용하여 문서에서 사용하는 JavaScript 파일을 연결하거나 직접 작성할 수 있습니다.
정리하자면, head 태그는 HTML 문서의 브라우저에서 표시되지 않지만 매우 중요한 정보를 제공하는 역할을 합니다.
head 태그의 정보는 브라우저에서 사용자에게 보여지지 않지만, 브라우저에서 이 정보를 사용하여 문서를 제대로 렌더링하고, 검색 엔진에서 문서의 정보를 추출하는 등의 목적으로 사용됩니다.
따라서, head 태그를 적절하게 작성하여 HTML 문서의 정보를 제공하는 것은 매우 중요합니다.
# Title tag
Title 태그는 head 태그 내에서 유일하게 표시되는 태그입니다.
브라우저에서 사용자에게 보여지는 탭이나 즐겨찾기에 표시되는 텍스트, 검색 엔진에서 검색 결과에 표시되는 문서 제목으로 사용됩니다. 따라서, title 태그는 HTML 문서의 제목을 명시하는데 중요한 역할을 합니다.
Title 태그의 사용 방법은 다음과 같습니다.
<head>
<title>문서 제목</title>
</head>위와 같이 title 태그를 작성하여 HTML 문서의 제목을 명시할 수 있습니다.
# Body tag
Body 태그는 HTML 문서의 메인 컨텐츠(본문 영역)를 나타내는 태그입니다.
Body 태그 내에는 사용자에게 보여지는 모든 콘텐츠(텍스트, 이미지, 링크, 테이블, 폼 등의 요소들)가 위치합니다.
Body 태그의 사용 방법은 다음과 같습니다.
<body>
<!-- 본문 영역 -->
</body>위와 같이 Body 태그를 작성하여 HTML 문서의 본문 영역을 구조화할 수 있습니다.
Body 태그 내에는 제목, 목록, 링크, 이미지, 폼 등 다양한 태그를 사용하여 웹 페이지의 내용을 구성할 수 있습니다.