1. HTML5 문서의 구조
| <!DOCTYPE html> | : 현재 문서가 HTML5로 작성된 웹 문서임을 나타냄 - HTML5 문서를 선언하는 구문 - 생략 ㄱㄴ, 하위 호환성을 위해 작성 권장 |
| <html> | : HTML5 문서의 시작과 종료를 알림 - 언어 (lang) 속성 사용 → 주된 언어 값 설정 ㄱㄴ |
| <head> <title>제목 영역</title> </head> |
: HTML5 문서의 머리 - 웹 페이지 정보 정의 - <title> 태그, 자바스크립트, 스타일시트 등 정의 |
| <body> <p>본문 영역</p> <p>본문 영역</p> </body> |
HTML5 문서의 본문 |
| </html> |
2. HTML5 태그의 특징
| <img | src = "heat.jpg" | width = "100" | height = "50" | alt = "사랑합니다"> |
| 태그 이름 | 속성 | 속성 | 속성 | 속성 |
▷ 시작 태그와 종료 태그가 모두 있는 경우
<html>...</html>, <title> 문서의 제목입니다.</title>
▷ 시작 태그만 있는 경우
<br>
▶ HTML 태그 구성
▷ 태그와 속성은 대소문자 구분 X
- <HTML>..</html>
- <img Src = "hear.jpg" width = "100" height = "50" alt = "심장 이미지">
▷ 속성 값에 불필요한 공백 문자는 HTML5 표준에 어긋남
- <img Src = "hear.jpg" width = " 100" height = "50" alt = "심장 이미지">
2. HTML5 예제
▶ 웹 페이지 타이틀 달기
 |
<!DOCTYPE html> <html> <head> <title>첫 타이틀</title> </head> <body> 페이지에 타이틀을 다는 예제 입니다. 타이틀은 브라우저의 타이틀바에 보여집니다. </body> </html> |
▶ 문단 제목 달기
 |
<!DOCTYPE html> <html> <head> <title>문단 제목 달기</title> </head> <body> <h1>1장 홈페이지 만들기</h1> <h2>1절 HTML 언어</h2> <h3>1. 웹</h3> <h4>1.1 인터넷</h4> <h5>1.1.1 네트워크</h5> <h6>1.1.1.1 통신</h6> </body> </html> |
▶ 툴팁 달기
 |
<!DOCTYPE html> <html> <head> <title>툴팁 달기</title> </head> <body> <h1 title="h1 태그로 작성하였습니다.">1장 홈페이지</h1> <h2 title="h2 태그로 작성하였습니다.">1절 HTML 언어</h2> </body> </html> |
▶ 단락 나누기
 |
<!DOCTYPE html> <html> <head> <title>단락 나누기</title> </head> <body> <h3>2개의 단락 나누기</h3> <p> HTML 문서도 본문을 여러 단락으로 나눌 수 있다. CSS 스타일을 사용하면 단락 단위로 내어 쓰기와 들여 쓰기가 가능하다. </p> <p> 여러 개의 빈 칸은 하나로 취급되며, 엔터 키 역시 하나의 빈 칸으로 처리된다. </p> </body> </html> |
▶수평선 긋기
 |
<!DOCTYPE html> <html> <head> <title>수평선 긋기</title> </head> <body> <h3>수평선 긋기</h3> <hr> <p> hr 태그는 horizontal에서 단 글자입니다. </p> <hr> <p> 종료 태그 </hr>를 사용하지 않습니다. </p> </body> </html> |
▶새로운 줄로 넘어가기
 |
<!DOCTYPE html> <html> <head> <title>새로운 줄 넘어가기</title> </head> <body> <h3>새로운 줄 넘어가기</h3> <hr> <br> 태그로 다음 줄로 넘어갑니다 <br> 2 개의 <br>태그로 두 번 넘어 갑니다. <br><br> 잘 보이나요? </body> </html> |
3. 문자, 기호, 심볼 입력
▶ HTML5의 문자
: 유니코드 문자셋, UTF-8 코드 체계
▷ 예약어, 키보드로 입력이 어려운 기호들
- &엔터티; or &#코드값;
4. HTML5 예제
▶ 특수 문자, 기호, 심볼 삽입
 |
