봉봉의 개인 블로그
2017-04-18-P 본문
html 활용하기
위와 같이 주석은 주석안에 적어준다.
<h1> = 제목태그
<br> 줄바꿈
<div>줄바꾸면서 글씨쓰기
<a href="http://www.naver.com">네이버</a> 는 네이버를 누르면 네이버로 이동한다.(링크)
<img src="인터넷 주소 링크를 넣을수도 있다.">
<img src="./img/ace.jsp"> 등으로 ./나랑 같은 위치 ../ 나보다 상위에 있다 /하위에있다.
<hr> 수평선
<ol>
<li>a</li> 순서가 있는 리스트 1.a 2.b 등
<li>b</li>
</ol>
<ul>
<li>a</li> 순서가 없는 리스트 점으로 표현된다.
<li>b</li>
</ul>
<table>
<tr>
<td>1</td>
<td>1</td> 테이블 (표?같은 느낌이다.)
</tr>
</table>
<audio controls="controls" autoplay="autoplay">
<source src="./mp3/bm.mp3"> 오디오 파일 적용
</audio>
<video controls="controls" autoplay="autoplay">
<source src="./mp4/bm.mp4"> 비디오
</video>
<iframe src="http://www.naver.com">
</iframe> <!-- 웹 페이지 표시 잘쓰지 않음 -->
<iframe src="http://www.daum.net">
</iframe>
<div>이름 : JJDEV</div> 단락이라고 보면댐 따로따로
<div>소속 : JJDEV</div>
<div><span>이것만</span>이름 : JJDEV</div>
span 안에는 따로 라고 생각하면됨
글자가 붙어서 나오면 인라인 글자가 아래로 떨어져서 나오면 블록 태그
들을 참고하자
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
table, tr, td {
border: 1px solid #000000;
border-collapse: collapse;
}table {
width: 100%;
}
</style>
<link rel="shortcut icon" href="./img/thTILAQSGI.jpg_48x48.png">
</head>
<body>
<form>
<fieldset>
<legend>회원가입</legend>
<table>
<tr>
<td>ID</td>
<td><input type="text" id="id" name = "id"></td>
</tr>
<tr>
<td>PW확인</td>
<td><input type="password" id="pw1" name = "pw1"><br>
<input type="password" id="pw2" name = "pw2">
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" value="male" name = "gender">남
<input type="radio" value="female" name = "gender">여
</td>
</tr>
<tr>
<td>취미</td>
<td>
<input type="checkbox" value="sport" name = "hobby">운동
<input type="checkbox" value="trip" name = "hobby">여행
<input type="checkbox" value="read" name = "hobby">독서
</td>
</tr>
<tr>
<td>생일</td>
<td>
<input type="date" id = "birth" name = "birth">
</td>
</tr>
<tr>
<td>나이</td>
<td>
<input type="text" id = "age" name = "age">
</td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="text" id = "email" name = "email">@
<select>
<option>naver.com</option>
<option>google.com</option>
<option>nate.com</option>
</select>
</td>
</tr>
<tr>
<td>메모</td>
<td>
<textarea id = "memo"rows="3" cols="50"></textarea>
</td>
</tr>
<tr>
<tr>
<td colspan="2">
<input type="button" id = "signup" value="signup">
<input type="reset" value="reset">
</td>
</tr>
<tr>
</table>
</fieldset>
</form>
</body>
</html>
활용하여 위에 코드와 같이 활용하면
이런식의 창도 만들수있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<form action="search_result.jsp">
<table>
<tr>
<td>search</td>
<td><input type="search" autofocus="autofocus"/></td>
</tr>
</table>
</form>
<form action="form_result.jsp">
<table border="1">
<tr>
<td colspan="2"><input type="submit"/> | <input type="reset"/></td>
</tr>
<tr>
<td>text,placeholder,pattern,title</td>
<td><input type="text" required="required" placeholder="우편번호" pattern="\d{3}-\d{3}" title="111-111양식"/></td><!--\d{3}-\d{3} 는 111-111배열을 만드는 양식같은거이다-->
</tr>
<tr>
<td>number</td>
<td><input type="number" required="required" min="0" max="9" step="1"/></td>
</tr>
<tr>
<td>range</td>
<td><input type="range" required="required" min="0" max="100" step="5"/></td>
</tr>
<tr>
<td>url</td>
<td><input type="url" required="required"/></td>
</tr>
<tr>
<td>email</td>
<td><input type="email" required="required"/></td>
</tr>
<tr>
<td>date</td>
<td><input type="date" required="required"/></td>
</tr>
<tr>
<td>month</td>
<td><input type="month" required="required"/></td>
</tr>
<tr>
<td>week</td>
<td><input type="week" required="required"/></td>
</tr>
<tr>
<td>time</td>
<td><input type="time" required="required"/></td>
</tr>
<tr>
<td>color</td>
<td><input type="color" required="required"/></td>
</tr>
<tr>
<td>datalist</td>
<td>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</td>
</tr>
</table>
</form>
</body>
</html>
또 활용하여 이런 창도 만들수 있다.
'학원에서 배운것들 > TEA - P' 카테고리의 다른 글
| 2017-05-12-P (0) | 2017.05.12 |
|---|---|
| 2017-05-11-P (0) | 2017.05.11 |
| 2017-05-10-P (0) | 2017.05.10 |
| 2017-04-21-P (0) | 2017.04.21 |
| 2017-04-20-P (0) | 2017.04.20 |
