1. HTML
HTML은 문서(웹페이지)의 구조를 나타내는 마크업 언어다.
1.1 HTML의 배경
창시자: 팀 버너스-리 (Tim Berners-Lee)
- 영국의 컴퓨터 과학자, 웹의 아버지
- URL, HTTP, HTML 최초 설계와 구현
기원
- HTML은 1990년대 초에 개발되었으며, 월드 와이드 웹 (WWW)의 중요한 구성 요소로 등장했다.
발전
- HTML은 초기 버전에서부터 여러 버전의 업데이트와 표준화 단계를 거쳐 왔다.
*현재의 최신 버전은 HTML5이며, HTML5는 보다 강력하고 다양한 기능을 제공하며 웹 개발을 더욱 효율적으로 만들어 주었다.
1.2 HTML을 구성하는 요소
HTML 문서는 다양한 요소(Element)로 구성되어 있다. 각 요소는 특정한 의미를 가지며, 웹페이지의 구조와 내용을 정의한다.
1.3 HTML의 요소
1.3.1 요소 1
1.3.2 요소 2
1.3.3 요소 3
2. HTML 요소의 종류
2.1 문서 구조 (Document Structure)
문서 구조 (Document Structure) 카테고리에 속하는 요소들은 전체 문서의 구조를 형성하고, 웹페이지의 기본적인 레이아웃을 정의한다.
-
<html>: HTML 문서의 시작과 끝을 감싸는 최상위 요소다. 모든 다른 요소는 이 요소 안에 포함되어야 한다. -
<head>: 문서의 메타데이터를 포함하며, 제목(title), 스타일 시트(link 또는 style 요소), 스크립트(script) 등을 정의한다. -
<body>: 실제 콘텐츠를 포함하는 요소로, 사용자에게 표시되는 모든 콘텐츠(텍스트, 이미지, 링크 등)를 포함한다.
2.2 텍스트 및 제목 (Text & Headings)
텍스트 및 제목 (Text & Headings) 카테고리는 웹페이지에서 텍스트를 나타내고 구조화하는 요소들을 포함한다.
-
<h1>to<h6>: 제목을 나타내는 요소로,<h1>이 가장 크고 중요한 제목을 나타내며,<h6>이 가장 작은 제목을 나타낸다. -
<p>: 단락(paragragh)을 나타내는 요소로, 텍스트 블록을 형성한다. -
<span>: 텍스트의 특정 부분을 그룹화하거나 스타일링하기 위해 사용되는 인라인 요소다.
2.3 텍스트 서식 (Text Formatting)
텍스트 서식 (Text Formatting) 카테고리는 텍스트의 스타일 및 서식을 변경하거나 강조하는 요소들을 포함한다.
-
<b>: 텍스트를 굵게(bold) 표시하는 요소다. -
<i>: 텍스트를 이탤릭체(italic)로 표시하는 요소다. -
<strong>: 중요한 텍스트를 의미적으로 강조하는 요소다. -
<em>: 강조(emphasize)할 텍스트를 지정하는 요소로, 일반적으로 이탤릭체로 표시된다.
2.4 레이아웃 및 섹셔닝 (Layout & Sectioning)
레이아웃 및 섹셔닝 (Layout & Sectioning) 카테고리는 웹페이지의 레이아웃을 구성하고 섹션을 정의하는 요소들을 포함한다.
-
<div>: 구획을 나누거나 그룹화할 때 사용되는 일반적인 컨테이너 요소다. -
<main>: 주요 콘텐츠 영역을 정의하는 요소다. -
<section>: 문서의 섹션을 나타내는 요소로, 주제나 콘텐츠의 구분을 위해 사용된다. -
<header>: 헤더 섹션을 정의하는 요소로, 제목이나 로고 등의 정보를 포함한다. -
<footer>: 푸터 섹션을 정의하는 요소로, 저작권 정보나 연락처 정보 등을 포함한다.
2.5 목록 및 링크 (Lists & Links)
목록 및 링크 (Lists & Links) 카테고리는 목록을 정의하거나 다른 문서로의 링크를 생성하는 요소들을 포함한다.
-
<ul>: 순서 없는 목록(Unordered list)을 나타내는 요소로, 각 아이템은 점 또는 기호로 마크된다. -
<ol>: 순서 있는 목록(ordered list)을 나타내는 요소로, 각 아이템은 숫자나 문자로 번호가 매겨진다. -
<li>: 목록(list)의 각 항목을 나타내는 요소다. -
<a>: 하이퍼링크를 생성하는 요소로, 클릭 시 다른 문서나 위치로 이동할 수 있다.
2.6 인터렉티브 요소 (Interactive Elements)
인터렉티브 요소 (Interactive Elements) 카테고리는 사용자와 상호작용할 수 있는 요소들을 포함한다.
-
<button>: 클릭 가능한 버튼을 생성하는 요소입니다. -
<input>: 사용자로부터 데이터를 입력받을 수 있는 요소로, 다양한 유형의 입력 방식을 지원합니다. -
<label>: 입력 필드와 그 설명을 연결하는 요소로, 사용자에게 입력 항목을 설명합니다.
3. HTML의 구조
3.1 HTML의 <head>
<head>
<title>: 브라우저 탭에 표시되는 문서의 제목
<meta>: 문서의 문자셋, 뷰포트, 메타데이터 등을 정의
<link>: 외부 CSS 파일을 연결<script>: 외부 혹은 내부 JavaScript 파일을 연결<style>: 내부에서 CSS 스타일을 정의
</head>
3.2 HTML의 <body>
<body>
- 사용자에게 실제로 표시되는 부분 (문서의 주요 콘텐츠)
- 텍스트, 이미지, 링크, 리스트, 테이블 등 다양한 요소를 포함
</body>
