PowerPoint 프레젠테이션 - PDF Free Download

Lecture 02: HTML5 (1) Kwang-Man Ko kkmam@sangji.ac.kr, compiler.sangji.ac.kr Department of Computer Engineering Sang Ji University 2019 1

2 강의목표 1. 웹페이지를만드는기초적인 HTML 태그들을안다. 2. HTML5 기본문서만들수있다. 3. 웹페이지에이미지, 표, 하이퍼링크를삽입할수있다. 4. 인라인프레임을사용하여웹페이지에다른웹이지를내장할수있다. 페 5. 오디오비디오를웹페이지에삽입할수있다.

HTML 페이지기본 3 HTML5 페이지의기본구조  <head> 문서제목, 자바스크립트코드, CSS 스타일정의, 메타데이터정의 </head> 문서의본문텍스트, 이미지, 테이블, 자바스크립트코드, 동영상등 HTML5 페이지의필수태그 - HTML5 문서임을알리는지시어, <head>, <title>, 태그

HTML 태그의특징 4 HTML 태그구성 시작태그와종료태그가모두있는경우..., <title> 문서의제목입니다 </title> 시작태그만있는경우 <br>

5 태그와속성은대소문자구분없음 <HTML>... <img Src="heart.jpg" width="100" height="50" alt=" 심장이미지 "> 속성값에불필요한공백문자, HTML5 표준에어긋남 <img Src="heart.jpg" width=" 100" height="50" alt=" 심장이미지 ">

예제 2-1 웹페이지타이틀달기 6 <head> <title> 첫타이틀 </title> </head> 페이지에타이틀을다는예제입니다. 타이틀은브라우저의타이틀바에보여집니다.

예제 2-2 <h1>,..., <h6> 태그로문단제목달기 7 <head> <title> 문단제목달기 </title> </head> <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>

예제 2 3 title 속성으로툴팁달기 8 <head><title> 툴팁달기 </title></head> <h1 title="h1 태그로작성하였습니다."> 1 장홈페이지 </h1> <h2 title="h2 태그로작성하였습니다."> 1 절 HTML 언어 </h2> 툴팁

예제 2 4 <p> 로단락나누기 9 <head><title> 단락나누기 </title></head> <h3>2 개의단락나누기 </h3> <p> HTML 문서도본문을여러단락으로나눌수있다. CSS 스타일을사용하면단락단위로내어쓰기와들여쓰기가가능하다.</p> <p> 여러개의빈칸은하나로취급되며, 엔터키역시하나의빈칸으로처리된다.</p> 헤딩 단락 단락

예제 2 5 <hr> 태그로수평선긋기 10 <head><title> 수평선긋기 </title></head> <h3> 수평선긋기 </h3> <hr> <p>hr 태그는 horizontal 에서딴글자입니다.</p> <hr> <p> 종료태그 </hr> 를사용하지않습니다.</p> 수평선 < 를출력하기위한엔터티표현

예제 2-6 <br> 태그로새로운줄로넘어가기 11 <head><title> 새로운줄넘어가기 </title></head> <h3> 새로운줄넘어가기 </h3> <hr> <br> 태그로다음줄로넘어갑니다.<br> 2 개의 <br> 태그로두번넘어갑니다.<br><br> 잘보이나요? <br> <br> <br>

문자, 기호, 심볼입력 12 HTML5 의문자 : 유니코드문자셋, UTF-8 코드체계 예약어, 키보드로입력이어려운기호들, 심볼 & 엔터티 ; 혹은 &# 코드값 ; < ----> < 혹은 < ----> 혹은 ----> 혹은

예제 2 7 특수문자, 기호, 심볼삽입 13 <head> <title> 문자, 기호, 심볼표현 </title> </head> <h3> 기호넣기 </h3> <hr> 10 2 = 5<br> 2 = 1.414<br> 2 < 3<br> 오늘 "Elvis" 노래를들었다. " 빈칸 3 개 ( 3 개 )

