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/reset-css@5.0.1/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 | Value | 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
😁