<!DOCTYPE html> <html> <head> <title>문자, 기호, 심볼 표현</title> </head> <body> <h3>기호 넣기</h3> <hr> 10 ÷2 = 5 <br> √2 = 1.414 <br> 2 < 3 <br> 오늘"Elvis"노래를들었다. </body> </html> |
▶ 특수 문자, 기호, 심볼 삽입
 |
<!DOCTYPE html> <html> <head> <title>개발자의 포맷 그대로 출력</title> </head> <body> <h3>개발자의 포맷 그대로 출력하기</h3> <hr> <p> <p> 태그를 사용하면 여러 개의 빈 칸은 하나로, 여러 줄은 한 줄에 붙여 출력됩니다. </p> <hr> <pre> 그러나 <pre> 태그를 사용하면 사용자가 입력한 그대로 출력됩니다. </pre> </body> </html> |
▶ 텍스트 꾸미기
 |
<!DOCTYPE html> <html> <head> <title>텍스트 꾸미기</title> </head> <body> <h3>텍스트 꾸미기</h3> <hr> <p> <b>진하게</b><br> <strong>중요한</strong><br> <em>강조</em><br> <i>이탤릭으로강조</i><br> <b><i>진하게이탤릭으로강조</i></b> <br>보통문자<small>한단계작은문자</small><br> <del>삭제</del><br> <ins>추가</ins><br> 보통문자의<sup>윗첨자</sup><br> 보통문자의<sub>아래첨자</sub><br> <mark>하이라이팅</mark><br> </p> </body> </html> |
5. 블록 태그와 인라인 태그
▶ 태그
: 블록 태그와 인라인 태그로 구분
▷ 블록 태그
- 항상 새 라인에서 시작
- 한 라인 독점
- 가장 많이 사용되는 블록 태그 : <div>
- 사례 : <p>, <h1>, <div>, <ul>
▷ 인라인 태그
- 블록 속에 삽입되어 블록의 일부로 출력
- 가장 많이 사용되는 인라인 태그 : <span>
- 사례 : <strong>,<a>, <img>, <span> ,<br>
※ <br>은 블록 내에서 줄 바꿈 → 인라인 태그
6. HTML5 예제
▶<div>, <span>
 |
<!DOCTYPE html> <html> <head> <title><div>블록과<span>인라인</title> </head> <body> <h3>자유의 여신상</h3> <hr> <div style="background-color:skyblue; padding: 20px;"> 고단한 자여, 가난한 자여, 자유로이 숨쉬고자 하는 군중이여, <span style="color: red"> 내게로 오라.</span> 너희 들끓는 해변의 초라한 자여, 갈 곳이 없는 자여, 폭풍에 휩쓸린 자여, <span style="color:red">내게로 오라.</span> </div> <p> 내가 황금 문 옆에 등불을 높이 쳐들리라! </p> </body> </html> |
7. 메타 데이터 삽입 : <base> 태그
▶웹 페이지들의 기본 URL과 페이지가 출력될 윈도우 지정
- math.html 이나 science.html 페이지가 http://www.mysite.com/score/ 에 있는 경우
| <a href = "http://www.mysite.com/score/math.html"> 수학 </a> |
| <a href = "http://www.mysite.com/score/science.html"> 과학 </a> |
- 위의 HTML 소르를 <base> 태그를 이용하여 수정
| <head> <a href = "http://www.mysite.com/score/math.html"> 수학 </a> </head> |
| <a href = "math.html"> 수학 </a> <a href = "science.html"> 과학 </a> |
 |
