<HTML>
1. <!doctype html> : HTML5버전으로 작성됨
2. <html lang =“ko”> : 한국어로 작성된 문서, en : 영어, zh : 중국어, ja : 일본어
3. <!-- --> : 주석
4. <head> 태그 안에 <title>,<style>,<meta>,<base>,<script>,<link> 투입 가능
5. <h1>~<h6> : 헤딩 태그 : 검색 엔진이나 이 문서를 들여다 보는 사람들에게 이 문서의 전체적인 구조를 알려줌
6. <p>~</p> : 단락(paragraph) 정의하는 태그, 기본 공백과 1개의 빈 칸만 표시되고 나머지는 무시됨
7. <br> : 줄 바꿈 태그
8. <hr> : 가로선 표시, 끝 태그가 없는 빈 태그
9. html entity
- < : <
- > : >
- & : &
- “ : "
- ‘ : '
- ¢ : ¢
- £ : £
- ¥ : ¥
- § : §
- Ⓒ : ©
- Ⓡ : ®
- x : ×
- / : ÷
- :
10. <pre> : 입력한 그대로 빈 줄과 빈 칸 표시
11. 특수 효과 지정된 텍스트
- <b></b> : 볼드체 텍스트
- <em></em> : 강조체 텍스트
- <i></i> : 이탤릭체 텍스트
- <small></small> : 다른 텍스트보다 작은 크기
- <strong></strong> : 중요한 텍스트
- <sub></sub> : 아랫첨자 텍스트
- <sup></sup> : 윗첨자 텍스트
- <ins></ins> : 삽입된 텍스트
- <del></del> : 삭제된 텍스트
- <mark></mark> : 하이라이트 지정된 텍스트
12. <q></q> : 인용부호 삽입, 인용구만 별도로 검색하거나 분류 시 사용
13. <blockquote></blockquote> : 문단을 하나의 인용구로 삼을 때 사용
14. <abbr title = “World Wide Web Consortium”> </abbr> : 약자나 머리글자의 원문을 표시하는 태그, title 속성 사용
15. <address></address> : 특정 문서, 제품 등의 소유자나 제작자의 연락처, 주소를 표시할 때 사용, 이탤릭체, 공백
16. <cite></cite> : 영화, 음악, 그림 등 작품의 제목이나 타이틀을 기술
17. <bdo></bdo> : bi-directional override -> 텍스트의 출력 방향을 지정
<bdo dir = “ltr”> : 텍스트가 왼쪽에서 오른쪽으로 정상적 출력
<bdo dir = “rtl”> : 텍스트가 오른쪽에서 왼쪽으로 역순 출력
18. style 속성
- CSS 사용하기도 함
- style = “프로퍼티 : 값;”
19. 배경색 지정
- <body style = “background-color : lightyellow;”>
- <body style = “background-color : #FFFFF0;”>
20. 텍스트 색 지정
- <p style = “color : red”>
21. 텍스트 크기 지정
- <p style = “font-size : 50%;”>
22. 텍스트 정렬
- <p style : “text-align:center;”>
- <p style : “text-align:left;”>
- <p style : “text-align:right;”>
23. 그룹지정
- 여러 요소를 크게 묶는 <div>
- 하나의 요소 내에 그룹을 지정하는 <span>
24. 링크
- <a href = “이동할 위치”> 텍스트나 그림</a>
25. 동일 문서 내에서 이동하기
<a href =“#seoul”>서울</a>
...
<h2 id = “seoul”>서울</h2>
26. 다른 문서로 이동하기
<a href = “seoul.html”>서울</a>
...
27. 다른 문서의 특정 위치로 이동
<a href = “city.html#seoul”>서울</a>
...
<h2 id = “seoul”>
28. 다른 웹 사이트로 이동
<a href = “http://www.kyohak.co.kr”>
29. 새 탭이나 창에 표시하기
- <a> 태그의 target 속성을 _blank로 지정
30. target =“_self” : 원래 문서와 동일한 탭이나 창에 표시(기본)
target =“_parent” : 현재 문서를 호출한 상위 탭이나 창 표시, 없으면 현재 탭이나 창에 표시
target =“_top” : 최상위 탭이나 창에 표시, 없으면 현재 탭이나 창에 표시
target =“framename” : 지명된 프레임에 표시
31. 그림으로 문서 연결하기
- <a href=“http://blog.naver.com/itkyohak” title = ”itkyohak 블로그 이동“><img src =“kyohak.png”></a>
32. 순서 없는 기본 목록
- 목록 태그는 <ul></ul>
- 각 항목은 <li></li>
33. 다양한 순서없는 목록 만들기
<ul style = “list-style-type:disc> : bullet 글머리 기호
<ul style = “list-style-type:circle> : circle 글머리 기호
<ul style = “list-style-type:square> : square 글머리 기호
<ul style = “list-style-type:none> : 글머리 기호 표시 안함
34. 순서 있는 기본 목록
- 목록 태그는 <ol></ol>
- 각 항목은 <li></li>
35. 다양한 순서 있는 목록 만들기
<ol type = “1”> : 항목 앞에 숫자 표시(기본)
<ol type = “A”> : 항목 앞에 알파벳 대문자 표시
<ol type = “a”> : 항목 앞에 알파벳 소문자 표시
<ol type = “I”> : 항목 앞에 로마 숫자 대문자 표시
<ol type = “i”> : 항목 앞에 로마 숫자 소문자 표시
36. 목록에서 순서 바꾸기
- <ol reversed> : 역순 번호 표시 but, 인터넷 익스플로러에는 적용 안됨
- <ol start = “5”> : 5부터 시작
- <li value = “10”> : 번호의 순서를 건너 뛰고 10부터 시작
37. 목록 안에 목록 표시하기
- <ul style = “list-style-type : circle”>
<li>커피</li>
<li>차
<ul style = “list-style-type : square”>
<li>인삼차</li>
<li>생강차</li>
</ul>
</li>
</ul>
38. 정의 목록 만들기
- <dl>
<dt>커피</dt>
<dd>현대인의 휴식을 위한 음료</dd>
</dl>
- <dl> : 정의 목록 전체
- <dt> : 정의할 용어
- <dd> : 용어의 해설
39. 기본 테이블 만들기
<style>
table, th, td{
border: 1px solid black;
}
</style>
<table>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
...
</table>
border-collapse : collapse; -> 테두리 선이 1개 선으로 가늘게 표시
<table> : 테이블의 개수
<tr> : 행의 개수
<td> : 열의 개수
40. 테이블의 열 제목과 행 제목 지정하기
-<th>태그 : table header
행이나 열의 제목
<th>이름</th>
<th>주소</th>
<th>전화번호</th>
41. 테이블의 열이나 행 병합하기
- 여러 개의 열을 합치기 : colspan 속성
- 여러 개의 행을 합치기 : rowspan 속성
- <th rowspan=“2”>전화번호</th>
- <th colspan=“2”>전화번호</th>
42. 테이블에 캡션 표시하기
- <caption>협의회 대표 주소록</caption>
- 테이블 캡션은 테이블당 한 개만 지정할 수 있음
- <caption> 태그는 반드시 <table> 태그 바로 다음에 기술
- 캡션은 자동으로 테이블 위쪽에 가운데 정렬되어 표시
43. 열 그룹 지정하기
- <colgroup>
<colgroup>
<col span = “2” style = “background-color:cyan”>
<col style =“background-color:yellow”>
<col>
</colgroup>
<colgroup>태그는 <table>,<caption>태그보다 뒤에 기술
<thead>,<tbody>,<tfoot>,<tr>태그보다 앞에 기술
44. 테이블의 머리말, 본문, 꼬리말 구분하기
- <thead> 머리말
- <tbody> 본문
- <tfoot> 꼬리말
45. 이미지 표시하는 기본적인 방법
<img src = “daum.png” alt = “다음입니다.”>
src -> 정확한 경로
alt -> 지정한 이미지가 표시되지 않을 때 표시될 텍스트 기술
46. 이미지 위에 메시지 표시하기
- <img src =“daum.png” alt=“다음입니다.” title=“반갑습니다. 어서오세요!”>
47. 이미지 크기 조절하기
- <img src = “daum.png” alt=“다음입니다.” style=“width:216px; height:113px;”>
48. 이미지 캡션 지정하기
- <figure>
<img src=“entry.jpg” alt=“엔트리의 모든 것 표지입니다.”>
<figcaption>엔트리의 모든 것</figcaption> </figure>
49. 이미지 맵 사용하기
- 좌표를 사용해서 하나의 이미지를 여러 개의 영역으로 분할하고 각 영역마다 서로 다른 문서를 연결하여 표시함으로써 이미지를 마치 하나의 지도처럼 사용할 수 있으며, 이런 기법을 이미지 맵(image map)
-<map name=“papermap”>
<area shape=“rect” coords(좌표값)=“0,0,136,120” alt=“디지털타임즈” href=“times.html”>
...
50. Form(폼)
- <form>
.....
<input>
<select>
<option>
.....
</form>
폼 요소 만들기
- 입력 폼 : <input type=“xxxx”>, <textarea>
- 선택 폼 : <select>, <option>
폼 요소 그룹화
- 여러 개의 폼 요소 묶기 : <fieldset>, <legend>
- 레이블과 폼 요소 묶기 : <label>
51. text와 password 필드 만들기
<input type = “text” name=“id”>
<br><br>
암 호 : <br>
<input type = “password” name=“security”>
52. 다양한 속성으로 text와 password 필드 조절하기
size : 필드의 크기를 문자 개수 지정
value : 필드에 기본적으로 표시되는 데이터를 지정
maxlength : 필드에 입력할 수 있는 최대 문자 개수를 지정
53. textarea 만들기
<textarea name=“question” rows=“10” cols=“40”>
여기에 질의할 내용을 입력하시면 됩니다.
</textarea>
rows : 입력 할 수 있는 라인의 개수
cols : textarea의 너비 지정
54. Radio 버튼과 Check 박스 만들기
- Radio 버튼 만들기
<input type=“radio” name=“phone” value=“1” checked>갤럭시<br>
radio 버튼이기 때문에 표시되는 목록에서 1개만 체크 가능
첫 번째 항목은 이미 체크된 상태로 출력
- Check 박스 만들기
<input type=“checkbox” name=“hobby” value=“game”>게임<br>
- 여러 개의 항목에 체크를 할 수 있다.
55. 명령 버튼과 submit 버튼 만들기
명령 버튼
<input type=“button” value=“검색” onclick=“zipcode_search()”>
submit 버튼
<form action=“member.php” method=“post”>
- 폼의 내용을 전송 받아 처리할 서버쪽의 프로그램 파일 이름 기술
- method 속성은 get이나 post 전송방식
<input type=“submit” value=“전송하려면 클릭하세요!”>
56. email과 url 필드 만들기
<input type=“email” name=“email”>
<input type=“url” name=“url”>
57. 드롭다운 목록 만들기
- 버튼을 클릭했을 때 항목들이 아래로 펼쳐지면서 하나를 선택 가능하다
- <select>태그로 데이터 목록 정의
- <option>태그로 각 항목을 기술
- <optgroup>태그로 항목들을 그룹으로 묶어 응용함
<form>
<select name=“city”>
<option value=“부산”>부산시</option>
<option value=“대구” selected>대구시</option>
<option value=“서울”>서울시</option>
</select>
</form>
58. 드롭다운 목록 조절하기
<select name=“city” size=“5” mutiple>
multiple -> [Ctrl]키와 함께 클릭해서 여러 개의 항목을 선택할 수 있다
59. 항목을 그룹으로 묶기
- <form>
<select name = “city”>
<optgroup label = “경상도”>
...
<optgroup label = “전라도”>
...
</select>
</form>
60. 폼 요소 그룹화하기
- <form>
<fieldset name=“info”>
<legend>개인정보</legend>
이름 : <input type=“text” name=“name”><br>
메일 : <input type=“email” name=“email”><br>
직업 : <input type=“text” name=“job”><br>
</fieldset>
</form>
61. 레이블 사용하기
- 텍스트 필드 안을 클릭하지 않고 앞에 있는 레이블을 클릭해도 필드 안에 마우스 커서가 표시된다.
<form>
<p> 1. label 사용</p>
<label> 이름 : <input type=“text” name=“name”></label><br>
<label> 주소 : <input type=“text” name=“address”></label>
- label과 for 속성 : 레이블과 폼 요소가 서로 떨어져 기술되어도 연결할 수 있다는 장점이 있다.
62. 시맨틱 태그(Semantic)
- 내용을 정확히 알 수 있는 태그
- <form><table><img>
<section>태그 사용하기
- 문서 내에 섹션을 정의하는 역할
- 섹션은 문서를 주제별로 나누며 자체적으로 제목을 가진다
<section>
<h3>HTML의 개요</h3>
<p> ~ </p>
</section>
<article>태그 사용하기
- 문서의 내용을 분할하는 의미보다는 전체 내용에서 따로 분리되어 사용할 수 있는 내용을 정의하는 것
<header> 태그
- 한 개의 문서뿐만 아니라, 특정 섹션에서 머리 부분이나 도입부를 지정하기 위해 사용
- 문서 내에서 필요한 곳에 사용 여러번 사용 가능
<header>
<h2>HTML과 CSS의 이해</h2>
<hr>
</header>
<footer>태그
- 문서나 섹션의 꼬리 부분을 정의, 여러번 사용 가능
- 문서의 내용에 대한 정보를 제공하는 목적으로만 사용해야함
- 문서의 제작자, 저작권 정보, 연락처
<nav>태그
- 링크 메뉴, 네비게이션을 구현
- 많은 링크 메뉴를 블록으로 묶어 표현하는 목적
<nav>
<a href=“#”>HTML</a> //#은 빈 링크를의미
<a href=“#”>CSS</a>
<a href=“#”>JavaScript</a>
</nav>
<aside>태그
- <section>이나 <article>태그로 정의된 내용의 왼쪽이나 오른쪽 옆에 별도로 표시할 내용을 정의
- float:right -> 오른쪽 배치, float:left->왼쪽 배치
63. 비디오 활용하기
- <video src=“media/sports.mp4” width=“320” height=“240” autoplay controls> </video>
autoplay : 비디오가 표시되면서 자동으로 실행
controls : 시작, 일시 중지, 음소거, 전체 화면 확대 등의 비디오 컨트롤을 표시
- <source src=“media/sports.webm” type=“video/webm”>
: 파일 형식이 일치하면 그 파일이 재생된다
poster : 비디오 파일의 표지를 지정, 비디오 파일이 실행되기 전에 제일 먼저 표시
preload : ‘none’지정 시 사용자가 재생 버튼을 누르기 전에는 비디오 파일을 다운로드 하지 않음, ‘metadata’를 지정하면 해당 웹 페이지가 다운로드 될 때 비디오 파일의 크기, 재생 시간 등의 정보만 다운로드
‘auto’ 지정 시 해당 웹 페이지가 다운로드 될 때 비디오 파일이 함께 다운로드
loop : 비디오 파일 재생이 끝나면, 다시 처음부터 계속해서 반복 재생
64. 오디오 활용하기
<audio src=“media/guitar.mp3” autoplay controls>
...
</audio>
65. <object>와 <embed> 태그 사용하기
<!doctype html>
<html lang=“ko”>
<head>
<meta charset=“utf-8”>
<title>비디오 <object> 태그 </title>
</head>
<body>
<object data=“media/sports.mp4” width=“320” height=“240”>
<param name=“autoplay” value=“true”>
<param name=“showcontrols” value=“true”>
</object>
</body>
</html>
<object>
-data : 파일의 경로와 이름을 지정
-width와 height 속성 : 비디오가 표시되는 화면의 너비와 높이를 지정
<param>
- name 속성에 매개변수 지정
- value 속성에 값을 지정
- autoplay와 showcontrols 많이 사용
<embed>
- src : 비디오 파일의 경로와 이름을 지정
- width와 height 속성 : 비디오가 표시되는 화면의 너비와 높이를 지정
- autostart(자동실행) , showcontrols(콘트롤 표시)
66. <iframe> 태그로 프레임 만들기
- 웹 문서 내에 별도의 프레임을 만들고 그 프레임 안에 다른 웹 문서를 표시할 수 있다
- 하나의 화면에 2개의 문서를 동시에 표시하는 기능을 제공
<iframe src=“iframe_demo.html” width=“450” height=“200”>
</iframe>
67. <meta> 태그로 정보 제공하기
- 웹 문서에 대한 정보를 제공하며 웹 문서에는 그 내용이 표시되지 않습니다.
- 웹 문서에 대한 요약 설명, 저작자, 검색 키워드, 이름 등 검색 엔진이나 개발자를 위한 정보와 사용된 문자 세트, 표시제어 등 브라우저를 위한 정보를 제공
- <meta charset=“utf-8”>
- <meta name=“author” content=“이용학”>
<meta http-equiv=“refresh” content=“3”; url=“http://www.naver.com”>
-> 웹 문서의 표시를 제어하기 위한 정보를 브라우저에게 제공
검색 엔진이나 개발자에게 제공하는 정보는 name 속성과 content 속성의 쌍으로 기술
keywords는 검색 엔진이 이 문서를 검색하게 하는 핵심어를 지정, content 속성의 값을 신중하게 기술할 필요가 있음
68. 시맨틱 태그 호환성 해결하기
<style>
header,footer,section,article,nav{
display:block;
}
</style>