예제 2 8 <pre> 태그로개발자의포맷그대로출력 14 여러개의빈칸은하나로처리 <head><title> 개발자의포맷그대로출력 </title></head> <h3> 개발자의포맷그대로출력하기 </h3> <hr> <p> <Enter> <p> 태그를사용하면 <Enter> 여러개의빈칸은하나로, 여러줄은한줄에붙여출력됩니다.</p> <hr> <pre> 그러나 <pre> 태그를사용하면사용자가입력한그대로출력됩니다. </pre>

예제 2 9 텍스트꾸미기 15 <head><title> 텍스트꾸미기 </title></head> <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>

블록태그와인라인태그 16 태그 : 블록태그와인라인태그로구분 블록태그사례 : <p>, <h1>, <div>, <ul> 인라인태그사례 : <strong>, <a>, <img>, <span> 블록태그 항상새라인에서시작하여출력 양옆에다른콘텐트를배치하지않고한라인독점사용 가장많이사용되는블록태그 : <div> 인라인태그 블록속에삽입되어블록의일부로출력 가장많이사용된인라인태그 : <span>

예제 2-10 <div> 블록과 <span> 인라인 17 <head><title><div> 블록과 <span> 인라인 </title></head> <h3> 사랑 </h3> <hr> 배경색을파란색으로꾸미는 CSS3 스타일 <div style="background-color:skyblue; padding:20px;"> 내가사람의방언과천사의말을할지라도 <span style="color:red"> 사랑 </span> 이없으면소리나는구리와울리는꽹과리가되고, <span style="color:red"> 사랑 </span> 이없으면아무것도아니라. </div> <p> ~ 우리서로사랑하며살아요 ~ </p> <div> <span>

메타데이터삽입 18 메타데이터 데이터를설명하는데이터 사진데이터의메타데이터 : 사진찍은장소, 시간 오디오데이터 : 재생시간, 채널수 이미지데이터 : 이미지의폭, 높이, 컬러해상도 HTML 페이지에대한메타데이터를담기위한태그들 <base>, <link>, <script>, <style>, <title>, <meta> 메타태그들은 <head> 태그안에작성 예 ) <head> <base href="http://www.mysite.com/score/"> </head> <script> 는 내에도작성가능

<base> 태그 19 웹페이지들의기본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> <base href="http://www.mysite.com/score/"> </head> 수정가능 <a href="math.html"> 수학 </a> <a href="science.html"> 과학 </a>

이미지삽입 21 <img> 태그의 src 속성에이미지파일의주소지정 src에지정할수있는이미지종류 BMP, GIF, PNG, JPG(JPEG), animated-gif

예제 2-11 <img> 태그로이미지삽입 22 <head><title> 이미지삽입 </title></head> <h3> 이미지삽입 </h3> <hr> <p> 엘비스프레슬리의사진입니다.</p> 150x200 픽셀크기로출력 <img src="media/elvis1.jpg" width="150" height="200" alt="elvis"> <img src="media/kitae.jpg" width="80" height="100" alt=" 황기태사진없음 "> <img src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif" alt= 사진주소변경됨 " width="100" height="100"> 현재이미지파일의경로명은 media/kitae.jpg 로상대경로명을사용하고있다. 이미지는 HTML 파일이있는경로아래 media 폴더를만들고그곳에두면된다. 사진이없는경우 alt 에지정된텍스트출력 네이버사이트의주소로연결한이미지

리스트만들기 23 3 가지종류의리스트 순서있는리스트 (ordered list) - <ol></ol> 순서없는리스트 (unordered list) - <ul></ul> 정의리스트 (definition list) - <dl></dl> 리스트아이템 <li> </li> </li> 생략가능

예제 2-12 <ol> 로라면끓이는순서나열 25 <head> <title> 라면을끓이는순서 </title> </head> <h3> 라면을끓이는순서 </h3> <hr> <ol type="a" > <li> 물을끓인다.</li> <li> 라면과스프를넣는다.</li> <li> 파를썰어넣는다.</li> <li>5 분후먹는다.</li> </ol> 마커