<!DOCTYPE html> <html> <head> <title>태그</title> </head> <body> <a href="/Soonchunhyang/Medical IT Engineering/score/math.html">수학</a> <a href="/Soonchunhyang/Medical IT Engineering/score/science.html">과학</a> </body> </html> |
 |
<!DOCTYPE html> <html> <head> <base href="/Soonchunhyang/Medical IT Engineering/score/"> <title>태그</title> </head> <body> <a href="math.html">수학</a> <a href="science.html">과학</a> </body> </html> |
8. 메타 데이터 삽입 : <link> 태그
▶<link> 태그는 외부 자원 연결에 사용
- Mystyle.css에 저장된 스타일 시트를 불러오도록 지시
| <head> <link type-"text/css" rel="stylesheet" href="mystyle.css"> </head> |
9. 메타 데이터 삽입 : <meta> 태그
▶<meta> 태그는 다양한 메타 데이터 표현
- 웹 페이지 저작자가 "강아지"임을 표기하는 사례
| <meta name = "autor" content = "강아지"> |
- 웹 페이지의 내용 설명
| <meta name = "descriptioon" content = "입학 요령에 대한 사항"> |
- 웹 페이지의 키워드 (검색 엔진에 의해 검색되게 하기 위함)
| <meta name = "keywords" content="컴퓨터, 소프트웨어"> |
- charset 속성으로 웹 페이지에 사용하는 문자 코드 지정
| <meta charset="urf-8"> |
10. 이미지 삽입
▶<img> 태그의 src 속성에 이미지 파일의 주소 지정
| <img src = "이미지 파일의 URL" | - 필수 속성 |
| alt = "문자열" | : 이미지 출력할 수 없는 경우 출력되는 문자열 - 필수 속성 |
| width = "이미지 폭" | : 이미지가 출력되는 너비 - 생략시, 원본 이미지 폭 - 픽셀 수 |
| height = "이미지 높이" | : 이미지가 출력되는 높이 - 생략시, 원본 이미지 너비 - 픽셀 수 |
| <!DOCTYPE html> <html> <head> <title>이미지 삽입</title> </head> <body> <h3>이미지삽입</h3> <hr> <p> 자유의여신상</p> <img src ="media/Statue of Liberty.png" width="200" height ="150" alt="Statue of Liberty"> <img src ="media/Sangdae.jpg" width="80" height="100" alt ="사진없음"> <img src ="http://t1.kakaocdn.net/kakaocorp/kakaocorp/adm in/service/453a624d017900001.png" alt="주소로연결한카카오톡이미지" width="100" height="100"> </body> </html> |
  |
11. 리스트 만들기
▶ 3가지 종류의 리스트
- 순서가 있는 리스트 : <ol> </ol>
- 순서가 있는 리스트 : <ul> </ul>
- 순서가 있는 리스트 : <dl> </dl>
▶ 리스트 아이템
- <li> </li>
- </li>는 생략 ㄱㄴ
| <ol type = "1" | "A" | "a" | "I" | "i" | start = "value"> <li>아이템</li> <li>아이템</li> </ol> |
▷ type
: 마커 종류
- type = "1" → 1, 2, 3, 4, ....
- type = " A " → A, B, ,C, ...
- type = " a " → a, b, c, ...
- type = " I " → I, II, III, ...
- type = " i " → i, ii, iii, .....
▷ start
: 마커의 시작 값
- 숫자에 대해서만 적용
예) start = "5" → 5, 6, 7, ... (5부터 시작)
| <ul> <li>아이템</li> <li>아이템</li> </ul> |
| <li type = "1" | "A" | "a" | "I" | "i" > 아이템 </li> |
▷ type
: 마커 종류
- <ol> 태그에 대해서만 유효
12. 리스트 만들기 예제
▶<ol>로 라면 끓이는 순서 나열
 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>라면을 끓이는 순서</title> </head> <body> <h3>라면을 끓이는 순서</h3> <hr> <ol type="A"> <li>물을 끓인다.</li> <li>라면과 스프를 넣는다.</li> <li>파를 썰어 넣는다.</li> <li>5분 후 먹는다.</li> </ol> </body> </html> |
