HTML 란
- 하이퍼 텍스트 마크업 언어 (Hyper Text Markup Language)로
제목, 단락, 목록, 링크, 인용 등 그 밖의 항목을
구조적 문서를 만들 수 있습니다.
Head 란
- HTML 문서의 정보를 뜻합니다.
- < !DOCTYPE html >란 현재 문서가 HTML5 문서임을 명시해 줍니다.
title
설명 및 예시
HTML 문서의 제목을 뜻합니다.
<title>벨로그 최고</title>meta
설명 및 예시
해당 HTML 문서를 설명하는 데이터를 뜻하는 tag입니다.
meta tag는 빈 태그입니다.
- meta charset: HTML 문자의 인코딩을 알려주는 태그입니다.
- http-equiv : http 정보 또는 값을 제공하는 content 속성입니다.
- content : 메타데이터에 내용을 담당합니다.
- name : 메타데이터 이름을 뜻합니다.
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">link
설명 및 예시
link tag는 빈 태그이며 외부 소스를 가져옵니다.
link tag는 주로 외부 style 시트를 연결할 때 사용하지만
파비콘 및 아이콘을 연결을 할 수 있습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| rel | icon , stylesheet | 링크가 현재 문서와 어떤 관계인지 설명을 해줍니다. |
| href | URL | 외부 링크 URL |
| type | text/html, text/css | 외부 리소스의 MIME.type |
<link rel="stylesheet" href="main.css">Body 란
- HTML 문서에서 실제로 출력되는 부분입니다.
header footer section main은 시맨틱 태그로써 레이아웃을 짤 때 요소를 조작해줍니다.
script (none)
설명 및 예시
스크립트 코드를 문서에 포함합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| async | Boolean | 스크립트의 비동기적 실행 여부 |
| defer | URL | 문서 파싱 (구문 분석)후 작동 여부 |
| src | URL | 참조할 외부 스크립트 URL |
| type | text/javascript (기본값) | MIME 타입 |
<script defer src="./main.js"></script>table tr th td
설명 및 예시
tr은 행을 만들어 줍니다.
th는 머리글 칸 을 지정을 해주며
td는 일반 칸을 지정을 합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| colspan | 확장(병합)하려는 열의 수 | |
| rowspan | 확장(병합)하려는 행의 수 |
<table>
<tr>
<th>과일종류</th>
<td>사과</td>
<td>바나나</td>
</tr>
</table>Inline tag
설명 및 예시
크기가 해당되는 태그에 국한되어 있어 필요한 너비만 차지를 합니다.
br (inline)
설명 및 예시
br tag는 빈 태그이며 텍스트 내의 줄바꿈을 해줍니다.
텍스트의<br>줄바꿈b (inline)
설명 및 예시
글자를 굵게 표시는 태그입니다. 의미적으로 b보다는 strong을 권고 하고 있습니다.
<b>굵게 표시</b>strong (inline)
설명 및 예시
글자가 굵은 텍스트가 표현이 되며 중요성을 강조할 때 사용합니다.
<strong>중요한</strong> 텍스트a (inline)
설명 및 예시
다른 페이지나 같은 페이지의 URL로 연결 할 수 있습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| href | URL | 링크 URL |
| download | 리소스를 다운로드하는 용도 | |
| rel | next , index , lincense ... | 링크가 현재 문서와 어떤 관계인지 설명을 해줍니다. |
| type | text/html ... | 링크 URL의 MIME.type |
| target | _self {기본값 현재 창에서 열기} _blank {새창에서 열기} | 링크할 URL 표시할 위치 |
<a href="https://naver.com" target="_blank">주소</a>u (inline)
설명 및 예시
밑줄있는 텍스트로 바꿔줍니다.
<u>밑줄</u>span (inline)
설명 및 예시
span은 아무 역할을 하지 않는 태그 입니다.
div랑 매우 유사하지만 div는 블록요소이며 span는 인라인 요소입니다.
<span>바나나</span>em (inline)
설명 및 예시
단순한 의미 강조를 표시해줍니다.
em이 중첩될수로 강조의 의미가 강해집니다.
<em>강조</em>q (inline)
설명 및 예시
짧은 인용문을 적을 경우에 적합합니다.
<q>짧은 인용문</q>img (inline)
설명 및 예시
img는 빈 태그 이면서 이미지를 삽입합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| src | URL | 필수 이미지 경로 및 주소 |
| alt | 이미지 대체텍스트 |
<img src="" alt="">mark (inline)
설명 및 예시
중요한 내용을 형광펜 쓰는것과 같이 해당 내용을 시각적으로 강조 합니다.
<mark>굵게 표시</mark>time (inline)
설명 및 예시
날짜나 시간을 목적으로 사용을 합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| detetime | Date0 | 유효한 날짜 문자 |
<time datetime="2022-04-15">2022년 4월 15일</time>label (inline)
설명 및 예시
라벨 가능 요소의 제목입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| for | 참조할 라벨 가능 요소의 id 속성 값 |
<label for="apple"></label>audio (inline)
설명 및 예시
사운드 컨텐츠를 삽입할 때 사용합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| autoplay | Boolean | 준비되면 바로 재생 |
| controls | Boolean | 제어 메뉴를 표시 |
| loop | Boolean | 재생이 끝나면 다시 처음부터 재생 |
| preload | none: 로드하지 않음, metadata: 메타데이터만 로드 auto: 전체 파일 로드 | 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공) |
| src | URL | 컨텐츠 URL |
| muted | Boolean | 음소거 여부 |
<abdio src="./asset/example1.mp3"></addio>Block tag
설명 및 예시
인라인 속성과 다르게 한 줄을 완전히 차지한다. 블록 속성은 기본 너비 가 100%다.
p (block)
설명 및 예시
paragraph 약자로써 문단(문장)을 만들 때 사용합니다.
<p>나의 집이란 장소가 아니라, 사람들이다.</p>blockquote (block)
설명 및 예시
일반적으로 긴 인용문을 적을때 적합합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| cite | URL | 인용된 정보의 URL |
<blockquote cite="https://www.example.com">행복하기 위해 살 수 없다면, 최소한 행복할 자격을 갖추기 위해 살자.</blockquote>h1 ~ h6 (block)
설명 및 예시
HTML h1 - h6는 6단계 제목을 나타냅니다.
숫자가 작을수록 제일 대제목, 숫자가 높을수록 소제목을 뜻합니다.
<h1>대제목</h1>
<h2>2번째로 중요한 제목</h2>div (block)
설명 및 예시
Division의 약자로써 주로 영역이나 구역을 정할 때 사용합니다.
<div>바나나</div>hr (block)
설명 및 예시
문단을 분리할때 사용을 합니다.
과학은 정리된 지식이다. <hr> 지혜는 정리된 인생이다.ol ul li (block)
설명 및 예시
ol(Ordered List)은 순서가 있는 리스트를 정의할때 사용을 합니다.
ul(Unordered List)은 순서가 없는 리스트를 정의할때 사용을 합니다.
li는 단독으로 사용할 수 없으며 ol ul 안에 포함되어야 합니다.
ol Attributes
| 속성 | 값 | 설명 |
|---|---|---|
| start | 숫자 | 번호가 시작하는 값 |
| alt | a , A , i , I , 1 | 번호의 유형 |
li Attributes
| 속성 | 값 | 설명 |
|---|---|---|
| value | 숫자 | 항목의 순서를 설정 |
<ol>
<li>1번</li>
<li>2번</li>
</ol>
<ul>
<li>1번</li>
<li>2번</li>
</ul>dl dt dd (block)
설명 및 예시
dl(definition list)는 용어 설명하는 목록을 만듭니다.
dt(definition term)는 제목을 의미합니다.
dd(definition description)는 내용 설명을 의미합니다.
<dl>
<dt>사과의 특징</dt>
<dd>잘 익은 사과는 껍질이 벗겨지지 않은 상태에서도 청량감이 있는 좋은 냄새가 난다.</dd>
<dt>바나나 효능</dt>
<dd>체중 감량 다이어트 효과</dd>
</dl>form (block)
설명 및 예시
사용자가 입력한 값을 서버에 넘겨줍니다.
| 속성 | 값 | 설명 |
|---|---|---|
| action | URL | 전송한 정보를 처리할 웹페이지의 URL |
| autocomplete | on , off | 기본값 : on 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 |
| method | GET, POST | 기본값 : GET 서버로 전송할 HTTP 방식 |
| name | 고유한 양식의 이름 | |
| novalidate | 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 | |
| target | _self , _blank | 기본값 : _self 서버로 전송 후 응답받을 방식을 지정 |
<div>바나나</div>inline-block
설명 및 예시
인라인 요소와 비슷 하지만 높이와 너비를 조절할 수 있다.
input (inline-block)
설명 및 예시
input은 빈태그로써 사용자에게 정보를 입력 받을 데이터 양식입니다.
| 값 | 데이터 종류 | 설명 | 특징 |
|---|---|---|---|
| value | 양식의 초기 값 | ||
| placeholder | 사용자가 입력할 값의 힌트 | ||
| autocomplete | on(기본값), off | 이전에 입력한 값으로 자동 완성 기능 여부 | |
| 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 | 입력 가능한 최대 문자 수 | type 속성 값이 text, email, password, tel, url일 경우만 |
| multiple | Boolean | 둘 이상의 값을 입력 할 수 있는지 여부 | type 속성 값이 email, file일 경우만, email일 경우 ,로 구분 |
| name | 양식의 이름 | ||
| readonly | Boolean | 수정 불가한 읽기 전용 | |
| src | URL | 이미지의 URL | type 속성 값이 image일 경우만 |
| alt | 이미지의 대체 텍스트 | type 속성 값이 image일 경우만 | |
| type | 기본값 text | 입력 받을 데이터의 종류 | |
| step | Number | 유효한 증감 숫자의 간격 | type 속성 값이 number, range일 경우만 |
type Attribute List
| 값 | 데이터 종류 | 특징 |
|---|---|---|
| type | 입력 받을 데이터의 종류 | |
| search | 검색 | |
| 이메일 | ||
| password | 비밀번호 | |
| submit | 제출 버튼 | |
| color | 색상 | |
| date | 날짜 | |
| checkbox | 체크박스 | |
| button | 버튼 | |
| file | 파일 | |
| image | 이미지 제출 버튼 | |
| number | 숫자 | |
| hidden | 보이지 않지만 전송할 양식 | |
| radio | 라디오 버튼 | |
| range | 범위 컨트롤 | |
| reset | 초기화 | |
| text | 일반 텍스트 | |
| url | 절대 URL | |
| time | 시간 |
<input type="text">textarea (inline-block)
설명 및 예시
여러 줄의 일반 텍스트 양식입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| autocomplete | on(기본값), off | 이전에 입력한 값으로 자동 완성 기능 여부 |
| autofocus | Boolean | 페이지가 로드될 때 자동으로 포커스 |
| disabled | Boolean | 양식을 비활성화 |
| form | form의 id 속성 값 | |
| maxlength | Number | 입력 가능한 최대 문자 수 |
| placeholder | 사용자가 입력할 값의 힌트 | |
| name | 양식의 이름 | |
| readonly | Boolean | 수정 불가한 읽기 전용 |
| rows | Number | 양식의 줄 수 |
<textarea name="text" id="" cols="30" rows="10"></textarea>button (inline-block)
설명 및 예시
선택 가능한 버튼을 지정해줍니다..
| 속성 | 값 | 설명 |
|---|---|---|
| autofocus | Boolean | 페이지가 로드될 때 자동으로 포커스 |
| disabled | Boolean | 버튼을 비활성화 |
| form | form의 id 속성 값 | |
| name | 폼데이터와 함께 전송되는 버튼의 이름 | |
| type | button, reset, submit | 버튼의 타입 |
<button name="apple" disabled>button</button>