HTML

HTML(Hyper Text Markup Language)은 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고,
그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당한다.

<열린태그> </닫힌태그>

HTML의 기본 태그 구조는 열린태그와 닫힌태그로 이루어져있다.

<TAG>Content</TAG>

<빈태그>

HTML 빈태그는 닫힌태그가 없는 태그를 말한다.

<img src="" alt=""> : 이미지 생성
<br/> : 텍스트 안에 줄바꿈
<input/> : 사용자의 데이터를 받을 수 있는 대화형 컨트롤 생성
<link/> : 현재 문서와 외부 리소스의 관계 명시
<meta/> : <base>, <link>, <script>, <style>, <title>과 같은
          다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냄

속성(Attributes)과 값(Value)

태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다.

<TAG 속성="값"></TAG>

<img src="./photo.jpg" alt="사진"/>
<div id="name">유재석</div>

* alt(alternative) : 이미지를 출력하지 못하는 상황에 이미지 대신 보여질 텍스트를 지정

부모와 자식 요소

태그A가 태그B의 콘텐츠로 사용되면,
태그B는 태그A의 부모요소,
태그A는 태그B의 자식요소 라고 한다.

<PARENT>
  <CHILD></CHILD>
</PARENT>

<section class="actor">
  <h2>배우 리스트</h2>
  <ul>
    <li>한지민</li>
    <li>강동원</li>
    <li>공유</li>
    <li>박보검</li>
  </ul>
</section>

<section> 은 <h1> 과 <ul> 의 부모 요소
<h1> 과 <ul> 은 <section> 의 자식 요소
<ul> 은 <li> 의 부모 요소
<li> 는 <ul> 의 자식 요소
<section> 은 <li> 의 조상(상위) 요소
<li> 는 <section> 의 후손(하위) 요소

HTML 문서의 범위

<!DOCTYPE html>
<html>
  <head>
    문서의 정보
  </head>
  <body>
    문서의 구조
  </body>
</html>

DOCTYPE(DTD, Document Type Definition) : 마크업 언어에서 문서의 형식을 정의한다.
웹 브라우저에 제공할 HTML 문서를 어떤 버전의 해석 방식으로 구조화 하면 되는지 알려준다.
현재 표준 모드 : HTML5
HTML(전체 범위) :
웹 브라우저가 해석해야 할 HTML 문서가 어디에서 시작하며, 어디에서 끝나는지 알려준다.
HEAD(정보 범위) :
화면을 구성하기 위한 기본 설정으로, 웹브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정한다.
정보 = 웹 페이지의 제목, 문자 인코딩 방식, 연결할 외부 파일의 위치, 기본 세팅값 등
BODY(구조 범위) :
웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정한다.
구조 = 사용자가 화면을 통해 볼 수 있는 콘텐츠의 형태나 레이아웃 등을 의미
로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 입력창, 팝업, 광고 등 보이는 모든 것

HEAD

<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">
  <!-- name="검색엔진틍에 제공하기 위한 정보의 종류(메타 데이터)"
       content="'http-equiv'이나 'name'의 속성 값 -->
  <title>구글</title>
  <!-- 웹 브라우저의 탭에서 보여지는 이름 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
  <!-- css reset 파일 연결 (css 파일 연결보다 앞에 연결해야 함) -->
  <link rel="stylesheet" href="./css/main.css">
  <!-- css 파일 연결 -->
  <link rel="icon" href="./favicon.png">
  <!-- 탭에서 보여지는 아이콘 -->
  <style>
  	div {
      width: 100px;
      height: 100px;
    }
    p {
      font-size: 20px;
      text-decoration: underline;
    }
  </style>
  <!-- CSS를 외부 문서에 작성해서 연결하는 것이 아닌, HTML문서 내부에서 작성할 때 사용 -->

BODY

<header>
  웹 페이지의 상단 영역, 주로 로고와 메뉴 등이 들어간다.
  <div class="logo">
    <a href="#" alt="logo">
      <h1>로고</h1>
    </a>
  </div>
  <ul class="gnb">
    <li><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a></li>
    <li><a href="#">메뉴4</a></li>
  </ul>
</header>

<container>
  웹 페이지의 중단 영역, 메인 콘텐츠들이 들어간다.
  <div>
    
  </div>
</container>

<footer>
  웹 페이지의 하단 영역, 주로 사이트의 정보 및 하단메뉴 등이 들어간다.
</footer>