예제 2-13 <ul> 로좋아하는음식나열 26 <head> <title> 내가좋아하는음식 </title> </head> <h3> 내가좋아하는음식 </h3> <hr> <ul> <li> 감자탕 </li> 생략가능 <li> 스파게티 <li> 올레국수 </ul> 마커

예제 2-14 중첩리스트만들기 27 <head> <title> 중첩리스트만들기 </title></head> <h3> 내가사는이유 </h3> <hr> <ul> <li> 내가좋아하는음식많아요 <ul> <li> 감자탕 <li> 스파게티 <li> 올레국수 </ul> <li> 라면먹기좋아해요 <ol type="1" > <li> 물을끓인다. <li> 라면과스프를넣는다. <li> 파를썰어넣는다. <li> 한입에다먹는다. </ol> <li> 여름에는바다로 <li> 가을에는산으로 </ul>

예제 2-15 정의리스트만들기 28 <head><title> 정의리스트 </title></head> <h3> 웹브라우저종류 </h3> <hr> <dl> 용어 <dt><strong>internet Explorer</strong> <dd> 마이크로소프트에서만든브라우저로현재국내시장에서가장많이사용 <dt><strong>firefox</strong> <dd>mozilla 재단에서오픈소스로만든것으로 W3C 의웹표준을선도 <dt><strong>chrome</strong> <dd> 구글에서만든것으로좋은디버거를갖추고있어디버깅에많이사용 </dl> 설명 용어 설명

표만들기, <table> 29 표만드는데사용되는태그들 <table> : 표전체를담는컨테이너 <table></table> <caption> : 표제목 제목 <caption> <thead> : 헤딩셀그룹 헤더 <thead> <th> <tfoot> : 바닥셀그룹 <tbody> : 데이터셀그룹 바디 <tbody> <td> <tr> : 행. 여러 <td>, <th> 포함 <th> : 열제목 ( 헤딩 ) 셀 푸트 <tfoot> <tr> <td> : 데이터셀 <table> <caption> 표제목 </caption> <thead>... </thead> <tfoot>... </tfoot> <tbody>... </tbody> </table> <caption> 은 <table> 에 반드시첫번째로삽입

행과열만들기 30 표는여러행으로구성 행, <tr> </tr> 한행은여러셀로구성 제목 ( 헤딩 ) 셀, <th> 데이터셀, <td> <thead>, <tbody>, <tfoot> 은여러 <tr> 포함가능 <table> <thead> <tr><th> 이름 </th><th>html</th><th>css</th></tr> </thead> <tbody> <tr><td> 황기태 </td><td>80</td><td>70</td></tr> <tr>...</tr> </tbody> </table>

예제 2 16 기본표만들기 31 <head><title> 기본테이블만들기 </title></head> <h3> 기본구조를가진표 </h3> <hr> <table border="1"> 1 픽셀테두리. 5 장의 CSS3 로표현하는것이바람직함 <caption>1 학기성적 </caption> <thead> <tr><th> 이름 </th><th>html</th><th>css</th></tr> </thead> <tfoot> <tr><th> 합 </th><th>225</th><th>230</th></tr> </tfoot> <tbody> <tr><td> 황기태 </td><td>80</td><td>70</td></tr> <tr><td> 이재문 </td><td>95</td><td>99</td></tr> <tr><td> 이병은 </td><td>40</td><td>61</td></tr> </tbody> </table>

예제 2-17 이미지를가지는표만들기 32 <head><title> 표에이미지삽입 </title></head> <h3> 표에이미지삽입 </h3> <hr> <table> <caption> 좋아하는과일 </caption> <tbody> <tr> <td><img src="media/apple.jpg"></td> <td><img src="media/banana.jpg"></td> <td><img src="media/mango.jpg"></td> </tr> </tbody> </table> 디폴트굵기 (0) 로하여테두리제거. 굵기조절은 CSS3 로하는것이바람직 이미지들은 HTML 파일이있는경로아래 media 폴더를만들고그곳에두면된다.