▶<ul>로 좋아하는 음식 나열
 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>내가 좋아하는 음식</title> </head> <body> <h3>내가 좋아하는 음식</h3> <hr> <ul> <li>감자탕 <li>스파게티 <li>올레국수 </ul> </body> </html> |
▶중첩 리스트
 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>중첩 리스트 만들기</title> </head> <body> <h3>내가 사는 이유</h3> <hr> <ul> <li>내가 좋아하는 음식 많아요 <ul> <li>감자탕 <li>스파게티 <li>올레국수 </ul> <li>라면 먹기 좋아해요 <ol type="1"> <li>물을 끓인다.</li> <li>라면과 스프를 넣는다.</li> <li>파를 썰어 넣는다.</li> <li>한 입에 다 먹는다.</li> </ol> <li>여름에는 바다로 <li>가을에는 산으로 </ul> </body> </html> |
▶정의 리스트 만들기
 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>정의 리스트</title> </head> <body> <h3>웹 브라우저 종류</h3> <hr> <dl> <dt><strong>Internet Explorer</strong></dt> <dd>마이크로소프트에서 만든 브라우저로 현재 국내 시장에서 가장 많이 사용</dd> <dt><strong>Firefox</strong></dt> <dd>Mozilla 재단에서 오픈 소스로 만든 것으로 W3C의 웹 표준을 선도</dd> <dt><strong>Chrome</strong></dt> <dd>구글에서 만든 것으로 좋은 디버거를 갖추고 있어 디버깅에 많이 사용</dd> </dl> </body> </html> |
▷ <dt>, <dd>
- <dt> : 용어
- <dd> : 설명
13. 표 만들기
▶표를 만들기 위해 사용되는 태그들
- <table> : 표 전체를 담는 컨테이너
- <caption> : 표 제목
- <thead> : 헤딩 셀 그룹
- <tfoot> : 바닥 셀 그룹
- <tbody> : 데이터 셀 그룹
- <tr> : 행, 여러 <th>, <td> 포함
- <th> : 열 제목 셀
- <td> : 데이터 셀
| 1학기 성적 | <caption> | ||
| 이름 | HTML | CSS | <thead> |
| 학생 A | 80 | 70 | <tbody> |
| 학생 B | 95 | 99 | |
| 학생 C | 40 | 61 | |
| 합 | 225 | 230 | <tfoot> |
14. 표 만들기 예제
▶행과 열 만들기
| <table> <thead> <tr><th> 이름 </th><th> HTML </th><th> CSS </th></tr> </thead> <tbody> <tr><td> 학생 A </td><td> 80 </td><td> 70 </td></tr> <tr> </tbody> </table> |
▷ 표는 여러 행으로 구성
- <tr>..</tr>
※ 행 = row → t(able)r(ow)로 암기
▷ 한 행은 여러 셀로 구성
- 제목(헤딩) 셀, <th>
- 데이터 셀, <td>
▷ <thead>, <tbody>, <tfoot>은 여러 <tr> 포함 가능
▶기본 표 만들기
 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>기본 테이블 만들기</title> </head> <body> <h3>기본 구조를 가진 표</h3> <hr> <table border="1"> <caption>1학기 성적</caption> <thead> <tr><th>이름</th><th>HTML</th><th>CSS</th></tr> </thead> <tbody> <tr><td>학생 A</td><td>80</td><td>70</td></tr> <tr><td>학생 B</td><td>95</td><td>99</td></tr> <tr><td>학생 C</td><td>40</td><td>61</td></tr> </tbody> <tfoot> <tr><th>합</th><th>225</th><th>230</th></tr> </tfoot> </table> </body> </html> |
