웹프로그래밍 1
2 강의목표 1. HTML5의문서구조화의목적과시맨틱태그에대해이해한다. 2. HTML5 시맨틱태그로구조화된웹페이지를만들수있다. 3. 웹폼의목적을이해한다. 4. 웹폼의각요소를활용하여사용자로부터입력받는웹페이지를작성할수있다.
문서의일반적인구조사례 3 페이지번호 장제목 소제목 본문텍스트 문단 설명섹션 그림
HTML5 의문서구조화 4 기존 HTML의한계 : 웹문서구조를표현하는태그없음 <div> 태그나 <table> 태그로구조화되어보이게작성 HTML 페이지의소스를보면문서구조파악불가능문서구조화의이유 검색엔진이좋아하는웹페이지작성의필요성대두 정보탐색이중요해진시대 사물인터넷으로 IT 장치들이스스로정보검색하는시대 사용자가만든웹페이지가치극대화 탐색이쉽도록작성 시맨틱웹 웹문서를구조화하여의미있는내용탐색이용이한웹기존태그 <p>, <div>, <h1>, <h2> 등태그사용. 문서의구조나의미전달어려움 시맨틱태그 문서의구조와의미를전달하는태그 <header>, <section>, <article>, <main>, <summary>, <mark>, <time> 구글검색엔진사례 웹페이지에서시맨틱태그검색리뷰, 사람, 제품, 업체, 이벤트, 음악등검색결과제공
HTML5 시맨틱태그로구조화한웹페이지사례 5 <header> <header> <section> <nav> <header> <section> <article> <nav> <article> <footer> <aside> <header> <section> <footer> <aside> <footer> <footer>
시맨틱태그 6 <header> 페이지나섹션의머리말표현 <nav> 페이지제목, 페이지를소개하는간단한설명 하이퍼링크들을모아놓은특별한섹션 <header> <nav> 페이지내목차를만드는용도 <section> 문서의장 (chapter, section) 혹은절을구성하는역할 <section> <article> 일반문서에여러장이있듯이웹페이지에여러 <section> 가능 헤딩태그 (<h1>~<h6>) 를사용하여절혹은섹션의주제기입 <header> <article> 본문과연관있지만, 독립적인콘텐츠를담는영역 <section> <aside> 혹은보조기사, 블로그포스트, 댓글등기타독립적인내용 <footer> <article> 에담는내용이많은경우여러 <section> 둘수있음 <aside> <footer> 본문에서약간벗어난노트나팁 신문, 잡지에서주요기사옆관련기사, 삽입어구로표시된논평등 페이지의오른쪽이나왼쪽에주로배치 <footer> 꼬리말영역, 주로저자나저작권정보
문서의모양은구조와별개 7 시맨틱태그 <header>, <section>, <article>, <footer>, <nav> 태그 위치와색, 모양이자동으로결정되는것이아님 <!DOCTYPE html> <html> <head> <title>html5 문서구조시맨틱태그사용 </title> </head> <body> <header>header</header> <nav>nav</nav> <aside>aside</aside> <section>section</section> <footer>footer</footer> </body> </html> 개발자가 CSS3 를이용하여직접위치와색, 모양을지정해야함 예제 3-1
예제 3-1 구조화된 HTML5 문서작성 8 <!DOCTYPE html> <html> <head><title>html5 문서구조시맨틱태그사용 </title> <style> html, body { margin: 0; padding: 0; height: 100%; }.header { width: 100%; height: 15%; background: yellow; }.nav { width: 15%; height: 70%; float: left; background: orange; }.section { width: 70%; height: 70%; float: left; background: olivedrab; }.aside { width: 15%; height: 70%; float: left; background: orange; }.footer { width: 100%; height: 15%; clear: both; background: plum; } CSS3 스트일시트. 각영역의색과위치꾸미기 </style> </head> <body> <header class="header">header</header> <nav class="nav">nav</nav> <aside class="aside">aside</aside> <section class="section">section</section> <footer class="footer">footer</footer> </body> </html>
기존 HTML 문서와 HTML5 문서비교 9 샘플웹페이지 1. 기존 HTML 태그로만만들기 fig3-04.html, fig3-05.html, fig3-06.html 은모두동일한출력 2. HTML5 시맨틱태그를사용하여만들기
<html> <head> <title>elvis Presley</title> </head> <body> <div> <div id="header"> <h1><a href="https://www.facebook.com/elvis">elvis Presley</a></h1> </div> <div id="container"> <div> <div id="post-1"> <h2><a href="https://ko.wikipedia.org/wiki/ 엘비스 _ 프레슬리 "> Who is Elvis?</a></h2> <div class="entry"> <p> 엘비스프레슬리는 20 세기가장잘알려진미국가수중한명이었다. 하나의문화아이콘으로, 엘비스의음악들은세계적으로선풍적인인기를끌었으며 " 로큰롤의제왕 " 으로불리곤한다. 그는미시시피주의투펄로에서태어났다.</p> </div> </div> <div id="post-2"> <h2><a href="http://www.biography.com/people/elvis-presley-9446466"> His music and life</a></h2> <div class="entry"> <p>presley received his first guitar as a gift from his mother on his 11th birthday in 1946 and had his first taste of musical success a few years later when he won a talent show at Humes High School in Memphis. </p> </div> </div> </div> <div> <a href="">«previous Entries</a> </div> </div> <div id="navigation"> <ul> <li><h2>archives</h2> <ul> <li><a href="http://www.elvisthemusic.com/">elvis The Music</a></li> <li><a href="http://www.graceland.com/">elvis Home Graceland</a></li> <li><a href="http://www.last.fm/music/elvis+presley">free Listening, Video</a></li> </ul> </li> </ul> </div> <div id="footer"> <p>copyright 2015 Elvis</p> </div> </div> </body> </html> 10 <!DOCTYPE html> <html> <head> <title>elvis Presley</title> </head> <body> <header> <h1><a href="https://www.facebook.com/elvis">elvis Presley</a></h1> </header> <section> <article> <h2><a href="https://ko.wikipedia.org/wiki/ 엘비스 _ 프레슬리 "> Who is Elvis?</a></h2> <p> 엘비스프레슬리는 20 세기가장잘알려진미국가수중한명이었다. 하나의문화아이콘으로, 엘비스의음악들은세계적으로선풍적인인기를끌었으며 " 로큰롤의제왕 " 으로불리곤한다. 그는미시시피주의투펄로에서태어났다.</p> </article> <article> <h2><a href= "http://www.biography.com/people/elvis-presley-9446466"> His music and life</a></h2> <p>presley received his first guitar as a gift from his mother on his 11th birthday in 1946 and had his first taste of musical success a few years later when he won a talent show at Humes High School in Memphis.</p> </article> <nav> <a href="">«previous Entries</a> </nav> </section> <nav> <ul> <li><h2>archives</h2> <ul> <li><a href="http://www.elvisthemusic.com/">elvis The Music</a></li> <li><a href="http://www.graceland.com/">elvis Home Graceland</a></li> <li><a href="http://www.last.fm/music/elvis+presley">free Listening, Video</a></li> </ul> </li> </ul> </nav> <footer> <p>copyright 2015 Elvis</p> </footer> </body> </html> 1. 기존 HTML 태그로작성 2. HTML5 시맨틱태그로작성바람직한웹페이지
시맨틱태그사례 11 시맨틱블록태그 <figure> 책이나보고서등본문에삽입하는사진, 차트, 삽화, 소스코드등을통상적으로 그림 으로표현 <details> 와 <summary> <details> 는상세정보를담는시맨틱블록태그 <summary> 태그는 <details> 로구성되는블록의제목표현 시맨틱인라인태그 <mark> 중요한텍스트임을표시 <time> 텍스트의내용이시간임을표시 <meter> 주어진범위나 % 의데이터량표시 <progress> 작업의진행정도표시
예제 3-2 <figure> 태그활용 12 alert() 함수에대한설명 과 실행결과 를하나의그림으로블록화하기위해 <figure> 를사용한예를보여준다. <!DOCTYPE html> <html> <head><title>figure 태그활용 </title> </head> <body> <h3>figure 태그활용 </h3> <hr> <figure id="1-1"> <figcaption>alert() 함수활용 </figcaption> <pre> <code>function f() { alert(" 경고합니다 "); }</code> </pre> <hr> <small> 실행결과 <small> </small> <pre> <img src="media/alert.png" alt=" 실행결과 "> </pre> </figure> </body> </html>
예제 3 3 <details> 와 <summary> 활용 13 이예제는 <details> 태그를이용하여 Q&A 리스트를만든사례이다. 사용자가핸들 ( ) 을클릭하여항목을보거나숨길수있다. <!DOCTYPE html> <html> <head> <title>details와 summary 태그 </title> </head> <body> <h3>details와 summary 태그 </h3> Q & A 리스트 <hr> <details> <summary>question 1</summary> <p> 웹개발자가알아야하는언어 3 가지?</p> </details> <details> <summary>answer 1</summary> <p>html5, CSS, Javascript</p> </details> </body> </html> 핸들을클릭하면아래와같이상세정보가펼쳐짐
예제 3 4 시맨틱인라인태그 14 4 가지인라인시맨틱태그의사용사례를보여준다. <mark> 의텍스트는브라우저에따라다르게표현되며크롬에서는노란색배경으로출력된다. <!DOCTYPE html> <html> <head> <title> 인라인시맨틱태그 </title> </head> <body> <h3> 인라인시맨틱태그사례 </h3> <hr> <p> 내일 <mark>html5 시험 </mark><br> 시간은 <time>09:00</time><br> 난이도 <meter value="0.8">80%</meter><br> 자료업로딩 (20%) <progress value="2" max="10"></progress><br> </p> </body> </html> <progress> <mark> <time> <meter>
HTML5 에서제거된태그 15 다음태그들은문서의시맨틱구조를저해한다는이유로 HTML5 에서제거되었으므로사용하기말기바람 <big>, <center>, <dir>, <font>, <tt>, <u>, <xmp>, <acronym>, <applet>, <basefont>, <frame>, <frameset>, <noframes>, <strike>
웹폼 16 웹폼 웹페이지에서사용자입력을받는폼 로그인, 등록, 검색, 예약, 쇼핑등 폼요소 폼을만드는다양한태그 <input>, <textarea>, <select> 등 폼요소 폼요소 폼요소 폼 폼요소
예제 3-5 간단한로그인폼만들기 17 <!DOCTYPE html> <html> <head><title> 로그인폼 </title></head> <body> <h3> 로그인폼 </h3> <hr> <form name="fo" method="get"> 사용자 ID : <input type="text" size="15" value=""><br> 비밀번호 : <input type="password" size="15" value=""> <input type="submit" value=" 완료 "> </form> </body> </html>
폼작성 18 폼태그 <form> 태그로둘러싸는모양 name 속성 폼의이름지정 action 속성 <form name="fo" method="get"> </form>... 폼데이터를처리할웹서버응용프로그램의이름 submit 버튼이눌리면브라우저는 action 에지정된웹서버응용프로그램실행요청 웹서버응용프로그램은 Java, JSP, PHP, C/C++ 등다양한언어로작성 method 속성 폼데이터를웹서버로전송하는형식 대표적인전송방식 : GET, POST
19 <form> 태그
네이버검색사례로폼전송과정이해 20 ❶ 네이버사이트에접속한다. 검색어창을포함하는폼코드는다음과같다. <form name="sform" action="https://search.naver.com/search.naver" method="get"> <input name="query" type="text"> <input type="submit value=" 검색 "> </form> 입력창에 Elvis" 입력, 검색 버튼을누르면, 브라우저는 <form> 태그의 action= https://search.naver.com/search.naver 을참고. search.naver.com 서버에접속하여 search.naver 응용프로그램의실행을요구해야한다는것확인 ❷ 입력창에 Elvis 를입력하고검색버튼을누르면웹서버응용프로그램에보낼폼데이터를만든다. https://search.naver.com/search.naver?... query=elvis... ❸ 브라우저는 search.naver.com 에접속. search.naver 실행요청. query=elvis 를전달한다. ❹ 웹서버에서 search.naver 응용프로그램이실행되고, 검색결과를브라우저에게보낸다. ❺ 브라우저는검색결과를화면에출력한다.
21
22 폼요소의종류
텍스트입력 23 <input type="text"> 한줄짜리입력창 <input type="password"> 암호입력창 사용자입력문자대신 '*' 등다른글자로출력 <textarea> 여러줄입력창
예제 3-6 텍스트입력 24 <!DOCTYPE html> <html> <head><title> 텍스트입력폼 </title></head> <body> <h3> 자기소개서작성 </h3> <hr> <form> 이름 : <input type="text" value=""><br> 암호 : <input type="password" value="" maxlength="4"><br> 자소서 : <textarea cols="20" rows="5"> 이곳에자기소개서작성 </textarea> </form> </body> </html>
데이터목록을가진텍스트입력창, <datalist> 25 <datalist> 목록리스트를작성하는태그 <option> 태그로항목하나표현 <input type= text > 에입력가능한데이터목록제고 나라 : <input type="text" list="countries"> <datalist id="countries"> <option value=" 가나 "> <option value=" 스위스 "> <option value=" 브라질 "> </datalist> 드롭다운리스트
예제 3 7 데이터목록을가진텍스트입력 26 <datalist> 를사용하여선택목록을제공하는사례를보인다. <!DOCTYPE html> <html> <head><title> 데이터목록을가진텍스트입력 </title></head> <body> <h3> 가보고싶은곳 </h3> <hr> <form> 나라 : <input type="text" list="countries"><br> <datalist id="countries"> <option value=" 가나 "> <option value=" 스위스 "> <option value=" 브라질 "> </datalist> 보고싶은것 : <input type="text" list="what"><br> <datalist id="what"> <option value=" 산 "> <option value=" 바다 "> <option value=" 도시 "> </form> </body> </html> </datalist>
텍스트 / 이미지버튼만들기 27 <input type= button reset submit image value= 버튼의문자열 > <button type= button reset submit > 버튼의문자열 </button>
예제 3 8 다양한버튼만들기 28 <!DOCTYPE html> <html> <head><title> 버튼이있는입력폼 </title></head> <body> <h3> 버튼을만들자 </h3> <hr> <form> 검색 : <input type="text" size="10" value=""> <input type="button" value="q1"> <button type="button">q2</button><br> submit 버튼 : <input type="submit" value=" 전송 1"> <button type="submit"> 전송 2</button><br> reset 버튼 : <input type="reset" value=" 리셋 1"> <button type="reset"> 리셋 2</button><br> 이미지버튼 : <input type="image" src="media/button.png" alt=" 이미지버튼 "> <button type="button"> <img src="media/button.png" alt=" 이미지버튼 "> </button> </form> </body> </html>
선택형입력 : 체크박스와라디오버튼 29 <input type="checkbox"> 체크박스만들기 <input type= radio > 라디오버튼만들기 name 속성값이같은라디오버튼들이하나의그룹형성
예제 3-9 체크박스만들기 30 <!DOCTYPE html> <html> <head><title> 체크박스만들기 </title></head> <body> <h3> 먹고싶은것모두체크하세요 </h3> <hr> <form> 짜장면 <input type="checkbox" value="1"> 짬뽕 <input type="checkbox" value="2" checked> 탕수육 <input type="checkbox" value="3"> </form> 캡션 </body> </html> 캡션 checked 속성이사용되면초기에체크된상태로출력
예제 3-10 라디오버튼만들기 31 <!DOCTYPE html> <html> <head><title> 라디오버튼만들기 </title></head> <body> <h3> 먹고싶은것하나만선택?</h3> <hr> <form> 같은 name 을가진라디오버튼중하나만선택가능 <input type="radio" name="china" value="1"> 짜장면 <img src="media/jajang.png"><br> <input type="radio" name="china" value="2" checked> 짬뽕 <img src="media/jjambbong.png"><br> <input type="radio" name="china" value="3"> 탕수육 <img src="media/tangsuyuk.png"> </form> </body> </html>
선택형입력 : 콤보박스 32 <select> 드롭다운리스트에목록출력, 목록을선택하는입력방식 <option> 태그로항목하나표현
예제 3-11 콤보박스만들기 짜장면, 짬뽕, 탕수육의 3 개의선택항목을가지는콤보박스를보여준다. <!DOCTYPE html> <html> <head><title> 콤보박스만들기 </title></head> <body> <h3> 먹고싶은음식은?</h3> <hr> <form> <select name="china"> <option value="1"> 짜장면 </option> selected 속성이사용되면선택상태 <option value="2" selected> 짬뽕 </option> <option value="3"> 탕수육 </option> </select> </form> </body> </html> 33
<label> 로폼요소의캡션만들기 34 캡션이란? 사용자 ID : <input type="text"> 캡션폼요소캡션폼요소 <label> 태그로캡션과폼요소를한단위로묶음 캡션텍스트를명료하게하는장점 2 가지방법 캡션 <label> 사용자 ID : <input type="text" > </label> 캡션 <label for="loginid"> 사용자 ID : </label> <input type="text" id="loginid">
예제 3-12 <label> 태그로로그인폼만들기 35 예제 3-5 의로그인폼에있는캡션을 <label> 태그를감싸다시작성하라. <!DOCTYPE html> <html> <head><title> 로그인폼 </title></head> <body> <h3> 로그인폼 </h3> <hr> <form name="fo" method="get"> <label> 사용자 ID : <input type="text" size="15" value=""> </label><br> <label for="pass"> 비밀번호 : </label> <input id="pass" type="password" size="15" value=""> <input type="submit" value=" 완료 "> </form> </body> </html>
선택형요소의캡션을 <label> 로감싸기 36 선택형요소에 <label> 태그사용 캡션텍스트나이미지를선택해도폼요소를선택한것으로처리 <label> 짜장면 <input type="radio" name="china" value="1"> </label> 캡션 <label for="china"> 짜장면 </label> <input type="radio" name="china" id="china" value="1"> <label> <input type="radio" name="china" value="1"> 짜장면 <img src="jajang.png"> </label> 캡션 캡션
예제 3-13 <label> 로라디오버튼에캡션만들기 37 <label> 태그를이용하여예제 3-10 의라디오버튼에캡션을삽입하라. <!DOCTYPE html> <html> <head><title> 캡션을가진라디오버튼 </title></head> <body> <h3> 먹고싶은것하나만선택?(<label> 이용 )</h3> <hr> <form> <label> <input type="radio" name="china" value="1"> 짜장면 <img src="media/jajang.png"> </label><br> <label> <input type="radio" name="china" value="2" checked> 짬뽕 <img src="media/jjambbong.png"> </label><br> <label> <input type="radio" name="china" value="3"> 탕수육 <img src="media/tangsuyuk.png"> </label> </form> </body> </html> <label> 로캡션감싸기 캡션부분클릭가능
HTML 에서의색표현 38 색코드 - #rrggbb rr 은빨간색, gg 는초록색, bb 는파란색농도 8 비트범위 (0~255) 로 16 진수 (0~FF) 로표기 red green blue # 80 00 FF 빨간색 (red) 성분 0x80(128), 초록색성분은없고, 파란색 (blue) 성분이 0xFF(255) 가혼합된보라색 색이름과색코드샘플
색입력폼 39 <input type="color"> 컬러다이얼로그출력, 사용자로부터색선택 사용예 <input type="color" value="#00ff00"> value 는초기색
예제 3 14 컬러다이얼로그로색입력응용 40 <!DOCTYPE html> <html> <head><title> 색입력 </title></head> <body> <h3> 컬러다이얼로그로색입력 </h3> <hr> <form> 색선택 <input type="color" value="#00bfff" onchange= "document.body.style.color=this.value"> </form> </body> </html> 선택한색을브라우저의바탕글자에적용하는자바스크립트코드 클릭 value="#00bfff" 색은컬러다이얼로그의초기색 사용자가 #FF80FF 색선택 #FF80FF
시간정보입력폼요소 41 <input type="month week date time datetime-local"> 시간정보만입력가능한폼요소
폼요소작성예 42 (a) 달입력 드롭다운버튼 <input type="month" value="2016-09"> (b) 주입력 드롭다운버튼 <input type="week" value="2016-w36"> 2016 년도의 36 번째주를보여줌
(c) 날짜입력 spin 버튼으로변경가능 <input type="date" value="2016-09-01"> (d) 로컬날짜시간입력 <input type="datetime-local" value="2016-09-01t21:30:10.32"> 9 시 30 분 10 초 32 (e) 시간입력 spin 버튼으로만변경 <input type="time" value="21:30"> 43
예제 3-15 시간정보입력폼요소활용 44 이예제는시간정보를입력받는 HTML5 폼요소들의사례를보인다. <!DOCTYPE html> <html> <head><title> 시간정보를입력하는폼활용 </title></head> <body> <h3> 시간정보입력 HTML5 폼요소들 </h3> 초기세팅 : 2016년 9월 1일밤 9시 30분 (10초 32)<br> 시간을변경해보세요 <hr> <form> <pre> month : <input type="month" value="2016-09"><br> week : <input type="week" value="2016-w36"><br> data : <input type="date" value="2016-09-01"><br> time : local: </pre> </form> </body> </html> <input type="time" value="21:30"><br> <input type="datetime-local" value="2016-09-01t21:30:10.32"><br>
예제 3 16 생일날짜입력받기 45 시간정보를입력받는 <input> 태그를사용하여생일날짜를입력받아라. <!DOCTYPE html> <html> <head><title> 시간정보입력응용 </title></head> <body> <h3> 생일축하합니다 </h3> <hr> 당신의생일은 2000 년 5 월 20 일입니다. 틀리면수정하시고파티시간과장소를입력하세요. <hr> <form> <table> <tr><td> 생일 <td> <input type="date" value="2000-05-20"></tr> <tr><td> 생일파티시간 <td> <input type="time"></tr> <tr><td> 생일파티장소 <td> <input type="text"></tr> </table> </form> </body> </html> spin 버튼으로분입력
스핀버튼과슬라이드바로편리한숫자입력 46 <input type= number > 스핀버튼으로정교한값입력 <input type="number" min="0.0" max="10.0" step= "0.5"> (a) spin 버튼클릭시 0.0~10.0 사이에서 0.5 씩증감 spin 버튼 <input type= range > 슬라이드바로대략적인값입력 <input type="range" min="0" max="100" list="temperatures"> <datalist id="temperatures"> <option value="10" label="low"> <option value="50" label="medium"> <option value="90" label="high"> </datalist> Low(10) Medium(50) High(90) min (0) max (100) (b) 슬라이드바를움직여 0~100 사이의값입력
47 예제 3-17 <input type="number range"> 로편리한숫자입력 <!DOCTYPE html> <html> <head><title> 편리한숫자입력 </title></head> <body> <h3> 홈제어시스템 - 온도조절 </h3> <hr> <form> 지속시간 (0.0~10.0 시간 ) : <input type="number" min="0.0" max="10.0" step="0.5"><br><br> 온도설정 :10 <input type="range" min="10" max="30" list="temperatures">30 <datalist id="temperatures"> <option value="12" label="low"> <option value="20" label="medium"> <option value="28" label="high"> </datalist> </form> </body> </html> value="12" label="low" spin 버튼 value="28" label="high"
입력할정보의힌트보여주기 48 placeholder 속성에사용자가입력할데이터힌트주기 이메일주소 : <input type="email" placeholder="id@host">
형식을가진텍스트입력 49 <input type= email >, email 주소입력 이메일주소 : <input type="email" placeholder= id@host"> <input type="submit" value=" 전송 "> 사용자가입력한내용 (a) 초기화면 오류메시지 <input type= url >, URL 입력 <input type= url placeholder= http:// > <input type= tel >, 전화번호입력 <input type= tel placeholder= 010-1234-5678 > 검색어입력, <input type= search > <input type= search placeholder=" 검색어 "> (b) 이메일주소를잘못입력하고 전송 버튼을클릭하여전송한경우
예제 3 18 형식을가진텍스트입력 50 <!DOCTYPE html> <html> <head><title> 형식을가진텍스트입력 </title></head> <body> <h3> 회원정보를입력해주세요.</h3> <hr> <form> email : <input type="email" placeholder="id@host"><br> 홈페이지 : <input type="url" placeholder="http://"><br> 전화번호 : <input type="tel" placeholder="010-1234-5678"> <input type="submit" value=" 확인 "><br><br> <hr> 검색어 : <input type="search" placeholder=" 검색어 "> <input type="button" value=" 검색 "> </form> </body> </html>
예제 3 19 폼요소의그룹핑 51 <!DOCTYPE html> <html> <head><title> 폼입력그룹으로묶기 </title></head> <body> <h3> 회원정보를입력해주세요.</h3> <hr> <form> <fieldset> <legend> 회원정보 </legend> 이메일 : <input type="email"><br> 홈페이지 : <input type="url"><br> 전화번호 : <input type="tel"> </fieldset> <small> 질문 : Tel. 010-111-1111</small> </form> </body> </html> 그룹박스