📌HTML이란?
- HTML은 HyperText Markup Language(하이퍼텍스트 마크업 언어)의 약자.
- 웹 페이지를 작성하기 위해 사용되는 표준 마크업 언어다. HTML은 웹 페이지의 구조와 내용을 정의하며, 웹 브라우저에게 어떻게 표시되어야 하는지를 알려준다.
📌기본 사용법
- HTML은 일련의 태그(tag)를 사용하여 구성된다.
- 태그는 <와 >로 둘러싸여 있으며, 요소(element)의 시작과 끝을 나타낸다.
- 대부분의 HTML 요소는 시작 태그와 종료 태그로 이루어지며, 시작 태그에는 요소의 속성(attribute)을 추가할 수도 있다.
🙌간단한 HTML 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 페이지 제목</title>
</head>
<body>
<h1>제목</h1>
<p>문단 내용</p>
<!-- 다른 HTML 요소들을 추가할 수 있다 -->
</body>
</html>
📌주요 태그 정리
1. 💫구조를 나타내는 요소
구조를 나타내는 요소(Structural Elements)란 HTML에서 웹 페이지의 전체적인 구조를 나타내는 요소
<header>: 웹 페이지나 섹션의 머리말을 나타내는 요소다. 사이트 로고, 제목, 주요 탐색 메뉴 등을 포함할 수 있다.
<nav>: 탐색 링크 그룹을 포함하는 요소다. 웹 페이지의 메인 탐색 메뉴를 정의할 때 주로 사용된다.
<main>: 웹 페이지의 주요 콘텐츠 영역을 나타내는 요소다. 페이지의 핵심 내용을 담는다.
<aside>: 주요 콘텐츠와는 관련성이 적은 보조 정보나 사이드바를 나타내는 요소다.
<footer>: 웹 페이지나 섹션의 바닥글 영역을 나타내는 요소다. 저작권 정보, 연락처, 관련 링크 등을 포함할 수 있다.
<section>: 관련된 콘텐츠 그룹을 나타내는 요소다. 특정 주제나 기능을 갖는 영역을 구분할 때 사용된다.
<article>: 독립적인 콘텐츠 조각을 나타내는 요소다. 뉴스 기사, 블로그 포스트 등 독립적으로 사용될 수 있는 콘텐츠를 나타낸다.
2. 🌠메타데이터 요소
- 웹 페이지의 특정 정보를 설명하거나 웹 페이지 자체에 대한 정보를 제공하는 역할을 한다.
- 이러한 정보는 웹 브라우저나 검색 엔진 등에 의해 활용되며, 웹 페이지의 제목, 작성자, 키워드, 스타일시트 링크 등을 포함한다.
- 일부를 제외하고 대부분의 메타데이터 요소는
<head>태그의 자식요소로 작성한다.
<title>: 웹 페이지의 제목을 정의하는 요소이다. 브라우저의 탭 제목이나 검색 결과에서 페이지의 제목으로 표시된다.
<meta>: 웹 페이지의 메타데이터를 정의하는 요소다. 다양한 속성을 사용하여 페이지의 문자 인코딩, 뷰포트 설정, 키워드, 설명 등의 정보를 지정할 수 있다.
<link>: 외부 리소스와의 연결을 정의하는 요소다. 주로 외부 스타일시트(<link rel="stylesheet">)나 아이콘 파일(<link rel="icon">)과의 연결에 사용된다.
<style>: 문서 내부에 포함된 CSS 스타일 규칙을 정의하는 요소다. 스타일시트를 HTML 문서 안에 직접 작성할 수 있다.
<script>: JavaScript 코드를 포함하거나 외부 스크립트 파일과의 연결을 정의하는 요소다. 웹 페이지에 동적인 기능을 추가할 때 사용된다.
<base>: 웹 페이지 내에서 상대적인 URL 경로를 해석하는 기준 URL을 정의하는 요소다. 주로 <head> 내에 위치하며, 웹 페이지의 모든 상대적인 URL에 영향을 준다.
3. 🌟목록과 표
목록과 표는 HTML에서 구조적인 정보를 표현하기 위해 사용되는 요소
<ul> (Unordered List): 정렬되지 않은 목록을 나타낸다. <li> (List Item) 요소와 함께 사용되며, 각 항목을 나타낸다. 항목은 기본적으로 원점 표시(•, ◦, ⁃ 등)로 표시된다.
<ol>(Ordered List): 정렬된 목록을 나타낸다.<li>요소와 함께 사용되며, 각 항목을 나타낸다. 항목은 숫자나 다른 기호로 표시된다.<dl>(Definition List): 용어 정의 목록을 나타낸다.<dt>(Definition Term)와<dd>(Definition Description) 요소를 함께 사용하여 용어와 해당 정의를 표시한다.
<table>: 표를 나타내는 요소다. 표는 행(<tr>)과 열(<td>)로 구성되며, 셀 내용을 포함한다. 표의 구조를 정의하고, 데이터를 시각적으로 표시한다.
<tr>(Table Row): 표의 행을 나타낸다. 행 안에는 하나 이상의 셀(<td>) 요소가 포함된다.<td>(Table Data): 표의 셀을 나타낸다. 셀 안에는 데이터나 다른 요소가 들어갈 수 있다.<th>(Table Header): 표의 열 제목 셀을 나타낸다.<th>요소는 보통 행의 첫 번째 행에 사용되며, 텍스트를 굵게 표시한다.
4. 💫폼관련 요소
폼(Form) 관련 요소 태그는 사용자로부터 데이터를 입력받고 서버로 전송하기 위한 요소들을 말한다.
<form>: 폼을 생성하는 요소로, 사용자 입력을 그룹화하고 서버로 데이터를 전송한다. action 속성을 사용하여 데이터를 처리할 URL을 지정하고, method 속성을 사용하여 데이터 전송 방식을 정한다.
<input>: 사용자로부터 데이터를 입력받는 요소다. type 속성을 사용하여 입력 필드의 유형을 지정한다. 예를 들어, type="text"는 텍스트 입력 필드를 생성하고, type="checkbox"는 체크박스를 생성한다.
<textarea>: 여러 줄의 텍스트를 입력받을 수 있는 입력 요소다. <textarea> 요소의 시작 태그와 종료 태그 사이에 기본 텍스트나 초기값을 지정할 수 있다.
<select>: 선택 목록을 생성하는 요소다. <option> 요소와 함께 사용하여 여러 옵션 중 하나를 선택할 수 있다.
<button>: 버튼을 생성하는 요소다. 사용자의 클릭 이벤트를 처리하기 위해 JavaScript 코드와 연결할 수 있다.
<label>: 폼 요소에 대한 레이블을 정의하는 요소입니다. 보통 텍스트 레이블을 제공하고, for 속성을 사용하여 레이블과 연결된 폼 요소를 지정한다.
<fieldset>: 관련된 폼 요소들을 그룹화하는 요소다. 폼 요소들을 시각적으로 묶어 주고, <legend> 요소를 사용하여 그룹의 제목을 정의할 수 있다.
<input type="submit">: 폼의 제출 버튼을 생성하는 요소다. 사용자가 폼을 작성하고 제출할 때 서버로 데이터를 전송한다.
<input type="reset">: 폼의 재설정 버튼을 생성하는 요소다. 사용자가 폼을 초기 상태로 되돌린다.
5. 🌠임베디드요소
임베디드(Embedded) 요소는 외부 리소스를 웹 페이지에 삽입하는 데 사용되는 요소들을 말한다. 이러한 요소들은 웹 페이지에 멀티미디어 콘텐츠나 외부 소스를 포함시키는 데 사용한다.
<img>: 이미지를 웹 페이지에 삽입하는 요소다. src 속성을 사용하여 이미지의 경로를 지정하고, alt 속성을 사용하여 대체 텍스트를 제공한다.
<audio>: 오디오 콘텐츠를 재생하기 위한 요소다. src 속성을 사용하여 오디오 파일의 URL을 지정하고, controls 속성을 추가하여 재생 컨트롤을 표시할 수 있다.
<video>: 비디오 콘텐츠를 재생하기 위한 요소다. src 속성을 사용하여 비디오 파일의 URL을 지정하고, controls 속성을 추가하여 재생 컨트롤을 표시할 수 있다.
<iframe>: 외부 웹 페이지나 독립적인 HTML 문서를 웹 페이지에 삽입하는 요소다. src 속성을 사용하여 삽입할 문서의 URL을 지정한다.
<embed>: 플러그인이나 외부 애플리케이션을 웹 페이지에 삽입하는 요소다. 보통 멀티미디어 콘텐츠를 재생하기 위해 사용된다.
<object>: 외부 리소스를 웹 페이지에 삽입하는 요소로, 다양한 종류의 멀티미디어 콘텐츠를 지원한다. <embed> 요소와 유사한 용도로 사용될 수 있다.
6. 🌟텍스트 요소
- 웹 페이지에서 텍스트를 표시하고 구조화하는 데 사용되는 요소
- 웹 페이지의 본문, 제목, 강조 텍스트 등을 정의하고 표현하는 데 사용
<h1> to <h6>: 제목(Heading) 요소로, 문서의 섹션 제목이나 헤딩을 나낸다. <h1>이 가장 큰 제목을 나타내고, <h6>이 가장 작은 제목을 나낸다.
<p>: 단락(Paragraph)을 나타내는 요소로, 텍스트나 콘텐츠를 단락 단위로 그룹화한다. 주로 본문 내용을 담는 데 사용된다.
<span>: 인라인 요소로, 특정 부분의 텍스트를 그룹화하거나 스타일을 적용하기 위해 사용된다. 주로 텍스트 스타일링이나 스크립트와의 상호작용에 사용된다.
<strong>: 강조된 중요한 텍스트를 나타내는 요소로, 기본적으로 브라우저에 의해 굵게 표시된다. 시각적으로 더 강조하고자 할 때 사용한다.
<em>: 강조된 텍스트를 나타내는 요소로, 기본적으로 브라우저에 의해 이탤릭체로 표시된다. 의미적인 강조를 나타내기 위해 사용한다.
<blockquote>: 긴 인용문을 나타내는 요소로, 들여쓰기되고 보통 따옴표로 묶인다. 인용문이나 다른 소스의 내용을 나타낼 때 사용한다. 블록 요소고 인라인 요소로는 <q>태그가 있다.
<code>: 컴퓨터 코드 조각이나 프로그래밍 언어의 텍스트를 나타내는 요소다. 일반 텍스트와 구분하기 위해 등록된 폰트나 형식이 적용될 수 있다.
<pre>: 서식이 미리 지정된 텍스트를 나타내는 요소다. 고정폭 글꼴을 사용하고 줄 바꿈을 유지하여 텍스트의 원본 형식을 유지할 수 있다.
📌END.
