정규식.pptx<a href> 태그
<a href="a.html">클릭</a>
<a href="http://localhost:8080/html5Test/" style="text-decoration: none;">JavaScript</a>
- 밑줄 없애기
<a href="a.html" target="_blank">클릭</a>
- target="_blank" 새로운 윈도우에서 새로운 창을 연다.
<a href="#my" target="_blank"> 클릭</a>
<a id="my">여기로 이동</a>
- 동일한 문서내에서 이동할 때 사용
<a href="a.html" target="_blank"><img src="image/a.jpg"></a>
- 이미지를 통해서 이동
Table 태그
th : 테이블 헤더
tr : 테이블 로우
td : 테이블 데이터
소스
<table border="3" cellspacing="10" cellpadding="5">
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>30</td>
</tr>
<tr>
<td>이순신</td>
<td>50</td>
</tr>
</table>
실행결과
| 이름 | 나이 |
|---|---|
| 홍길동 | 30 |
| 이순신 | 50 |
<tr>
<td colspan="2">이순신</td>
</tr>
- td 2개 차지함
<caption>주소록</caption>
- 표의 타이틀 지정함
<iframe src="a.html"></iframe>
- iframe으로 a.html 보기
frameborder="0"
- 테두리 없애기
- iframe에 youtube 영상 넣기
src 뒷부분에 ?autoplay=1입력 -> 자동재생
소스
<iframe width="560" height="315" src="https://www.youtube.com/embed/WyiIGEHQP8o" frameborder="0" allowfullscreen></iframe>
실행결과
소스
<a href = "https://ko.wikipedia.org/wiki/%EB%8F%84%EC%BF%84_%EB%8F%84" target="my">도쿄</a>
<a href = "https://ko.wikipedia.org/wiki/%EC%98%A4%EC%82%AC%EC%B9%B4_%EC%8B%9C" target="my">오사카</a>
<hr>
<iframe name="my" frameborder="0" width="1000" height="700"></iframe>
<audio src="media/test.mp3" autoplay="autoplay" controls="controls"></audio>
- 오디오 자동재생, 음량 조절 가능
source 태그 사용
소스
<video src="media/test.mp4" autoplay="autoplay" loop></video>
<audio controls autoplay>
<source src="media/test.ogg" type="audio/ogg">
<source src="media/test.mp3" type="audio/mp3">
</audio>
<div> 태그
소스
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<header><h1>한식레시피</h1></header>
<nav>
<ul>
<li><a href="#kim">김치찌개</a></li>
<li><a href="#deon">된장찌개</a></li>
<li><a href="#soon">순두부찌개</a></li>
</ul>
</nav>
<a id="kim"></a>
<section>
<hgroup>
<h2>김치찌개 레시피</h2>
<h3>백종원 레시피</h3>
</hgroup>
<article>
<figure>
<img src="image/kim.jpg">
<figcaption>김치찌개완성</figcaption>
</figure>
<p>
레시피 : 쌀뜬물 700ml, 돼지고기목살, 김치, 대파1/2뿌리, 청양고추 1~2개 국간장1숟가락, 간마늘숟가락1, 굵은고추가루1숟가락, 고운고추가루1숟가락, 새우젓1숟가락, 된장1/2숟가락 필요시 설탕or양파 뜬물 2컵반
</p>
</article>
</section>
<footer>
본 문서의 권한은 <b>홍길동</b>에게 있습니다.
©tesst.com
<address>서울시 중구</address>
<time>2017-07-11</time>
</footer>
</body>
</html>
실행결과
한식레시피
김치찌개 레시피
백종원 레시피
레시피 : 쌀뜬물 700ml, 돼지고기목살, 김치, 대파1/2뿌리, 청양고추 1~2개 국간장1숟가락, 간마늘숟가락1, 굵은고추가루1숟가락, 고운고추가루1숟가락, 새우젓1숟가락, 된장1/2숟가락 필요시 설탕or양파 뜬물 2컵반
소스
<form action="a.jsp">
이름 : <input type="text" name="myname" required="required" autofocus="autofocus"><br>
주소 : <input type="text" name="myaddr" autocomplete="on"><br>
나이 : <input type="number" name="myage" placeholder="나이를 입력하세요"><br>
날짜 : <input type="date"><br>
시간 : <input type="time" min="09:00" max = "18:00"><br>
이메일 : <input type = "email" placeholder="xx@xx형식으로 입력하세요"><br>
<button>확인</button>
</form>
실행결과
소스
<form>
<fieldset>
<legend>과목</legend>
<input type="radio" value="국어" name="sub">국어<br>
<input type="radio" value="영어" name="sub">영어<br>
<input type="radio" value="수학" name="sub">수학<br>
</fieldset>
<button>클릭</button>
</form>
실행결과
- name값 동일하게 주면 하나만 선택가능
- fieldset, legend로 설정해주면 테두리 생김
'SK고용디딤돌' 카테고리의 다른 글
| 직무교육 5일차(CSS) (0) | 2017.07.14 |
|---|---|
| 직무교육 4일차(CSS) (0) | 2017.07.13 |
| 직무교육 3일차(CSS) (0) | 2017.07.12 |
| 직무교육 1일차(HTML) (0) | 2017.07.10 |
| SK고용디딤돌 1, 2주차 후기 (0) | 2017.07.08 |