HTML ELEMENT (요소)

콘텐츠 구획 및 텍스트 콘텐츠

Element	Description
`<h1>~<h6>`	6단계의 구획 제목을 나타낸다. 구획 단계는 `<h1>`이 가장 높고 `<h6>`은 가장 낮다.
`<article>`	독립적으로 구분되거나 재사용 가능한 영역을 설정한다. (매거진/ 신문 기사/ 블로그 등)
`<aside>`	문서의 별도 콘텐츠를 설정한다. 보통 광고나 기타 링크 등의 사이드 바(side bar) 를 설정한다.
`<nav>`	문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. (자주쓰이는 예제 : 메뉴, 목차, 색인)
`<section>`	문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
`<q>`	짧은 인용문을 설정한다.
`cite`	창작물에 대한 참조를 설정한다. cite="URL" 기본적으로 이탤릭체(Italic Type)로 표시됨
`<blockquote>`	안쪽의 텍스트가 긴 인용문임을 나타낸다. 주로 들여쓰기를 한 것으로 그려진다.
`<div>`	본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정한다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.
`<ol>`	정렬된 목록을 나타낸다. 보통 숫자로 표현
`<ul>`	정렬되지 않은 목록을 나타낸다. 보통 불릿으로 표현
`<li>`	목록의 항목을 나타낸다.
`<p>`	Paragraph, 하나의 문단을 나타낸다. 주로 텍스트로 사용

인라인 텍스트 시멘틱

Element	Description
`<a>`	앵커요소, href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.
`<br/>`	텍스트 안에 줄바꿈(캐리지 리턴)
`<data>`	주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결한다.
`<mark>`	현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트 한 부분을 나타낸다.
`<span>`	구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로 아무것도 나타내지 않는다. 스타일을 적용하기 위해서, 또는 `lang`등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다.
`<em>`	단순한 의미 강조를 표시한다. 중첩가능하며 중첩될수록 강조 의미가 강해짐, 기본적으로 이탤릭체(Italic Type)로 표시된다.
`<strong>`	중대하거나 긴급한 콘텐츠를 나타낸다. 보통 브라우저는 굵은 글씨로 표시한다.
`<sub>`	활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정한다.
`<sup>`	활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정한다.

`<a>` 태그의 속성

Attribute	Description	Value	Default
download	이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미	불린(Boolean)	-
href	링크 URL	URL	-
rel	현재 문서와 링크 URL의 관계(Link Types)	license prev next ...	-
target	링크 URL의 표시(브라우저 탭) 위치	_self(현재 탭에서 열기) _blank(새 탭에서 열기)	_self
type	링크 URL의 MIME 타입	text/html...	-

이미지 & 멀티미디어

Element	Description
`<img>`	문서에 이미지를 넣습니다. scr="" alt="대체텍스트"
`<audio>`	문서에 소리 콘텐츠를 포함할 때 사용한다.
`<video>`	비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입한다.
`<track>`	미디어 요소(autio, video)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용한다.
`<area>`	이미지의 핫스팟 영역을 정의하고 hyperlink를 추가할 수 있다. `<map>`요소 안에서만 사용할 수 있다.
`<map>`	`<area>` 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용한다.

`<img>` 태그의 속성

Attribute	Description	Value
src	(필수)이미지 URL	URL
alt	(필수)이미지의 대체텍스트
width	이미지의 가로 너비
height	이미지의 세로 너비
srcset	브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의	`w`, `x`
sizes	미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

`<audio>` 태그의 속성

Attribute	Description	Value	Default
autoplay	준비되면 바로 재생	불린(Boolean)
controls	제어 메뉴를 표시	불린(Boolean)
loop	재생이 끝나면 다시 처음부터 재생	불린(Boolean)
preload	페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)	`none` : 로드하지 않음 `metadata` : 메타데이터만 로드 `auto` : 전체 파일 로드	metadata
src	콘텐츠 URL	URL
muted	음소거 여부	불린(Boolean)

`<video>` 태그의 속성

Attribute	Description	Value	Default
autoplay	준비되면 바로 재생	불린(Boolean)
controls	제어 메뉴를 표시	불린(Boolean)
loop	재생이 끝나면 다시 처음부터 재생	불린(Boolean)
muted	음소거 여부	불린(Boolean)
poster	동영상 썸네일 이미지 URL	URL
preload	페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)	`none` : 로드하지 않음 `metadata` : 메타데이터만 로드 `auto` : 전체 파일 로드	metadata
src	콘텐츠 URL	URL
width	동영상 가로 너비
height	동영상 세로 너비

