ABCDEFGHIJKLMNOPQRSTUVWXYZ
1
1. HTMl 기본 레이 아웃 ( semantic element )
2
(1) 목적
3
 - 개발자 및 컴퓨터에 정확한 의미를 전달 하기 위해서 사용한다.
4
 - semantic = 의미
5
 - semantic element = 의미있는(의미로적) 요소
6
(2) non-semantic vs semanic
7
- non-semanic element = <div> 와 <span> 같이 내용에 대해서 아무것도 안알려주는 element
8
- semanic element = <from>, <table>, <img> 처럼 그 내용에 대해서 분명히 정의해 주는 element
9
(3) semanic-element
10
종류 의미typeW3School example 주소
11
<header>- 문서 또는 섹션 헤더를 지정합니다.
- 소개 내용에 대한 컨테이너로 사용되어야 한다. .
- 하나의 문서에 여러 <header> 요소를 포함 할 수 있습니다.		blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_header
12
<nav>탐색 링크(navigation links)의 집합을 정의.blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_nav
13
<section>(section)은 일반적으로 제목이 있는 주제를 갖는 내용들의 그룹으로 정의합니다blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_section
14
<article> 독립적인 자체적으로 만족되는 내용을 지정합니다.
* 포럼 게시물
* 블로그 포스트
* 뉴스 기사
* 논평		blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_aside
15
<aside>주요 내용을 제외한 내용의 정의하며 사이드 바 등에 배치된다.
(주변 contents와 관련이 있어야한다) 		blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_aside
16
<footer>- 문서나 구역의 바닥 글을 지정합니다.
- 포함하는 요소에 대한 정보를 포함해야합니다.
- 일반 적으로 문서의 작성자, 저작권 정보, 이용 약관에 대한 링크, 연락처 정보를 포함.
- 하나의 문서에 여러 <footer> 요소를 포함 할 수 있습니다.		blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_footer
17
<figure>- <figure> 태그 같은 그림, 도표, 사진, 코드 샘플 등과 같이
자족적인(self-contained) 내용을 지정합니다.
- <figure> 요소의 내용이 주된 흐름과 관련되어 있지만, 그 위치는 독립적이며,
제거된 경우에도 그 문서의 흐름에 영향을 주지 않아야 한다.		inlinehttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figure
18
<figcaption><figcaption> 태그는 <figure> 요소에 대한 캡션을 정의합니다.
<figcaption> 요소는 <figure> 요소의 첫 번째 또는 마지막 내용으로 배치 할 수 있습니다.		inlinehttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption
19
<details>- 자세한 내용을 숨기는 기능을 한다. blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details
20
<summary>요약 정보를 표시할때 사용한다.blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_summary
21
<mark>강조 표시를 위해서사용한다. blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_mark
22
<time>시간 정보임을 표시한다blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_time
23
<main>문서내의 메인 정보를 표시한다. blockhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_main
24
25
HTML 요소와 종류 특징
26
구분블록 요소 (BLOCK)인라인 요소(INLINE)범용 요소
27
종류<h1>~<h6><q><div>
28
<p><em><li>
29
<address><strong><dd>
30
<block-quote><abbr><address>
31
<ul> , <ol><ac-ronym><p>
32
<li><sup>
33
<dl><sub>
34
<dt><img>
35
<dd><a>
36
<div><map>
37
<area>
38
<span>
39
특징 및
각 요소별
차이점		줄 바꿈 속성을 가지고 있다줄 바꿈 속성이 없음
40
기본 너비 속성이 100%이다내용 만큼 넒이가 유지됨
41
너비와 높이의 속성을 사용할수 없음
42
블록 요소를 포함 할수 없지만,예외인 요소도 있다.블록 요소를 포함 할수 없다블록 요소임에도 불구하고
모든 요소를 포함할 수 있다.
43
인라인 요소를 포함 할 수 있다인라인 요소를 포함 함수 있다.
44
45
46
문단 태그 정리
47
종류설명종류설명
48
<h1>~<h6>제목 요소 / 숫자가 작을 수록 큰 제목<img>이미지 요소
49
<p>단락 구분 요소<a>링크 요소
50
<address>주소 태그, 주소를 작성할때 사용(<p>만 포함 가능)<map>맵 선언 요소
51
<hr>구분선 요소<area>맵 좌표 영역 설정 요소
52
<q>잛은 인용 구문 요소 ( 표현 형식 : "인용구문" )<ul>비 순차 목록 선언 요소
53
<blockquote>긴문장 인용 구문<ol>순자 목록 선언
54
<em>강조(주간적)요소 ( 표현 형식 : 강조구문)<li>목록 요소
55
<strong>강한 강조(객관적)요소 (표시 형식 : 강조구문)<dl>정의 목록 선언 요소
56
<abbr>줄임말(앞글자 줄임) 요소 ( 표현 방법 : 마우스 가져다 대면 글자가 나타난다)<dt>용어 표현 요소
57
<acronym>줄임말(모음/자음 조합 줄임) 요소 (html5에 없음)<dd>용어 설명 요소
58
<sup>위 첨자 요소<div>범용 그룹화 요소
59
<sub>아래 첨자 요소<span>인라인 요소 그룹화 요소
60
61
62
테이블 태그 와 속성
63
종류설명속성설명
64
<table>표의 시작과 종료width-"너비값"표 너비
65
border="선 두껫값"표 선 두께
66
summary="테이블 내용 요약"표 내용 요약
67
cellspacing="셀 간격"셀 과셀의 간격
68
<tr>한 행의 시작과 종료
69
<th>제목 열(cell)scope="col"열 제목일 경우
70
scope="row"행이 제목일 경우
71
<td>데이터 열(cell)rowspan="행 개수"행 합치기
72
colspan="열 개수"열 합치기
73
<caption>표 제목
74
<colgroup>열 그룹 시작과 종료
75
<col>열 그룹 설정width-"너비값"
76
<thead>표 머리 영역(셀 제목영역)
77
<tbody>표 본문 영역(데이터 영역)
78
<tfoot>표 바닥 영역(통계, 합계 등)
79
80
81
폼(form) 태그와 속성
82
종류설명속성설명
83
<form>입력 양식 영역
(전송 역할)		name폼이름
84
method전송 방식(get , post)
85
action입력값을 전송할 페이지
86
targetaction 태그에서 지정한 스크립트
파일을 현재 창이아닌 다른 위치에
열도록 지정
87
<fieldset>입력 요소 그룹화
88
<legend>그룹 제목
89
<input>입력 요소type
https://www.w3schools.com/html/html_form_input_types.asp		text한 줄 글 상자
90
password비밀번호
91
checkbox중복 선택 상자
92
radio단일 선택 상자
93
submit확인 버튼(전송 기능)
94
image이미지 버튼 (전송 기능)
95
file파일 첨부
96
button범용 버튼
97
hidden화면 표시 안됨(숨긴 값을 전송)
98
value입력 값
99
name요소 이름
100
id요소 아이디