HTML

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로,
웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다.
HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS),
또는 기능/동작 (JavaScript)을 설명하는 데 사용됩니다.
MDN Web Docs- HTML 요소 참고서

내용의 대부분은 MDN Web Docs- HTML 요소 참고서 여기서 가져왔으며,
자세히 보고 싶은 사람은 저 페이지에 아주 잘 설명이 되어있다.
여기에는 자주 쓰는 태그들과 간단한 예시만 적어두겠다.

메인 루트

<html>
- HTML 문서의 루트(최상단 요소)를 나타내며, “루트 요소”라고도 부른다
- 모든 다른 요소는 <html> 요소의 후손이어야 한다

문서 메타데이터

메타데이터는 다른 데이터를 설명해 주는 데이터이다.
대량의 정보 가운데에서 찾고 있는 정보를 효율적으로 찾아내서 이용하기 위해
일정한 규칙에 따라 콘텐츠에 대하여 부여되는 데이터.
HTML 문서상에선 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의
탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가진다.

<head>
- 기계가 식별할 수 있는 문서 정보(메타데이터)를 가진다
- 아래 요소들이 메타데이터를 표기하는 요소이다
<base>
- 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정
- 하나의 문서당 최대 하나의 <base> 요소만 존재 가능
- <head> 요소 내에 위치해야 한다
- 문서에는 하나의 <base> 요소만 존재할 수 있다
- ```
<head>
  <base href="https://martinkang.github.io/">
</head>
<body>
  <img src="test.png">
</body>
```
  - 위와 같이 사용할 경우
    https://martinkang.github.io/test.png
    가 img src 이 된다
<link>
- 현재 문서와 외부 리소스의 관계를 (rel 속성을 이용하여) 명시
- CSS, Favicon, Font 등을 연결할때 주로 사용
- ```
<link href="css 주소" rel="stylesheet"> 
```
  - css 주소에 있는 css 파일을 해당 문서에 적용시킨다
- Favicon 연결 예시
  - [GitHub Blog - 8] Favicon 을 설정
<meta>
- base, link, script, style, title과 같은 다른 메타관련 요소로 나타낼 수 없는 Metadata를 나타낸다
- OG 설정 예시
  - [GitHub Blog - 9] Open Graph 를 설정
<style>
- 문서나 문서 일부에 대한 스타일 정보를 포함
- 해당 문서에만 사용할 스타일 정보를 이 안에 표기한다
- ```
<body>
   <div class="div-test"> 테스트 박스 </div>
</body>
<style>
  .div-test {
      color: white;
      background-color: red;
  }
</style>
```
  - 이 문서에서만 Class 이름이 div-test 인 요소들의 배경색은 red, 글자색은 white 가 된다
    - 테스트 박스
<title>
- 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의
- 이 사이트 제목표시줄에 나오는 코딩독학 이 title 에 해당한다

구획 루트

<body> 요소는 HTML 문서의 내용
한 문서에 하나의 <body> 요소만 존재

콘텐츠 구획

콘텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화 가능.
자체에 어떠한 기능이 있는건 아니지만, HTML 문서를 체계화를 하면 개발 및 유지 관리가 편하다
또한 알아두면 다른 웹페이지를 분석하는데 도움이 된다
구획을 굳이 안나눠도 HTML 문서 작성이 가능하다

<article>
- 문서, 페이지, 애플리케이션, 또는 사이트 안에서
  독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다
<footer>
- 주로 푸터 라고 부른다
- 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다
<header>
- 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다
- 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다
  - 브라우저의 타이틀바와는 다름
<h1>–<h6>
- 6단계의 구획 제목을 나타냄
- 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮다
  - <h1> : <h1>h1 구획</h1>
  - <h6> : <h6>h6 구획</h6>
<main>
- body의 주요 콘텐츠를 나타냄
<nav>
- 주로 네비바 를 나타낼때 사용
- 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냄
<section>
- HTML 문서의 독립적인 구획을 나타냄

텍스트 콘텐츠

HTML 텍스트 콘텐츠를 사용하여 <body>와 </body> 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있다.
해당 콘텐츠의 목적이나 구조 판별에 사용하므로 접근성과 SEO에 중요 하다.