하이퍼링크만들기, <a> 33 <a> 태그의 href 속성을이용하여하이퍼링크작성 하이퍼링크 (hyperlink) 란? 다른 HTML 페이지의연결고리 같은웹사이트의다른 HTML 페이지 다른웹사이트의 HTML 페이지모두연결가능 하이퍼링크는텍스트나이미지로작성 항해 하이퍼링크를따라다른웹페이지를방문하는것

하이퍼링크만들기 34 <a> 태그의 href 속성에하이퍼링크작성 같은웹사이트에있는웹페이지연결 <a href= picturepage.html > 클릭하면사진페이지로이동합니다.</a> 다른웹사이트의웹페이지연결 <a href= http://www.naver.com > 네이버 </a> <a href= http://www.siter.com/login.html > 사이트로그인 </a> 이미지하이퍼링크만들기 <a href= http://www.naver.com > <img src= naver.png alt= 네이버사이트 > </a>

하이퍼링크텍스트의색 35 하이퍼링크텍스트의색 링크텍스트 (standard link) 처음색 밑줄과함께 blue 방문후링크 (visited lnk) 색 purple 마우스로링크를누르고있는동안 (active link) red 링크색변경가능 CSS3 를이용하여링크색지정가능

36 예제 2 18 하이퍼링크만들기 <head><title> 링크만들기 </title></head> <h3> 링크만들기 </h3> <hr> 포털사이트 <ul> <li><a href="http://www.naver.com"> 네이버 </a></li> <li><a href="http://www.daum.net"> 다음 </a></li> </ul> 신문사이트 <ul> <li><a href="http://www.etnews.com/"> <img src="media/iconetnews.png" alt=" 전자신문 "> </a> </li> <li><a href="http://www.chosun.com"> <img src="media/iconchosun.png" alt=" 조선일보 "> </a> </li> </ul> <hr> <a href="ex2-17.html"> 예제 2-17 로이동 </a> 현재사이트의다른페이지로이동하는링크 링크클릭

예제 2-19 링크의 target 속성활용 37 <head><title> 링크의 target 속성활용 </title></head> <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> 새탭에서열기

<a> 태그의 id 속성으로앵커만들기 38 앵커? HTML 페이지내의특정위치 <a id= 앵커이름 > 으로앵커생성 <a id="chap1">1 장서론 </a> chap1 앵커 <a href= #chap1 > 서론으로가기 </a> 클릭하면 chap1 앵커위치로이동시키는하이퍼링크

동일페이지내앵커와링크사례 링크 <a href="#intro">1 Introduction</a> 앵커 <h3 id="intro">1 Introduction</h3> 39

40 예제 2 20 앵커로이동하는링크만들기 앵커 <head><title> 링크만들기 </title></head> <h3>elvis Presley</h3> <hr> <ul> 링크 <li><a href="#love">love me tender</a> <li><a href="#can">can't help falling in love</a> <li><a href="#it">it's now or never</a> </ul> <h3 id="love">love me tender</h3> Love me tender, Love me sweet, Never let me go.<br> You have made my life complete, <br> And I love you so.<br> Love me tender, Love me true, <br> All my dreams fulfilled.<br> For my darling I love you, And I always will.<br> <h3 id="can">can't help falling in love</h3> Love me tender, Love me sweet, Never let me go.<br> You have made my life complete, And I love you so.<br> Love me tender, Love me true, All my dreams fulfilled.<br> For my darling I love you, And I always will.<br> <h3 id="it">it''s now or never</h3> It's now or never, Come hold me tight<br> Kiss me my darling, Be mine tonight<br> Tomorrow will be too late,<br> It's now or never. My love won't wait.<br> 앵커위치로이동