표 콘텐츠

Element	Description
`<caption>`	표의 설명 또는 제목을 나타낸다.
`<col>`	표의 열을 나타내며, 열이 속하는 칸에 공통된 의미를 부여할 때 사용한다.
`<colgroup>`	표의 열을 묶는 그룹을 정의한다.
`<table>`	행과 열로 이루어진 표를 나타낸다.
`<thead>`	표의 여러 행`<tr>`을 묶어서 표 헤더를 구성한다.
`<tbody>`	표의 여러 행`<tr>`을 묶어서 표 본문을 구성한다.
`<tr>`	Table row, 표의 가로줄인 행을 나타낸다.
`<th>`	Table head, 표의 헤더 칸(cell)을 나타낸다. (기본스타일: 중앙정렬, 두껍게)
`<td>`	Table cell, 데이터를 포함하는 표의 셀을 정의한다.

<table>
  <thead>
    <tr>
      <th>number</th>
      <th>동물</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>1</td>
      <td>고양이</td>
    </tr>
    <tr>
      <td>2</td>
      <td>강아지</td>
    </tr>
    <tr>
      <td>3</td>
      <td>호랑이</td>
    </tr>
  </tbody>
</table>

번호	이름
1	고양이
2	강아지
3	호랑이

`<th>` 태그의 속성

Attribute	Description	Value	Default
abbr	열에 대한 간단한 설명
headers	관련된 하나 이상의 다른 머리글 칸 id 속성 값
colspan	확장하려는(병합) 열의 수
rowspan	확장하려는(병합) 행의 수
scope	자신이 누구의 '머리글 칸'인지 명시	col : 자신의 열 colgroup : 모든 열 row : 자신의 행 rowgroup : 모든 행 auto	auto

`<td>` 태그의 속성

Attribute	Description	Default
headers	관련된 하나 이상의 다른 머리글 칸 id 속성 값
colspan	확장하려는(병합) 열의 수	1
rowspan	확장하려는(병합) 행의 수	1

양식

Element	Description
`<detalist>`	다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 option 요소 여럿을 담는다.
`<fieldset>`	웹 양식의 여러 컨트롤과 레이블`<label>`을 묶을 때 사용한다.
`<form>`	정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.
`<input>`	웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
`<label>`	사용자의 인터페이스 항목의 설명을 나타낸다.
`<legend>`	`<fieldset>` 콘텐츠의 설명을 나타낸다.
`<meter>`	특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타낸다.
`<optgroup>`	`<select>` 요소의 옵션을 묶을 수 있다.
`<option>`	`<select>`,`<optgroup>`,`<datalist>` 요소의 항목을 정의한다.
`<output>`	웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소이다.
`<progress>`	어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띈다.
`<select>`	옵션 메뉴를 제공하는 컨트롤을 나타낸다.
`<textarea>`	멀티라인 일반 텍스트 편집 컨트롤을 나타낸다.

`<type>` 속성의 값

Element	Description	Characteristic
`<button>`	클릭 가능한 일반 버튼
`<checkbox>`	체크박스
`<radio>`	radio 버튼	같은 `<name>` 속성 그룹 내 하나만 선택 가능
`<password>`	비밀번호	`*`로 내용이 가려짐
`<submit>`	제출 버튼	해당 `<form>`범위 내 고유양식
`<tel>`	전화번호
`<text>`	일반 텍스트
`<url>`	절대 URL
`<reset>`	초기화
`<range>`	범위 컨트롤	min, max, step, value(기본값) 속성 사용
`<number>`	숫자
`<color>`	색상	IE 지원 불가
`<image>`	이미지 제출 버튼	`<img/>`처럼 사용
`<file>`	파일
`<email>`	이메일
`<search>`	검색
`<hidden>`	보이진 않지만 전송할 양식	value 속성으로 값 지정

`<button>` 태그의 속성

Attribute	Description	Value	Characteristic
autofocus	페이지가 로드될 때 자동으로 포커스	불린(Boolean)	문서 내 고유해야함
disabled	버튼을 비활성화	불린(Boolean)
form	`<form>`의 id 속성 값		해당 `<form>` 의 후손이 아닐 경우만
name	폼데이터와 함께 전송되는 버튼의 이름
type	버튼의 타입	button reset submit

`<textarea>` 태그의 속성