<div>
- division 의 약자로 논리적 구분을 정의한다
- 기본적으로 하나의 <div> 는 한줄을 차지한다
- ```
<div>div1</div> <div>div2</div>
```
  - div1
    
    div2
<hr>
- 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타낸다
- 기본값으로 아래와 같이 밑줄 표현이 된다
<ul>
- 정렬되지 않은 목록을 나타내며, 보통 불릿으로 표현
<ol>
- 정렬된 목록을 나타내며, 보통 숫자 목록으로 표현
<li>
- 목록의 항목을 나타낸다
- <ul> 리스트
  - <ul> <li>ul 목록 li 1 항목 </li> <li>ul 목록 li 2 항목 </li> </ul>
    - ul 목록 li 1 항목
    - ul 목록 li 2 항목
- <ol> 리스트
  - <ol> <li>ol li 1 항목 </li> <li>ol li 2 항목 </li> </ol>
    1. ol 목록 li 1 항목
    2. ol 목록 li 2 항목
<p>
- 하나의 문단을 나타냄

인라인 텍스트 시멘틱

HTML 인라인 텍스트 시멘틱을 사용해서 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있다.

<a>
- href 속성을 통해 다른 URL로 연결할 수 있는 하이퍼링크를 만든다
- ```
<a href="https://martinkang.github.io/">코딩독학 링크</a>
```
  - 코딩독학 링크
<br>
- 텍스트 안에 줄바꿈(캐리지 리턴)을 생성
- ```
 br<br> 예제
```
  - br
    예제
<cite>
- 저작물의 출처를 표기할 때 사용
  - 출처 <cite>코딩독학</cite>
    - 출처 코딩독학
<code>
- 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다.
<em>
- 텍스트의 강세를 나타내며 <em> 요소를 중첩하면 더 큰 강세를 뜻한다
  - <em>강세</em> <br> <em><em>강강세</em></em>
    - 강세
      강강세
<i>
- 이탤릭 표기
- ```
  <i>이탤릭</i>
```
  - 이탤릭
<q>
- 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타낸다
  - <q>요소는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.</q>
  - 요소는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.
<span>
- 구문 콘텐츠를 위한 논리적 구분을 정의
- <div> 와 다르게 기본적으로 같은 줄에 다른 요소가 들어갈 수 있다
- - <span>span 1</span> <span>span 2</span>
- span 1 span 2

이미지 & 멀티미디어

HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원.

<img>

문서에 이미지를 넣는다.

<img src="https://martinkang.github.io/assets/img/infos/kobugi-left-small.png" height=100px width=200px>

내장 콘텐츠

HTML은 일반적인 멀티미디어 콘텐츠 외에도 다양한 종류의 기타 콘텐츠를 포함할 수 있다.

<iframe>
- 중첩 browsing context을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입
- [CSS] - Display 속성 flex [flex item] 여기의 예제들은 전부 iframe 을 사용해 만든 예제이다

스크립트

HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 스크립트 언어, 그 중에서도 주로 JavaScript를 지원

<script>
- 요소는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 쓴다
- ```
<script defer src="/public/js/post.js"></script>
```
  - 이 페이지는 post.js 에 지정된 자바스크립트를 적용시킨다.

양식

HTML은 여러가지 입력 가능한 요소를 제공한다.

<button>
- 클릭 가능한 버튼을 나타낸다
- ```
<button>버튼</button>
```
<form>
- 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다
- 단순 구획을 나타내므로 자체적인 기능이나 디자인은 없다.
- ```
  <form>
  form 예제
  </form>
```
  - form 예제
<input>
- 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다
- ```
  <input>
```
<label>
- 사용자 인터페이스 항목의 설명을 나타낸다
- ```
  <label>label 은 항목의 설명을 나타낸다</label>
```
  - label 은 항목의 설명을 나타낸다
<textarea>
- 멀티라인 일반 텍스트 편집 컨트롤을 나타낸다
- ```
  <textarea></textarea>
```

참조

MDN Web Docs: HTML: Hypertext Markup Language
MDN Web Docs: [HTML 요소 참고서][html-element-link