예제 2-21 파일다운로드링크만들기 41 <head><title> 파일다운로드 </title></head> <h3> 친구들아! 여기서다운받아!</h3> <hr> <ul> <li><a href="media/elvis.png" download> 엘비스이미지다운로드 </a> <li><a href="media/chapter9.pdf" download>chapter9.pdf 다운로드 </a> <li><a href="media/embraceableyou.mp3" download>mp3 다운로드 </a> <li><a href="ex2-09.html" download> 예제 2-9 HTML 파일다운로드 </a> <li><a href="media/test.hwp" download> 한글파일다운로드 </a> </ul> 링크클릭시이미지파일다운로드

인라인프레임 42 인라인프레임만들기, <iframe> HTML 페이지내에 HTML 페이지삽입 예 ) 200x150 크기의인라인프레임에 iframe.html 출력 <iframe src="iframe1.html" width="200" height="150"> 브라우저는 iframe 태그를지원하지않습니다. </iframe>

예제 2-22 2 개의인라인프레임을가진웹페이지 43 ex2-22.html <head><title>iframe 을가지는웹페이지 </title> </head> <h3>2 개의 <iframe> 을가집니다.</h3> <hr> <iframe src="iframe1.html" width="200" height="150"> </iframe> <iframe src="iframe2.html" width="200" height="100"> </iframe> iframe1.html <head><title> 첫번째 iframe</title></head> <h4> 첫번째 iframe</h4> iframe2.html <head><title> 두번째 iframe</title></head> <h4> 두번째 iframe</h4>

인라인프레임에출력할문서를 srcdoc 속성으로만들기 44 <head><title>srcdoc 속성활용 </title></head> <h3>srcdoc 에 HTML 문서작성 </h3> <hr> <iframe src="iframe1.html" width="200" height="80" srcdoc="<head></head> hello" ></iframe> srcdoc 속성이있으면 src 속성은무시됨

예제 2-23<iframe> 으로 2 개의신문사이트내장하기 45 <head><title>iframe 을이용한신문사이트 </title></head> <h3>2 개의신문사이트입니다.</h3> <hr> <iframe src="http://www.etnews.com" width="300" height="300"></iframe> <iframe src="http://www.mk.co.kr" width="300" height="300"></iframe> <iframe> <iframe>

브라우저윈도우와인라인프레임의계층관계 46 인라인프레임윈도우의이름 <iframe src="iframe1.html" name= left ></iframe> 브라우저윈도우와인라인프레임의계층관계 브라우저윈도우와프레임윈도우는부모자식관계 윈도우사이의계층관계를나타내는용어 parent 윈도우 - 부모윈도우 child 윈도우 - 부모윈도우 top 윈도우 - 최상위브라우저윈도우 다음슬라이드에서 left, right 프레임의 parent 윈도우 : 브라우저윈도우 upper, lower 프레임의 parent 윈도우 : right 윈도우 left, right, upper, lower 프레임의 top 윈도우 : 브라우저윈도우

fig2-04.html <head><title> 브라우저윈도우 (top)</title></head> <h3>2 개의 <iframe> 윈도우를가집니다 </h3> <hr> <iframe src="leftframe.html" name= "left" width="100" height="500"></iframe> <iframe src="rightframe.html" name= "right" width="400" height="500"></iframe> rightframe.html <head><title>right iframe</title></head> <h4>right iframe</h4> <hr> <iframe src="http://www.etnews.com" name="upper" width="100%" height="200"></iframe> <iframe src="http://www.mk.co.kr" name="lower" width="100%" height="200"></iframe> 브라우저 left right upper child 윈도우 left 윈도우 브라우저윈도우 child 윈도우 right 윈도우 parent 윈도우 top 윈도우 parent 윈도우 lower upper 윈도우 lower 윈도우 47

target 속성으로출력할윈도우지정 48 target 속성 <base>, <a>, <area>, <form> 태그에서 HTML 페이지를출력할윈도우지정 target 속성에사용가능한값 _blank - 새로운브라우저윈도우 ( 탭 ) 생성 _self - 현재윈도우 _parent - 부모윈도우 _top - 최상위브라우저윈도우 윈도우이름 - 대상윈도우이름