Attribute	Description	Value	Default	Characteristic
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on off	on
autofocus	페이지가 로드될 때 자동으로 포커스	불린(Boolean)		문서 내 고유해야 함
disabled	양식을 비활성화	불린(Boolean)
form	`<form>`의 id 속성 값			해당 `<form>`의 후손이 아닐 경우만
maxlength	입력 가능한 최대 문자 수	숫자(Number)	무한
name	양식의 이름
placeholder	사용자가 입력할 값의 힌트
readonly	수정 불가한 읽기 전용	불린(Boolean)
rows	양식의 줄 수	숫자(Number)	2

`<form>` 태그의 속성

Attribute	Description	Value	Default
action	전송한 정보를 처리할 웹페이지의 URL	URL
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on off	on
method	서버로 전송할 HTTP 방식	GET POST	GET
name	고유한 양식의 이름
novalidate	서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
target	서버로 전송 후 응답받을 방식을 지정	`_self` `_blank`	`_self`]

`<input>` 태그의 속성

Attribute	Description	Value	Default	Characteristic
autocomplete	사용자가 이전에 입력한 값으로 자동완성 기능을 사용할 것인지 여부	on off	on
autofocus	페이지가 로드될 때 자동으로 포커스	불린(Boolean)		문서 내 고유해야 함
checked	양식이 선택되었음을 표시	불린(Boolean)		`type` 속성 값이 radio, checkbox 일 경우만
disabled	양식을 비활성화	불린(Boolean)
form	`<form>` 의 `id` 속성 값		해당 `<form>` 의 후손이 아닐 경우만
list	참조할 `<datalist>` 의 id 속성 값
max	지정 가능한 최대 값	숫자(Number)		`type` 속성 값이 number 일 경우만, min 속성보다 큰 값만 허용
min	지정 가능한 최소 값	숫자(Number)		`type` 속성 값이 number 일 경우만, max 속성보다 작은 값만 허용
maxlength	입력 가능한 최대 문자 수	숫자(Number)	524288	`type` 속성 값이 text, email, password, tel, url 일 경우만
multiple	둘 이상의 값을 입력할 수 있는지 여부	불린(Boolean)		`type` 속성 값이 email, file 일 경우만, email 일 경우 `,`로 구분
name	양식의 이름
placeholder	사용자가 입력할 값의 힌트
readonly	수정 불가한 읽기 전용	불린(Boolean)
step	유효한 증감 숫자의 간격	숫자(Number)	1	`type` 속성 값이 number, range 일 경우만
src	이미지의 URL	URL		`type` 속성 값이 image 일 경우만
alt	이미지의 대체 텍스트			`type` 속성 값이 image 일 경우만
type	입력 받을 데이터의 종류		text
value	양식의 초기 값

전역 속성(Global Attributes)

모든 HTML 요소에서 공통적으로 사용 가능한 속성

Attribute	Description
id	문서에서 고유한 식별자(idenifier, ID)를 정의
class	공백으로 구분된 요소의 별칭을 지정
style	요소에 적용할 CSS를 선언
title	요소의 정보(설명)을 지정
lang	요소의 언어(ISO 639-1)를 지정
data-`*`	사용자 정의 데이터 속성을 지정 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용
draggable	요소가 Drag and Drop API를 사용 가능한지 여부를 지정
hidden	요소를 숨김
tabindex	Tab 키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정

참고자료

https://heropy.blog/2019/04/24/html-css-starter/
https://heropy.blog/2019/05/26/html-elements/
https://developer.mozilla.org/ko/docs/Web/HTML/Element

Author And Source

이 문제에 관하여(HTML / HTML ElEMENT), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@doradora523/HTML-HTML-ElEMENT

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

HTML / HTML ElEMENT

HTML

<열린태그> </닫힌태그>

<빈태그>

속성(Attributes)과 값(Value)

부모와 자식 요소

HTML 문서의 범위

HEAD

BODY

HTML ELEMENT (요소)

콘텐츠 구획 및 텍스트 콘텐츠

인라인 텍스트 시멘틱

<a> 태그의 속성

이미지 & 멀티미디어

<img> 태그의 속성

<audio> 태그의 속성

<video> 태그의 속성

표 콘텐츠

<th> 태그의 속성

<td> 태그의 속성

양식

<type> 속성의 값

<button> 태그의 속성

<textarea> 태그의 속성

<form> 태그의 속성

<input> 태그의 속성