2020. 11. 11. 10:26ㆍ교육과정/KOSMO
키워드 : HTML5 / 웹 구조 / 웹 표준 / HTML 개발환경 준비 / HTML 입문
검색시 더보기 모두 열어야 검색 가능
****
0. 협업 관련
※ 형상관리 : 데이터끼리 충돌하지 않도록 관리하는 것
→ 다음 프로젝트 때는 git + github 사용하여 형상관리를 잘 해줘야 함
1. 웹 구조
* 웹에서는 사용자가 요청한 내용을 전달한다.
* front-end : 사용자가 웹 브라우저를 통해 보이는 화면에 대한 것
HTML / CSS / JavaScript 사용
* back-end : 웹 서버부터 Database에 이르기까지에 대한 것
* URI = URL + URN
- URL (Uniform Resourse Locator)
: 실제의 네트워크 경로를 가리키며, 네트워크 상의 리소스 접근시에 사용
- URN (Uniform Resource Name)
: 위치에 독립적인 이름을 제공하기 위하여 존재
2. 웹 표준
* ISO 국제적 표준화 단체에서 표준으로 권장
* 장점 - 수정과 관리가 용이
- 웹 접근성의 향상
- 검색엔진 최적화
- 호환성 제공
* 관련규약 : 구조언어 - HTML
표현언어 - CSS
동작언어 - JavaScript
* 웹표준 테스트 툴
* 웹 접근성
: 어떤 사용자, 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트를 비장애인과 동일하게 접근, 이용할 수 있도록 보장해야 한다. (참고 : 장애인차별금지법, 웹접근성품질마트)
3. HTML 개발환경 준비
사용자가 웹에 접속하면 DB의 자료를 보여줘야 하는데 HTML은 프로그램 언어가 아니라서 단독으로는 DB를 인지하거나 연결하지 못 하므로 웹 서버 프로그램을 사용하여 중개한다.
ex) ASP, PHP, JSP 등 (JSP는 JAVA 베이스임)
개발할 때에도 HTML로 만든 파일만으로는 DB 연결이 되지 않기에 JSP로 바꾸는 과정이 필요하다.
◆ 이클립스에서 HTML 개발 환경 만들기 (tomcat 사용)
(1) tomcat 설치
tomcat.apache.org 접속 → tomcat 9.0 선택 → apache-tomcat-9.0.39 다운로드 → 영문으로 된 폴더 내에서 압축 풀기(설치할 필요 없음) → 설치가 잘 되었는지는 확인하려면 bin 폴더 내에 startup이라는 프로그램을 열어봤을 때 창이 나오면 웹 서버가 잘 작동하는 것 (본래는 서버를 띄워야 사용자가 접근할 수 있으나, 연습시에는 서버까지 띄우진 않아도 됨)
(2) 컴퓨터의 환경변수 설정
내 컴퓨터 우클릭 → 속성 → 고급 시스템 설정 → 환경 변수 → 시스템 변수 새로 만들기
→ 변수이름 : TOMCAT_HOME
→ 변수값 : C:\java\tomcat\apache-tomcat-9.0.39 (tomcat 설치경로)
(3) 이클립스 워크스페이스 변경
방법1 :
상단 메뉴바 → File → Switch Workspace → Other → Browse → 워크스페이스로 사용하고자 하는 폴더 선택
방법2 :
좌측 Project Explorer → Create a Dynamic Web project 선택 (이클립스가 Enterprise 가 아닐 경우 없을 수 있음)
4. HTML 프로젝트 생성하기
※ 프로젝트 내 자동생성되는 WEB_INF 폴더에 web.xml 파일을 갖기 위해 꼭 체크해야 한다.
web.xml 파일을 더블클릭 후 Source 탭에서 설정에 대한 내용을 확인할 수 있다.
※ 자바로 작업한 내용은 src에서 확인 가능
※ META-INF와 WEB-INF는 사용자가 접근할 수 없는 특수한 폴더
5. HTML 서버 열기
＊하단 Server → 클릭 → apache → tomcat v9.0 Server → Browse → tomcat 설치 경로 선택
* 생성된 html 서버
6. HTML 파일 생성하기
7. HTML 파일로 만든 페이지 접속하기
* title 태그에 제목을, body 태그에 내용을 작성한다.
* 서버가 stop 상태일 경우 start 시킨다.
* 키보드에서 Ctrl + F11 을 눌러 작성한 HTML 페이지를 확인할 수 있다.
8. HTML 작업 관련 몇 가지 설정
* 작성한 HTML 페이지가 크롬에서 보이게 하기 위한 설정
* 글자가 깨지지 않도록 UTF-8로 설정
9. 서버 문제가 발생했을 경우 포트 변경 설정
* 서버를 껐다고 생각했으나 아닌 경우가 간혹 있다. 이 경우 개발 과정에서 포트 에러가 발생할 수 있으나 포트 번호를 임시 변경하여 에러상황을 피할 수 있다.
* 하단의 서버를 더블클릭 → Overview → Port Number를 8080에서 8081, 8083을 비롯한 다른 번호로 변경
* 개발 작업이 완료된 후에는 다시 8080 포트로 원상복구 시켜주도록 한다.
* 8080 포트 : 일반적으로 실험적으로 하는 서비스를 실행하는 포트
* 80 포트 : 기본 설정으로 서버를 설치했을 경우, 웹 클라이언트로부터 요구가 들어오기를 기대하는 포트
기본적인 웹 서버의 포트번호이며,
daum이나 naver와 같은 사이트에서 여러 사용자가 접속할 수 있도록 사용중
실제 주소는 www.daum.net:80 이었을 것이나 주소만으로도 접속 가능하도록 처리가 되어 있을 것
HTML 인터넷 페이지를 열고 도중에 수정을 했을 경우, F5만으로는 새로고침을 해도 수정 내용이 반영되지 않는다.
서버까지 경유하여 새로고침이 되기 위해서는 Ctrl + F5를 사용한다.
10. 모듈 경로 관련 설정
* Document base와 Path명이 같아야 하며, Path는 /로 시작한다.
단, 프로젝트가 1개 밖에 없을 경우에는 Path에 /만 기입해도 작동한다.
11. HTML 관련 참고
* 단축키
자동 들여쓰기 : Ctrl + i
* HTML 가이드를 확인할 수 있는 사이트
W3Schools Online Web Tutorials
HTML Example:
This is a heading
This is a paragraph.
Try it Yourself » CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: ce
www.w3schools.com
* HTML을 간단히 작성해볼 수 있는 에디터 페이지도 지원한다
www.w3schools.com/html/tryit.asp?filename=tryhtml_default
Tryit Editor v3.6
Page Title This is a Heading This is a paragraph.
www.w3schools.com
* 이북 사이트 (일부 페이지만 무료)
위키북스
epubx.com
* brakets 에디터 : 이클립스와 같은 역할을 하며, 작성하는 즉시 시각화하여 보여준다고 함
12. HTML 기본 구조
<PPT 수업 내용 - 태그 정리 포함>
* 태그끼리 중첩되지 않도록 주의한다.
* 소스를 작성하면서 머릿속에서는 트리 구조를 띄우는 것이 좋다.
* 맨 앞 줄에 있는 doctype에 의해서 HTML 버전을 결정하게 된다.
<!DOCTYPE html> 라는 한 줄이 HTML 5를 의미한다.
* 태그의 정식 명칭은 element이며 그 내부에 들어있는 것이 속성과 값이다.
* 태그와 속성의 일부이며 이보다 종류가 더 다양하다.
* 중단된 태그 ........... frame과 iframe은 서로 다르다. iframe은 계속 사용되고 있다.
* 구조화
* 블록 태그(div)와 인라인 태그(span)
* 문단 태그 - <article> <section> <nav> <header> <footer> <address>
* 그룹 태그 <p> <hr> <pre> <ol> <ul> <dl> <figure> <div>
* 글자 태그 <mark> <sup> <sub> <em> <strong> <span> <ins> <del>
* embedded 이미지 태그
<src> 이미지 경로
<alt> 대체 문자열
<height> 높이
<width> 폭
<usemap> 이미지맵 이름
* embedded 오디오 태그
<autoplay> 자동재생 여부
<loop> 반복재생 여부
<controls> 재생 버튼 표시
* embedded 비디오 태그
<poster> 재생되기 전 이미지 경로
* 브라우저 지원, 코덱, 자막 관련 태그
* iframe 태그
* 테이블 태그
* 폼 태그 - 사용자 입력 데이터를 서버에 전송
* 라벨 태그
* input 태그 - 사용자 입력 값
* 드롭다운 리스트 태그
* TextArea 태그
13. 웹 표준 방식
<bad.html 소스코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>예전방식</title>
</head>
<body>
<font color='red'>
<div onclick='alert("눌렀음")'>표준을 따르지 않음</div>
</font>
</body>
</html>
<good.html 소스코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>웹 표준 방식</title>
<style type="text/css">
#txt {
color: blue
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("txt").onclick = function() {
alert("확인");
}
}
</script>
</head>
<body>
<div id='txt'>웹 표준 방식을 따른 구조</div>
</body>
</html>
14. HTML 폰트 크기 조절하기
* h1~h6 태그 사용
15. HTML 리스트
<unorder list>
: 순서가 없는 리스트는 <ul> 태그 안에 <li> 태그를 사용하여 작성한다.
<order list>
: 순서가 있는 리스트는 <ol> 태그 안에 <li> 태그를 사용하여 작성한다.
<참고> 속성을 추가하여 목차 정렬방식을 바꿀 수 있다.
type="A" / "a" / "I" / "i" / "1"
16. HTML 하이퍼링크
<a> 태그를 사용하여 하이퍼링크를 추가할 수 있다.
<a href=' '> </a>
-----> 클릭하면 해당 주소로 페이지가 이동한다.
-----> 클릭하면 페이지 내에서 해당 태그가 자리한 곳으로 이동한다.
<01_html5_section.html 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>산과 벗하는 산악회</title>
</head>
<body>
<!-- 제목 태그 -->
<!-- <h1>첫번째</h1> -->
<!-- <h2>두번째</h2> -->
<!-- <h3>세번째</h3> -->
<!-- <h4>네번째</h4> -->
<!-- <h5>다섯번째</h5> -->
<!-- <h6>여섯번째</h6> -->
<header>
<h1>산과 벗하는 산악회</h1>
<h3>주말 산행 뿐만 아니라 주중 산행, 무박 산행도 합니다</h3>
</header>
<nav>
<!-- ul : unorder list 순서가 없는 리스트 / ol : order list 순서가 있는 리스트 -->
<ul>
<li><a href='#'>산행예절</a></li>
<li><a href='#greeting'>산행준비</a></li>
<li><a href='#atiqueete'>산행종류</a></li>
<li><a href='#manner'>보행요령</a></li>
<li>등산식량</li>
</ul>
<ul>
<li><a href='http://www.daum.net' target='_bank'>산행예절</a></li>
<li><a href='http://www.naver.com' target='self'>산행준비</a></li>
<li><a href='http://w3schools.com' target='parent'>산행종류</a></li>
<li><a href='http://localhost:8080/WebUI/0_check/good.html'>보행요령</a></li>
<li>등산식량</li>
</ul>
</nav>
<section>
<header>
<h3>산행 예절</h3>
</header>
<article>
<h4 id=greeting'>인사</h4>
<p>인사를 할 때에는 너무 큰소리로 하지 말고 상대방이 똑똑히 들을 정도의 소리로 인사한다. 산쟁이 중에는 "수고
하십니다"란 인사를 싫어하는 사람이 많다. 오히려 그것 보단 "힘내세요" "조금만 가면 정상입니다" "좋은 산행
되세요"라고 인사가 적당하지 않은가 생각한다. 그리고 단체로 갈 땐 모든 사람이 인사를 하면 안된다 여러 명이 줄지어서 갈
땐 선두에 선 사람이 인사를 하고 뒷사람은 가볍게 목례정도만 하면 된다.</p>
<p>인사를 할 때에는 너무 큰소리로 하지 말고 상대방이 똑똑히 들을 정도의 소리로 인사한다. 산쟁이 중에는 "수고
하십니다"란 인사를 싫어하는 사람이 많다. 오히려 그것 보단 "힘내세요" "조금만 가면 정상입니다" "좋은 산행
되세요"라고 인사가 적당하지 않은가 생각한다. 그리고 단체로 갈 땐 모든 사람이 인사를 하면 안된다 여러 명이 줄지어서 갈
땐 선두에 선 사람이 인사를 하고 뒷사람은 가볍게 목례정도만 하면 된다.</p>
<p>인사를 할 때에는 너무 큰소리로 하지 말고 상대방이 똑똑히 들을 정도의 소리로 인사한다. 산쟁이 중에는 "수고
하십니다"란 인사를 싫어하는 사람이 많다. 오히려 그것 보단 "힘내세요" "조금만 가면 정상입니다" "좋은 산행
되세요"라고 인사가 적당하지 않은가 생각한다. 그리고 단체로 갈 땐 모든 사람이 인사를 하면 안된다 여러 명이 줄지어서 갈
땐 선두에 선 사람이 인사를 하고 뒷사람은 가볍게 목례정도만 하면 된다.</p>
<p>인사를 할 때에는 너무 큰소리로 하지 말고 상대방이 똑똑히 들을 정도의 소리로 인사한다. 산쟁이 중에는 "수고
하십니다"란 인사를 싫어하는 사람이 많다. 오히려 그것 보단 "힘내세요" "조금만 가면 정상입니다" "좋은 산행
되세요"라고 인사가 적당하지 않은가 생각한다. 그리고 단체로 갈 땐 모든 사람이 인사를 하면 안된다 여러 명이 줄지어서 갈
땐 선두에 선 사람이 인사를 하고 뒷사람은 가볍게 목례정도만 하면 된다.</p>
<h4 id='atiquette'>추월을 해야 할땐 먼저 양해를 구하자.</h4>
<p>좁은 등산로에서 예고없이 추월을 한다면 배낭 같은 것이 부딪혀 서로 중심이 흐트러질 경우가 많다. 약한 사람은
튕겨 날 경우도 있다. 추월을 할 땐 미리 "먼저 가겠습니다"라고 하고 비켜주면 그때 "고맙습니다"라고 인사를 하고 추월을
하자.</p>
<p>좁은 등산로에서 예고없이 추월을 한다면 배낭 같은 것이 부딪혀 서로 중심이 흐트러질 경우가 많다. 약한 사람은
튕겨 날 경우도 있다. 추월을 할 땐 미리 "먼저 가겠습니다"라고 하고 비켜주면 그때 "고맙습니다"라고 인사를 하고 추월을
하자.</p>
<p>좁은 등산로에서 예고없이 추월을 한다면 배낭 같은 것이 부딪혀 서로 중심이 흐트러질 경우가 많다. 약한 사람은
튕겨 날 경우도 있다. 추월을 할 땐 미리 "먼저 가겠습니다"라고 하고 비켜주면 그때 "고맙습니다"라고 인사를 하고 추월을
하자.</p>
<p>좁은 등산로에서 예고없이 추월을 한다면 배낭 같은 것이 부딪혀 서로 중심이 흐트러질 경우가 많다. 약한 사람은
튕겨 날 경우도 있다. 추월을 할 땐 미리 "먼저 가겠습니다"라고 하고 비켜주면 그때 "고맙습니다"라고 인사를 하고 추월을
하자.</p>
<h4 id='manner'>올라오는 사람에게 양보를 하자.</h4>
<p>산에서 많이 경험을 하였을 것이다. 내려 오는 사람보단 올라가는 사람이 시간이 촉박하다. 또 페이스 유지도
올라오는 사람이 유지하기가 어렵다. 단체일 경우에는 소수인 그룹이 양보한다.</p>
<p>산에서 많이 경험을 하였을 것이다. 내려 오는 사람보단 올라가는 사람이 시간이 촉박하다. 또 페이스 유지도
올라오는 사람이 유지하기가 어렵다. 단체일 경우에는 소수인 그룹이 양보한다.</p>
<p>산에서 많이 경험을 하였을 것이다. 내려 오는 사람보단 올라가는 사람이 시간이 촉박하다. 또 페이스 유지도
올라오는 사람이 유지하기가 어렵다. 단체일 경우에는 소수인 그룹이 양보한다.</p>
<p>산에서 많이 경험을 하였을 것이다. 내려 오는 사람보단 올라가는 사람이 시간이 촉박하다. 또 페이스 유지도
올라오는 사람이 유지하기가 어렵다. 단체일 경우에는 소수인 그룹이 양보한다.</p>
</article>
</section>
</body>
</html>
17. HTML 딕셔너리
<dl> 태그 안에 <dt>와 <dd> 태그를 사용하여 딕셔너리 형식으로 화면에 나타낼 수 있다.
18. HTML 이미지 삽입
<img src= ' '> 태그를 사용하고 ' ' 안에 파일의 주소를 넣어 이미지 파일을 화면에 출력할 수 있다.
19. HTML 미디어 파일 삽입
페이지 내에서 미디어파일을 출력하고자 할 때는 w3schools에서 해당 코드를 가져와 사용한다.
20. HTML iframe
iframe은 페이지 내에 또 다른 프레임을 만든다. 프레임 안에 다른 페이지를 삽입할 수 있다.
<02_html5_list.html 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>카레만들기</title>
</head>
<body>
<!-- ###### 경로 찾기
(1) 절대 경로 찾기 : "/"로 시작.......... 프로젝트명으로 시작하여 경로를 기술
(2) 상대 경로 찾기 : "/"로 시작하지 않음. 특정폴더에서부터 시작하는 경로를 기술
..... "." 자신 폴더
..... ".." 부모폴더
-->
<!-- 미디어 경로 연습 -->
<h2>경로연습</h2>
<!-- 링크를 클릭하면 새 창으로 미디어파일 출력 -->
<!-- 절대경로 -->
<ul>
<li><a href='/WebUI/media/peng.mp3'>음악파일</a></li>
<li><a href='/WebUI/media/pengsu.mp4'>동영상파일</a></li>
</ul>
<!-- 상대경로 -->
<ul>
<li><a href='../media/peng.mp3'>음악파일</a></li>
<li><a href='../media/pengsu.mp4'>동영상파일</a></li>
</ul>
<!-- 페이지 내에서 미디어파일 출력 -->
<audio controls>
<source src="../media/peng.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="../media/pengsu.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<hr>
<!-- iframe 연습 -->
<!--
<iframe src='http://www.ikosmo.co.kr/' width='500' height='400'></iframe>
-->
<iframe src='./01_html5_section.html' width='500' height='400'></iframe>
<!-- ###### 경로 찾기
(1) 절대 경로 찾기 : "/"로 시작 ........ 프로젝트명으로 시작하여 경로를 기술
(2) 상대 경로 찾기 : "." 자신 폴더 ........ 해당 폴더에서부터 시작하는 경로를 기술
".." 부모폴더
</hr>
<!-- 이미지 경로 연습 -->
<img src='/WebUI/images/sample/curry.jpg' width='400' height='300'
alt='당근과 브로콜리가 들어있는 노란 카레' title='카레이미지'>
<img src='../images/sample/curry.jpg'>
<h3>커리(Curry) 재료</h3>
<ul>
<!-- unordered list -->
<li>카레 가루 100g</li>
<li>닭가슴살 200g</li>
<li>감자 1개</li>
<li>양파 1/2개</li>
<li>당근 1/2개</li>
</ul>
<h3>커리(Curry) 만드는 법</h3>
<ol type="i">
<!-- ordered list -->
<li>카레 가루 8큰술에 물 6큰술을 넣어 풀어놓는다.</li>
<li>닭가슴살, 감자, 양파, 당근 등을 따로 중불에 살짝 볶는다.</li>
<li>볶아 놓은 재료를 카레를 풀어놓은 물과 함께 냄비에 넣고 물 2컵을 부은 후 15분 정도 끓인다.</li>
</ol>
<dl>
<!-- dictionary -->
<dt>양파</dt>
<dd>외떡잎식물 백합목 백합과의 두해살이풀</dd>
<dt>당근</dt>
<dd>쌍떡잎식물 산형화목 미나리과의 두해살이풀.</dd>
</dl>
</body>
</html>
21. HTML span
**특별한 뜻이 있지는 않지만, 무언가를 결정해서 사용할 때 <div>와 <span>태그를 자주 사용한다.
1) div : block element (개행될 수 있음)
2) span : inline element (개행되지 않음)
<04_html5_span.html 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>푸터 영역 | WebCafe</title>
<!--
1) div : block element (개행될 수 있음)
2) span : inline element (개행되지 않음)
-->
<style type="text/css">
address {
clear:both;
padding:0 0 15px 3px;
font-size:15px;
line-height:1.5;
color:#787878;
}
address .addr {
padding-right:10px;
color : #9922cc;
font-size: 18px;
}
address .tel, address .fax {
padding: 0px 3px;
color : #aa3302;
font-family : Serif;
}
address .copyright {
padding-right:10px;
color : #ee1212;
font-size: 13px;
}
</style>
</head>
<body>
<div id="footer">
<div class="footerInner">
<p class="footerLogo"><img src="../images/common/logo_copyright.gif" alt="WebCafe" /></p>
<h2>사이트 이용안내</h2>
<ul class="guideMenu">
<li><a href="#">회사소개</a></li>
<li><a href="#">개인정보보호정책</a></li>
<li><a href="#">이메일주소무단수집거부</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Site map</a></li>
</ul>
<address>
<span class="addr">서울시 마포구 상수동 123-12 한주빌딩 5층</span>
<span class="tel">· 전화: 02-1234-1234</span>
<span class="fax">· FAX: 02-1234-1234</span>
<span class="email">· E-MAIL: webmaster@mail.com</span><br />
<span class="copyright">Copyright ⓒ Web Cafe CORPORATION ALL RIGHTS RESERVED.</span>
</address>
</div>
</div>
</body>
</html>
22. HTML 테이블
<table> 태그 안에 줄 바꾸는 <tr>과 칸을 넘어가는 <td> 태그를 사용하여 x행y렬의 테이블을 생성할 수 있다.
* 테이블을 꾸미는 테두리의 형태는 border 속성을 사용하여 바꿀 수 있다.
* 가로로 테이블을 병합하고자 할 경우
------> colspan 속성을 사용하여 열을 병합할 수 있다.
* 세로로 테이블을 병합하고자 할 경우
------> rowspan 속성을 사용하여 열을 병합할 수 있다.
** 연습문제 **
<th> 태그 : 헤드라인 처리 (굵은 글씨 & 가운데 정렬)
<br> 태그 : 줄 바꿈
<05_html5_table.html 연습문제 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 05_html5_table.html </title>
</head>
<body>
<!-- 3행 2열의 테이블 -->
<table border='1'>
<tr>
<th colspan='2'>부서명</th><th>전화번호 (02+)</th><th>팩스번호 (02+)</th>
</tr>
<tr>
<td colspan='2'>종합상황실</td><td>123-1001~1005</td><td>321-1001</td>
</tr>
<tr>
<td rowspan='2'>비서실</td><td>비서실장</td><td>123-1111</td>
<td rowspan=2'>321-1002(사장)<br>321-1003(감사)</td>
</tr>
<tr>
<td>비서실</td><td>123-1112(사장)<br>123-1113(감사)</td>
</tr>
<tr>
<td rowspan='3'>홍보실</td><td>홍보실장</td><td>123-1001</td>
<td rowspan='3'>321-1101</td>
</tr>
<tr>
<td>홍보부</td><td>123-2001~123-2009</td>
</tr>
<tr>
<td>국제협력부</td><td>123-1230~1234</td>
</tr>
</table>
</body>
</html>
23. HTML 모바일폼
* HTML4에서 이메일 주소 입력을 받을 때 제한을 걸고자 할 때는 input의 타입 중 text를 사용해야 했다. 제한 사항을 일일이 정규식으로 표현해야 했기 때문에 대단히 복잡했다.
* HTML5에서는 input의 타입이 다양화되어 email 타입을 사용함으로 코드가 간결해졌다.
* 모바일 폼을 사용할 경우 조건에 맞는 텍스트를 즉시 입력할 수 있도록 자동 설정된다.
<06x_oldform.html 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>old form</title>
</head>
<body>
<form id="myform" action="#">
<label for="email">email</label>
<input type="text" id="email" name="email">
<input type="submit">
</form>
</body>
<script>
document.querySelector("#myform").addEventListener("submit", function(e){
var email = document.querySelector("#email");
var isValidate = false;
var regexp = /[a-z]+[a-z0-9]*\.?[a-z0-9]*@[a-z0-9]+\.?[a-z0-9]*/i;
if(!regexp.test(email.value)){
alert("이메일 형식이 다릅니다.");
e.preventDefault();
}
});
</script>
</html>
<06y_html5form.html 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new form</title>
</head>
<body>
<form id="myform" action="#">
<label for="email">email</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
</body>
<script>
</script>
</html>
<99_mobile_form.html 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0,
user-scalable=no"/>
<title>모바일 페이지</title>
</head>
<body>
<form action="#" >
날짜: <input type="date" min="2011-11-01" max="2021-12-31" step="1" value="2018-11-11"/> <br/>
범위: <input type="range" min="0" max="100" step="1" value="50"/> <br/>
숫자: <input type="number" min="0" max="100" step="1" value="50"/> <br/>
검색: <input type="search"/> <br/>
URL: <input type="url" list="url_list"/> <br/>
메일: <input type="email"/> <br/>
힌트문자: <input type="text" placeholder="이름을 입력하세요"/> <br/>
자동포커스: <input type="text" autofocus/> <br/>
빈값검사: <input type="text" required/> <br/>
정규표현식: <input type="text" pattern="(010|011)-\d{3,4}-\d{4}"/> <br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>