<head>
<title>HTML5 Basic-name anchor</title>
</head>
<body>
<a href="#alpha">Move to Alpha</a>
<a href="#beta">Move to Beta</a>
<a href="#gamma">Move to Gamma</a>
<hr />
<h1 id="alpha">Alpha</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1 id="beta">Beta</h1>
<p>Duis nec risus a ante pellentesque rhoncus at et leo.</p>
<h1 id="gamma">Gamma</h1>
<p>Nullam porta, felis sit amet porttitor vestibulum.</p>
</body>
[NAME 이용] - 목적지 요소가 오직 a 인 경우에만 가능
목적지 : name="네임 명" 표시 (예) <a name='hz'>목적지</a >
출발지 : href="#네임 명" 입력 (예) <a href="#hz">출발지</a>
<h2> 모바일 하이퍼링크 </h2>
<a href="mailto:admin@daum.net">메일보내기</a> <br>
<a href="tel:02-444-7777"> 전화걸기</a><br>
<a href="sms:010-444-7777"> 문자보내기</a>
<a href="http://maps.google.com/maps?q=화곡1동주민센터&z=16"><img src="images/btn_map.png" alt="오시는길" /></a>
<a target="_top|_blank|_self|_parent|new">
< < less than
> > greater than
공백
© ⓒ
& &
» >> 자세히보기
« <<
<head>
<title>HTML TEXT Basic Page</title>
</head>
<body>
<ruby>
<span>大韓民國</span>
<rp>(</rp>
<rt>대한민국</rt>
<rp>)</rp>
</ruby>
</body>
s->표준 태그
<address> 요소 안에는 블록 요소가 올수 없지만, 특별하게 <p> 요소의 경우에는 <address>요소 안에 포함할 수 있다.
-> <p> 태그안에 address 태그를 포함할 수 없다.
<ol reversed>
</ol>
[table 태그에 들어가는 태그들]
tr, td, th, col, colgroup,row, caption, tbody, tfoot, thead,
[table 태그에 들어있는 속성들]
width, height, border, cellpadding, cellspacing, bordercolor, bgcolor, background, summary
[tr과 td에 들어가는 속성들]
align, valign, width, height, colspan, rowspan, bgcolor, backgrouond
th->scope
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<table border="1">
<caption>Caption</caption>
<colgroup>
<col span="2" style="background: red" />
<col style="background: blue" />
</colgroup>
<thead style="background: green">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
<tfoot style="background: yellow">
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tfoot>
</table>
</body>
</html>
<table border="1" width="100%" summary="상하반기 태블릿 PC와 스마트폰 판매현황">
<caption>태블릿 PC와 스마트폰 판매현황</caption>
<colgroup>
<col width="20%" />
<col width="40%" />
<col width="40%" />
</colgroup>
<thead>
<tr>
<th scope="col">구분</th>
<th scope="col">태블릿 PC</th>
<th scope="col">스마트폰</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">총판매수</th>
<td>5만대</td>
<td>16만대</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">상반기 판매수</th>
<td>2만대</td>
<td>5만대</td>
</tr>
<tr>
<th scope="row">하반기 판매수</th>
<td>3만대</td>
<td>11만대</td>
</tr>
</tbody>
</table>
<h1>표 만들기</h1>
<h2>colgroup</h2>
<table border="1" width="100%" summary="월별 스마트폰, 태블릿PC, 데스크탑PC 판매현황 ">
<caption>상품에 따른 월별 판매현황</caption>
<colgroup>
<col width="20%" />
<col width="25%" />
<col width="25%" />
<col width="30%" />
</colgroup>
<thead>
<tr>
<th rowspan="2" scope="col">구분</th>
<th colspan="3" scope="colgroup">상품종류</th>
</tr>
<tr>
<th scope="col">스마트폰</th>
<th scope="col">태블릿PC</th>
<th scope="col">데스크탑PC</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1월</th>
<td>5만대</td>
<td>3만대</td>
<td>1만대</td>
</tr>
</tbody>
</table>
<h2>id, headers</h2>
<table border="1" width="100%" summary="월별 스마트폰, 태블릿PC, 데스크탑PC 판매현황 ">
<caption>상품에 따른 월별 판매현황</caption>
<colgroup>
<col width="20%" />
<col width="25%" />
<col width="25%" />
<col width="30%" />
</colgroup>
<thead>
<tr>
<th rowspan="2" id="division">구분</th>
<th colspan="3" id="product">상품종류</th>
</tr>
<tr>
<th headers="product" id="smartphone">스마트폰</th>
<th headers="product" id="tabletpc">태블릿PC</th>
<th headers="product" id="pc">데스크탑PC</th>
</tr>
</thead>
<tbody>
<tr>
<th headers="division">1월</th>
<td headers="product smartphone">5만대</td>
<td headers="product tabletpc">3만대</td>
<td headers="product pc">1만대</td>
</tr>
</tbody>
</table>
[embed 태그에 들어가는 파라미터 속성]
1) 트래커, 컨트롤 바 보이기: showcontrols=true(디폴트), (showtracker: 트랙커, showaudiocontrols: 볼륨콘트롤, showpositioncontrols: 이전 곡, 다음 곡 버튼 등으로 세부 설정도 가능)
2) 바로가기 보이기: showgotobar=true
3) 파일정보 보이기: showdisplay=true
4) 상황선 보이기: showstatusbar=true
5) 자동 시작: autostart=true(디폴트)
6) 재생 횟수: loop=1(디폴트), loop=3(3회 반복 재생), loop=0(무한 반복)
7) 재생 볼륨: volume=-6000(디폴트), volume 값은 -10000~0 사이의 값을 갖는다.
8) 좌우 밸런스: balance=0(디폴트), 밸런스 값은 -10000~10000 사이의 값을 갖는다.
9) 플레이어 감추기: hidden=false(디폴트)
10) 메뉴 금지: enablecontextmenu=false(디폴트), 오른쪽 마우스를 사용할 수 없도록 한다.
11) 전체화면금지 : allowFullScreen=false(기본값)
[ iframe 태그 사용법 ]
⑴ iframe 태그 사용하는 이유
iframe 태그를 이용하면 HTML 문서에 다른 HTML 문서를 삽입해 넣을 수 있기 때문에 복잡한 웹 응용프로그램을 구성하려는 경우에 사용하려는 이유가 가장 크다고 하겠다.
⑵ iframe 태그 속성
① align : 내용의 정렬 방향을 기술한다.
- 세로 방향 값 : bottom , middle, top,가로
- 가로 방향 값 :right, left
② frameborder : 프레임 보더의 사용여부 기술한다.
- 값은 : yes, no,1, 0
③ height : 프레임을 높이를 기술한다.
- 단위 : 픽셀 혹은 전체 화면 대비 비율
④ width : 프레임을 폭을 기술한다.
- 단위 : 픽셀 혹은 전체 화면 대비 비율
⑤ marginheight : 프레임의 보더와 내용 사이의 세로 마진을 기술한다.
⑥ marginwidth : 프레임 보더와 내용 사이의 가로 마진을 기술한다.
⑦ name : 프레임을 고유한 이름을 할당한다.
⑧ scrolling : 프레임에서 스크롤 바를 사용할지 여부를 기술한다.
- 값은 : yes, no, auto
⑨ src : 프레임 내에 포함시킬 HTML 문서나 서블릿의 주소를 기술한다.
⑶ 간단한 소스로 설명하면 아래와 같다.
[소스]
<h3>iframe 태그 </h3>
<p>
<iframe src='Hello.mp4' width='200' height='50' scrolling='auto'> </iframe>
</p>
<audio src="Kalimba.mp3" controls="controls" autoplay="autoplay"></audio>
<audio src="Kalimba.mp3" controls autoplay></audio>
<video src="media/BigBuck.mp4" controls></video>
autostart
<video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
</video>
<video width="640" height="360" controls="controls">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
<track kind="subtitles" src="track.srt" srclang="ko" label="Korean" />
<track kind="subtitles" src="track.srt" srclang="en" label="English" />
<track kind="subtitles" src="track.srt" srclang="jp" label="Japanese" />
<track kind="subtitles" src="track.srt" srclang="ch" label="Chinese" />
</video>
<title>폼</title>
</head>
<body>
<h1>input 요소</h1>
<form action="join.php" method="post">
<fieldset>
<legend>회원가입</legend>
<p>아이디 : <input type="text" size="12" maxlength="8" /></p>
<p>비밀번호 : <input type="password" size="12" maxlength="8" /></p>
<p>메일 수신 여부 :
<input type="radio" value="y" name="receive" />예
<input type="radio" value="n" name="receive" />아니요
</p>
<p>관심 분야:
<input type="checkbox" value="HTML" name="chk1" />HTML
<input type="checkbox" value="CSS" name="chk2" />CSS
<input type="checkbox" value="Javascript" name="chk3" />Javascript
</p>
<p>
<input type="submit" value="전송"/>
<input type="reset" value="취소"/>
<input type="button" value="확인"/>
<input type="image" src="images/search.gif" alt="검색" />
</p>
<p>파일 올리기 : <input type="file" /></p>
<p><input type="hidden" /></p>
</fieldset>
</form>
<h1> output 태그 알아보기</h1>
<form 온Click="결과.value=입력.value">
<input type="range" name="입력">
<output name="결과"> </output> 점
</form>
<h1>textarea요소와 select요소</h1>
<form action="board.php" method="post">
<fieldset>
<legend>여러 줄 글상자와 목록상자</legend>
<p>답글<br /> <textarea cols="30" rows="3" name="reply"></textarea></p>
<p>과목 선택
<select>
<option value="html5">html5</option>
<option value="css3">css3</option>
<option value="javascript">javascript</option>
<option value="Query">jQuery</option>
</select>
</p>
<p>스터디 지역
<select>
<optgroup label="관악구">
<option value="gwanak-bcd">봉천동</option>
<option value="gwanak-sld">신림동</option>
<option value="gwanak-nhd">남현동</option>
</optgroup>
<optgroup label="동대문구">
<option value="ddm-jnd" >전농동</option>
<option value="ddm-dsn">답십리</option>
<option value="ddm-ssd">신설동</option>
</optgroup>
</select>
</p>
</fieldset>
</form>
form 태그 내에 전송버튼을 넣어야 확인가능하다
size의 기본값은 20이며,, 문자갯수를 나타낸다(대문자 M을 기준)
<title>pattern 속성</title>
</head>
<body>
<form>
<fieldset>
<legend>pattern 속성</legend>
<p><label for="tel">휴대폰 번호 : </label><input type="tel" id="email" pattern="\d{3}-\d{3,4}-\d{4}" title="휴대폰 번호는 3자리 숫자-3자리에서 4자리 숫자-4자리 숫자로 입력하셔야 합니다." /></p>
<p><input type="submit" value="전송" /></p>
</fieldset>
</form>
<input type="email" multiple>
<input type="file" multiple> 다중파일 선택이 가능하다
<input type="button" value="다음" disabled="disabled" /> readonly 속성과 동일
<h1>label 요소</h1>
<form action="join.php" method="post">
<fieldset>
<legend>회원가입</legend>
<table border="1" width="100%" summary="회원가입에 필요한 개인정보 입력">
<caption>회원가입 서식 작성</caption>
<colgroup>
<col width="30%" />
<col width="70%" />
</colgroup>
<tbody>
<tr>
<th scope="row"><label for="name">이름</label></th>
<td><input type="text" id="name" /></td>
</tr>
<tr>
<th scope="row"><label for="id">아이디</label></th>
<td><input type="text" id="id" /></td>
</tr>
<tr>
<th scope="row"><label for="pw">비밀번호</label></th>
<td><input type="password" id="pw" /></td>
</tr>
<tr>
<th scope="row"><label for="r_pw">비밀번호확인</label></th>
<td><input type="password" id="r_pw" /></td>
</tr>
<tr>
<th scope="row"><label for="jumin_num">주민번호</label></th>
<td><input type="text" id="jumin_num" title="주민번호 앞 6자리" />-<input type="text" title="주민번호 뒤 7자리" /></td>
</tr>
<tr>
<th scope="row"><label for="email">이메일</label></th>
<td><input type="text" id="email" title="이메일 아이디" />@<input type="text" title="이메일 주소" /></td>
</tr>
<tr>
<th scope="row"><label for="hp">핸드폰</label></th>
<td><input type="text" id="hp" /></td>
</tr>
</tbody>
</table>
<p><input type="submit" value="전송" /><input type="reset" value="취소" /></p>
</fieldset>
</form>
* W3C 권고사항으로 section 태그에는 h태그가 포함되어야 웹표준검사를 통과한다.
hgroup - h태그 그룹
<BODY> <div style="width:150px;height:25px;background:red;"></div> <div style="width:150px;height:25px;background:green;"></div> <div style="width:150px;height:25px;background:blue;"></div> </BODY> </HTML>
출력결과
이렇게 줄바꿈이 생기지만 아래와 같이 Span Element를 사용하면
입력
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <span style="width:150px;height:25px;background:red;"></span> <span style="width:150px;height:25px;background:green;"></span> <span style="width:150px;height:25px;background:blue;"></span> </BODY> </HTML>
출력결과
<div>
<h1>HTML5 Header</h1>
</div>
<div>
<ul>
<li><a href="#">Menu - 1</a></li>
<li><a href="#">Menu - 2</a></li>
<li><a href="#">Menu - 3</a></li>
</ul>
</div>
<div>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<span>서울특별시 강서구 내발산동</span>
</div>
<header>
<hgroup>
<h1>HTML5 Header</h1>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menu - 1</a></li>
<li><a href="#">Menu - 2</a></li>
<li><a href="#">Menu - 3</a></li>
</ul>
</nav>
<section>
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</section>
<footer>
<address>서울특별시 강서구 내발산동</address>
</footer>
placeholder="4~10자리 입력" pattern="[A-Za-z0-9]{4,10}"
[자주 쓰이는 패턴]
1) 숫자만 : ^[0-9]*$
2) 영문자만 : ^[a-zA-Z]*$
3) 한글만 : ^[가-힣]*$
4) 영어 & 숫자만 : ^[a-zA-Z0-9]*$
5) E-Mail : ^[a-zA-Z0-9]+@[a-zA-Z0-9]+$
6) 휴대폰 : ^01(?:0|1|[6-9]) - (?:\d{3}|\d{4}) - \d{4}$
7) 일반전화 : ^\d{2,3} - \d{3,4} - \d{4}$
8) 주민등록번호 : \d{6} \- [1-4]\d{6}
9) IP 주소 : ([0-9]{1,3}) \. ([0-9]{1,3}) \. ([0-9]{1,3}) \. ([0-9]{1,3})
<p>