▷ <tbody>에 있는 내용 가운데 정렬 하는 방법
| <head> td { text-align:center; } </head> ..... |
... <tbody> <tr> <td style="text-align:center;">학생 A</td> <td style="text-align:center;">80</td> <td style="text-align:center;">70</td> </tr> </body> ... |
※ <th> 는 기본적으로 text-align:center;
▶이미지를 가지는 표 만들기
 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>표에 이미지 삽입</title> </head> <body> <h3>표에 이미지 삽입</h3> <hr> <table border="1"> <caption>좋아하는 동물</caption> <tbody> <tr> <td><img src="C:\Users\kdo95\Desktop\img\cattle.jpg" width="150" height="150"></td> <td><img src="C:\Users\kdo95\Desktop\img\bird.jpg" width="150" height="150"></td> <td><img src="C:\Users\kdo95\Desktop\img\turtle.jpg" width="150" height="150"></td> </tr> </tbody> </table> </body> </html> |
15. 하이퍼링크 만들기
▶<a> 태그의 href 속성을 이용하여 하이퍼링크 작성
▶하이퍼링크
▷ 다른 HTML 페이지의 연결 고리
- 같은 웹 사이트의 다른 HTML 페이지
- 다른 웹 사이트의 HTML 페이지 모두 연결 가능
▷ 하이퍼링크는 텍스트나 이미지로 작성
| <a href = "URL" | "URL#앵커이름 | "#앵커이름" target = "윈도우이름"> 텍스트 혹은 이미지 </a> |
- href : 이동할 HTML 페이지의 URL 혹은 HTML 페이지 내 앵커 이름
- target : 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정
▷ <a> 태그의 href 속성을 이용하여 하이퍼링크 작성
- 같은 웹 사이트에 있는 웹 페이지 연결
| <a href = "picturepage.html"> 클릭하면 사진 페이지로 이동합니다.</a> |
- 다른 웹 사이트의 웹 페이지 연결
| <a href = "http://www.naver.com">네이버</a> <a href = "http://www.site.com/login.html">사이트 로그인</a> |
- 이미지 하이퍼링크 만들기
| <a href = "http://www.naver.com"> <img src = "naver.png: alt = "네이버 사이트"> </a> |
16. 하이퍼링크 만들기 예제
▶기본 예제
 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>링크 만들기</title> </head> <body> <h3>링크 만들기</h3> <hr> 포털 사이트 <ul> <li>네이버</li> <li>다음</li> </ul> 신문사이트 <ul> <li> <a href="http://www.etnews.com"> <img src="C:\Users\kdo95\Desktop\img\전자신문.jpg" width="200" height="100" alt="네이버" /> </a> </li> </ul> <hr> <a href="ex2-17.html">예제 2-7로 이동</a> </body> </html> |
▶target 속성 활용
 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>링크의 target 속성 활용</title> </head> <body> <h3>링크의 target 속성 활용</h3> <hr> <ul> <li><a href="http://www.w3.org" target="_blank">W3C(새 윈도우, _blank)</a> <li><a href="http://www.etnews.com" target="_self">전자신문(현재 윈도우, _self)</a> <li><a href="http://www.naver.com" target="_parent">네이버(부모 윈도우, _parent)</a> <li><a href="http://www.mk.co.kr" target="_top">매일경제신문(브라우저 윈도우, _top)</a> </ul> </body> </html> |
▷ _blank
: 링크 클릭 → 새 브라우저 탭이나 새 창에서 페이지가 열림
- 원래 페이지 유지
▷ _self
: 현재 창에서 링크를 열며, 기본값
= 현재 페이지 대체
▷ _parent
: 현재 프레임의 부모 프레임에서 링크 열기
- 프레임 X → 현재 창에서 링크 열림 (=_self)
▷ _top
: 현재 전체 브라우저 창에서 링크 열기
= 모든 프레임 제거 → 링크 표시
- 프레임 X (=_self)