target 속성사용예 49 링크클릭시 frame1 이름의프레임에 http://www.w3c.org 출력 <iframe src="http://www.w3c.org" name="frame1"></iframe>... <a href="http://www.w3c.org" target="frame1">w3c</a> 링크클릭시새윈도우 ( 탭 ) 에 W3C 사이트출력 <a href="http://www.w3c.org" target="_blank">w3c</a> 링크클릭시현재윈도우 ( 탭혹은프레임윈도우 ) 에 W3C 사이트출력 <a href="http://www.w3c.org" target="_self">w3c</a> 링크를클릭하면부모윈도우에 W3C 사이트출력 <a href="http://www.w3c.org" target="_parent">w3c</a> 링크클릭시모든프레임윈도우제거, 브라우저윈도우에 W3C 사이트출력 <a href="http://www.w3c.org" target="_top">w3c</a>

50 예제 2-24 target 속성으로프레임윈도우활용 ex2-24.html <head><title>target 속성활용 </title></head> <h3>target 속성활용 </h3> <hr> <iframe src="ex-24-sitelist.html" name="left" width="200" height="300"> </iframe> <iframe src="http://www.w3c.org" name="right" width="300" height="300"> </iframe> ex2-24-sitelist.html <head><title> 사이트리스트 </title></head> <h4> 사이트리스트 </h4> <ul> <li><a href="http://www.w3c.org" target="right">w3c</a> <li><a href="http://www.etnews.com" target="_self"> 전자신문 </a> <li><a href="http://www.mk.co.kr" target="_top"> 매일경제신문 </a> <li><a href="http://www.w3c.org" target="_blank"> 새창에 W3C</a> </ul> left 프레임 right 프레임

미디어삽입 51 HTML5에서웹페이지에미디어삽입의표준화 <audio>, <video> 태그 HTML5에서오디오비디오를삽입하는표준태그 플러그인필요없음 HTML5 표준브라우저는플러그인없이오디오비디오재생 비표준미디어재생시 비표준미디어 플래시등 <embed>, <object> 태그

<video> 태그 52 <video> 태그사례 예 ) 320x240 공간에, bear.mp4 재생. 자동시작. 제어버튼출력 <video src="bear.mp4" width="320" height="240" controls autoplay></video> 비디오소스별도지정방법 <video width="320" height="240" controls autoplay> <source src="bear.mp4" type="video/mp4"> 브라우저가 video 태그를지원하지않습니다. </video>

<video> 태그속성 53

54 예제 2-25 <video> 태그로비디오삽입 <head><title> 비디오삽입 </title></head> <h3> 비디오삽입 </h3> <hr> <video src="media/bear.mp4" width="320" height="240" controls autoplay> 브라우저가 video 태그를지원하지않습니다. </video> controls 속성에의해생긴콘트롤 240 픽셀 320 픽셀

<audio> 태그 55 <audio> 태그사례 mymusic.mp3 를자동으로재생시작하고, 제어버튼출력 <audio src="mymusic.mp3" controls autoplay loop></audio> 선택재생가능 mymusic.mp3를재생할수없으면, mymusic.ogg 선택 <audio controls autoplay> <source src="mymusic.mp3" type="audio/mpeg"> <source src="mymusic.ogg" type="audio/ogg"> 브라우저가 audio 태그를지원하지않습니다. </audio>

<audio> 태그 56

57 예제 2-26 <audio> 태그로오디오삽입 <head> <title> 오디오삽입 </title> </head> <h3> 오디오삽입 </h3> <hr> 페이지로드즉시음악이연주됩니다. <audio src="media/embraceableyou.mp3" controls autoplay loop> 브라우저가 audio 태그를지원하지않습니다. </audio> 모바일브라우저에서는보안의이유로 <audio> 태그의 autoplay 속성이작동하지않는다. 사용자가브라우저상에서재생콘트롤을터치해야작동한다.