0. HTML이란?
HTML은 HyperText Markup Language(하이퍼텍스트 마크업 언어)의 약자로, 웹 페이지의 구조와 내용을 정의하기 위해 사용되는 마크업 언어입니다. HTML은 웹 브라우저에 의해 해석되어 사용자에게 웹 페이지를 표시하는 역할을 합니다.
1. HTML의 구성 요소 _ 태그(Tag)
HTML은 태그(tag)라 불리는 요소들로 구성되어 있습니다. 태그는 각각의 역할과 의미를 가지며, 문서의 구조, 텍스트, 이미지, 링크, 테이블 등 다양한 요소를 정의합니다. 태그는 각각 '<' 와 '>'로 둘러싸여 있으며, 시작 태그와 종료 태그로 구성될 수 있습니다.
<시작태그> ... </종료태그>
* HTML은 웹 페이지의 시맨틱(Semantic) 표현을 위해 설계되었습니다.
즉, 태그의 의미를 명확하게 나타내어 웹 페이지의 구조와 내용을 이해하기 쉽게 만듭니다. 이렇게 구조화된 HTML 문서는 검색 엔진이나 웹 접근성과 같은 측면에서도 중요한 역할을 합니다.
2. HTML의 구조 _ 부모 - 자식 구조
HTML 문서의 구성 요소들은 부모-자식 구조를 가집니다. 계층적인 관계를 나타내는 부모 요소는 다른 요소를 포함하는 상위 요소이고, 자식 요소는 부모 요소에 속한 하위 요소입니다. 이 구조를 사용하여 웹 페이지의 구조와 계층을 정의할 수 있습니다.
부모 요소는 자식 요소를 감싸고, 스타일과 속성을 상속할 수 있습니다. 자식 요소는 부모 요소의 범위 안에 위치하며, 부모 요소에 의해 영향을 받을 수 있습니다. 이 구조를 통해 웹 페이지의 레이아웃과 구조를 조직화하고, 요소들 간의 관계를 명확하게 표현할 수 있습니다.
1) head 태그
<head> 태그는 HTML 문서의 헤더 정보를 정의하는 부분입니다. 이 섹션은 브라우저에게 웹 페이지에 대한 추가 정보를 제공하고, 문서의 설정과 메타데이터를 포함합니다.
* 주요 하위 요소 정리
<title>: 문서의 제목을 정의합니다. 브라우저의 탭에 표시되는 제목입니다.
<meta>: 문서에 대한 메타데이터를 정의합니다. 예를 들어, 문자 인코딩, 뷰포트 설정, 검색 엔진 최적화 등을 지정할 수 있습니다.
<style>: 문서 내에서 CSS 스타일을 직접 정의합니다.
* meta 데이터란?
메타데이터는 데이터에 대한 정보를 제공하는 데이터입니다. 즉, 데이터를 설명하고 식별하는 데이터라고 할 수 있습니다. 메타데이터는 웹 페이지의 정보를 기술하고 정의하는 데 사용됩니다. 예를 들어, 웹 페이지의 제목, 작성자, 생성일, 키워드 등은 메타데이터의 일부입니다.
2) body 태그
<body> 태그는 웹 페이지의 본문 내용을 정의하는 부분입니다. 이 섹션은 사용자에게 표시되는 모든 콘텐츠를 포함하며, 주로 텍스트, 이미지, 동영상, 링크 등의 요소로 구성됩니다. 사용자가 웹 페이지를 브라우저에서 렌더링할 때 <body> 안에 있는 내용이 표시됩니다.
* 주요 하위 요소 정리
<h1>, <h2>, <h3>, ...: 제목을 정의하는 태그로, 숫자가 커질수록 제목의 수준이 낮아집니다.
<p>: 단락을 정의합니다. 텍스트를 단락으로 구분할 때 사용합니다.
'COMPUTER SCIENCE > World Wide Web Course' 카테고리의 다른 글
| 웹의 동작 원리를 알아보자: 클라이언트와 서버의 상호작용 (0) | 2023.07.05 |
|---|