● doctype 선언과 목적
doctype 선언은 문서에서 사용 중인 HTML 버전을 지정하는 데 사용됩니다. 이 선언은 브라우저에 문서의 HTML 코드를 해석하는 방법을 알려줍니다. doctype 선언은 HTML 문서에서 <html> 태그 앞에 가장 먼저 와야 합니다. 이는 HTML 태그가 아니라 브라우저에 지정된 버전의 HTML을 사용하도록 지시하는 명령어입니다.
예를 들어 HTML5 문서의 doctype은 간단합니다:
<!DOCTYPE html>이는 문서가 HTML5 표준을 사용하고 있음을 브라우저에 알려줍니다. 다른 버전의 HTML에는 다른 독타입 선언이 있습니다. 올바른 문서 유형을 사용하는 것이 중요한 이유는 문서가 여러 브라우저에서 올바르게 해석되고 표시되도록 하기 때문입니다. 문서 유형 선언이 없으면 브라우저에서 문서가 사용 중인 HTML 버전을 추측해야 하므로 여러 브라우저에서 일관되지 않은 렌더링이 발생할 수 있습니다.
● HTML 요소와 다른 모든 요소의 컨테이너로서의 역할
HTML 문서의 기본 구조에서 <html> 요소는 문서 내 다른 모든 요소의 컨테이너 역할을 합니다. 문서의 루트 요소이며 웹 페이지의 콘텐츠를 구성하는 구조를 제공합니다.
다른 모든 요소는 <html> 요소 안에 포함됩니다. <head> 요소는 페이지 제목, 외부 스타일시트 링크, 스크립트 등 문서에 대한 메타데이터를 포함하는 데 사용됩니다. <body> 요소는 텍스트, 이미지 및 기타 미디어와 같이 웹 페이지에 표시되는 콘텐츠를 포함하는 데 사용됩니다.
각 HTML 요소는 특정 용도로 사용되며 문서에 구조, 콘텐츠 및 서식을 추가하는 데 사용됩니다. 예를 들어 <h1>에서 <h6> 요소는 페이지에 제목을 추가하는 데 사용되며, <p> 요소는 텍스트 단락을 정의하는 데 사용됩니다.
다른 요소 안에 요소를 중첩하여 문서의 여러 부분 간의 관계를 정의하는 계층 구조를 만들 수 있습니다. 예를 들어 <header> 요소를 사용하여 페이지의 상단 섹션을 정의한 다음 그 안에 제목 및 탐색 링크와 같은 다른 요소를 중첩할 수 있습니다.
전반적으로 HTML 요소는 함께 작동하여 읽기 쉽고 이해하기 쉬운 체계적이고 구조화된 문서를 만듭니다.
● 제목 요소를 포함한 헤드 요소 및 메타데이터 용도
HTML 문서의 기본 구조에서 <head> 요소는 페이지 제목, 외부 스타일시트 링크, 스크립트 등 문서에 대한 메타데이터를 포함하는 데 사용됩니다. <head> 요소는 페이지 자체에는 표시되지 않지만 브라우저 및 기타 애플리케이션에 문서에 대한 정보를 제공하는 데 사용됩니다.
<head> 섹션에 자주 포함되는 중요한 요소 중 하나는 <title> 요소입니다. 이 요소는 브라우저의 제목 표시줄에 표시되는 문서 제목을 지정하는 데 사용되며 문서를 저장하거나 북마크할 때 기본 이름으로도 사용됩니다.
제목 요소 외에도 <head> 섹션에는 페이지의 레이아웃과 프레젠테이션을 제어하는 데 사용되는 외부 스타일시트에 대한 링크도 포함할 수 있습니다. 이러한 링크는 일반적으로 스타일시트 파일의 위치 및 문서와의 관계를 지정하는 <link> 요소를 사용하여 포함됩니다.
<head> 섹션에 포함할 수 있는 기타 메타데이터에는 검색 엔진 및 기타 애플리케이션에 문서에 대한 정보를 제공하는 메타 태그가 포함됩니다. 예를 들어 메타 태그를 사용하여 문서의 작성자, 콘텐츠와 연관된 키워드 또는 문서에 사용된 문자 인코딩을 지정할 수 있습니다.
전반적으로 <head> 섹션은 페이지의 콘텐츠가 아닌 문서 자체에 대한 정보를 제공하는 데 사용되는 HTML 문서의 중요한 부분입니다. 제목, 스타일시트 및 메타 태그와 같은 메타데이터를 포함하면 다양한 브라우저 및 애플리케이션에서 문서가 올바르게 표시되고 해석되도록 할 수 있습니다.
● 본문 요소와 페이지의 표시 콘텐츠에 대한 컨테이너로서의 역할
HTML 문서의 기본 구조에서 <body> 요소는 웹 페이지에 표시되는 콘텐츠를 담는 데 사용됩니다. 텍스트, 이미지, 기타 미디어 등 페이지의 주요 콘텐츠를 구성하는 모든 요소를 담는 컨테이너 역할을 합니다.
<body> 요소의 콘텐츠는 페이지가 로드될 때 브라우저 창에 표시되는 내용입니다. 여기에 페이지의 주요 부분을 구성하는 모든 텍스트, 이미지 및 기타 콘텐츠를 포함할 수 있습니다.
<body> 요소 내에서 다양한 다른 요소를 사용하여 콘텐츠의 구조와 서식을 지정할 수 있습니다. 예를 들어 제목(<h1> ~ <h6>)을 사용하여 페이지의 주요 섹션을 정의하고, 단락(<p>)을 사용하여 텍스트 블록을 구분하고, 목록(<ul> 및 <ol>)을 사용하여 정보를 구성할 수 있습니다.
페이지에 포함할 콘텐츠 유형에 따라 <body> 요소 내에 사용할 수 있는 다른 요소로는 이미지(<img>), 링크(<a>), 양식 컨트롤(<form>) 등이 있습니다.
전반적으로 <body> 요소는 웹 페이지에 표시되는 모든 콘텐츠를 담는 컨테이너 역할을 합니다. <body> 요소 내에서 다른 HTML 요소를 사용하여 콘텐츠를 구조화하고 서식을 지정하여 잘 정리되고 읽기 쉬운 페이지를 만들 수 있습니다.
'HTML, CSS, JavaScript' 카테고리의 다른 글
| 01 HTML 개요, 기본 구문 및 구조_5. 입력 요소로 간단한 양식 만들기 (0) | 2023.05.21 |
|---|---|
| 01 HTML 개요, 기본 구문 및 구조_4. 이미지 작업 (0) | 2023.05.20 |
| 01 HTML 개요, 기본 구문 및 구조_3. 블록 수준 요소와 인라인 요소 (0) | 2023.05.14 |
| 01 HTML 개요, 기본 구문 및 구조_2. HTML 요소 (0) | 2023.05.13 |
| [HTML, CSS, JavaScript] 학습 로드맵_by ChatGPT (0) | 2023.05.08 |