국비 34일차 html(colspan, rowspan, ol, li, dl, div, span, form)
2021. 2. 24. 17:58
2021.02.24 국비교육 34일차
[TOC]
colspan, rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table 태그 실습</title>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th colspan = "2">전화번호</th>
</tr>
<tr>
<td>전화번호 </td>
<td>55577854</td>
<td>55577854</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<th>이름</th>
<td >홍길동</td>
</tr>
<tr>
<th rowspan="2">전화번호 </th>
<td>55577854</td>
</tr>
<tr>
<td>55577854</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table 태그 실습</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="5">솔루션 지원 정책</td>
<td>판매상품</td>
<td>무제한</td>
<td>이미지호스팅</td>
<td>신청시 설치비 무료</td>
</tr>
<tr>
<td>트래픽 용량 </td>
<td>무제한</td>
<td>디스크 용량 </td>
<td>1gb 무료 </td>
</tr>
<tr>
<td>ftp계정지원</td>
<td>무료이용power1</td>
<td>웹ftp프로그램</td>
<td>무료제공</td>
</tr>
<tr>
<td>게시판 생성</td>
<td>무제한</td>
<td>파워메일</td>
<td>무료 1,000통</td>
</tr>
<tr>
<td>웹메일</td>
<td colspan = "3">무료150m</td>
</tr>
<tr>
<td>최신기능</td>
<td colspan = "4">쇼핑몰의 운영수준</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table 태그 실습</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="6">한국의 차
</tr>
<tr>
<td rowspan="6">뿌리차</td>
<td>인삼차</td>
<td rowspan="9">과일차</td>
<td>수정과</td>
<td rowspan="5">잎차</td>
<td>뽕잎차</td>
</tr>
<tr>
<td>당귀차</td>
<td>유자차</td>
<td>감잎차</td>
</tr>
<tr>
<td>생강차</td>
<td>구기자차</td>
<td>솔잎차</td>
</tr>
<tr>
<td>칡차</td>
<td>대추차</td>
<td>국화차</td>
</tr>
<tr>
<td>둥글레차</td>
<td>오미자차</td>
<td>이슬차</td>
</tr>
<tr>
<td>마차</td>
<td>마실차</td>
<td rowspan="4">기타</td>
<td>두중차</td>
</tr>
<tr>
<td rowspan="3">곡물차</td>
<td>보리차</td>
<td>모과차</td>
<td>영지버섯차</td>
</tr>
<tr>
<td>옥수수차</td>
<td>산수유차</td>
<td>귤강차</td>
</tr>
<tr>
<td>현미차</td>
<td>탕자차</td>
<td>쌍화차</td>
</tr>
</table>
</body>
</html>ol li dl
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ol 태그 실습</title>
</head>
<body>
<ol>
<li>사과</li>
<li>배</li>
</ol>
<ol start="3">
<li>사과</li>
<li>배</li>
</ol>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ul 태그 실습</title>
</head>
<body>
<ul type = "circle">
<li>사과
<li>배
</ul>
<ul type = "disc">
<li>사과
<li>배
</ul>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dl 태그 실습</title>
</head>
<body>
<dl>
<dt>HTML이란</dt> // 들여쓰기
<dd>홈페이지를 만드는...</dd>
<dt>WW 이란</dt>
<dd>World Wide Web</dd>
</dl>
</body>
</html>div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div 태그 실습</title>
</head>
<body>
<!-- 컨텐츠나 특정요소를 묶을 때 사용, 무분별하게 사용하지말고, 논리그룹으로 만들때 사용권장 -->
<div>
<h1>오만과 편견</h1>
<div>
<h2>1권</h2>
<div>
<h3>1장</h3>
<p>돈많은 독신남에게 아내가 필요하다는 것은..</p>
<p>이런 진실은 주변 이웃들의 마음속에 단단히 박혀...</p>
</div>
</div>
</div>
</body>
</html>span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>span 태그 실습</title>
<style type = "text/css">
#red{
color : red;
font-size : 100px;
}
</style>
</head>
<body>
<h3>1장</h3>
<p>돈많은<span id = "red">독신남</span> 에게 아내가 필요하다는 것은..</p>
<p>이런 진실은 주변 이웃들의 마음 속에 단단히 박혀..</p>
</body>
</html>form
text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form text 태그 실습</title>
</head>
<body>
<form name = "myForm" action = "target.html" method = "post">
<!-- 폼의 이름 : myForm 데이터전송 : target.html으로 전송방식: get방식-->
<!-- get: 주소에 포함해서 보냄 //method default값-->
<!-- post :body에 숨겨서 보냄 -->
아이디:<br> <input type = "text" name = "userid" value ="test"><br>
<!--전송 : target.html key:value = userid : 사용자가 입력한 내용-->
비밀번호:<br> <input type = "text" name = "passwd1"><br>
<!-- 전송 : target.html key:value = passwd1 : 사용자가 입력한 내용 -->
비밀번호:<br> <input type = "password" name = "passwd2"><br>
<!-- 전송 : target.html key:value = passwd2 : 사용자가 입력한 내용 -->
<input type = "submit" value ="전송">
</form>
</body>
</html>radio
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form radio 태그 실습</title>
</head>
<body>
<form name = "myForm" action = "target.html" method = "get">
<input type = "radio" name = "gender" value = "male" checked>남<br>
<input type = "radio" name = "gender" value = "female" checked>여<br>
<!-- key = gender : value = male or female -->
<input type = "submit" value ="전송">
<!-- <button> 전송 </button> -->
</form>
</body>
</html>checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form checkbox 태그 실습</title>
</head>
<body>
<form name = "myForm" action = "target.html" method = "get">
<input type = "checkbox" name = "fruits" value = "apple" checked>사과<br>
<input type = "checkbox" name = "fruits" value = "banana" >바나나<br>
<input type = "submit" value = "전송">
</form>
</body>
</html>select
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form select 태그 실습</title>
</head>
<body>
<form name = "myForm" action = "target.html" method = "get">
<select name ="car">
<option value = "volvo">볼보</option>
<option value = "saab">사브</option>
<option value = "fiat">피아트</option>
<option value = "audi" selecte = "selected">아우디</option>
</select>
<input type ="submit" value = "전송">
</form>
</body>
</html>textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form textarea 태그 실습</title>
</head>
<body>
<form name="myForm" action="target.html" method="get">
<textarea name="message" rows="10" cols="30">여러라인 사용가능
</textarea>
</form>
</body>
</html>submit / reset
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form submit reset 태그 실습</title>
</head>
<body>
<form name="myForm" action="target.html" method="get">
<input type = "text" name = "userid"><br>
<textarea name="message" rows="10" cols="30">여러라인 사용가능
</textarea><br>
<input type = "submit" value = "전송">
<input type = "reset" value = "취소">
</form>
</body>
</html>file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form file 태그 실습</title>
</head>
<body>
<form name="myForm" action="target.html" method="post" enctype = "multipart/form-data">
파일선택:<input type = "file" name = "theFile"><br>
<input type = "submit" value="전송">
<input type = "reset" value="취소">
</form>
</body>
</html>'ETC > 국비교육' 카테고리의 다른 글
| 국비 36일차 css 정리 2 (0) | 2021.02.26 |
|---|---|
| 국비 35일차 css 정리 (0) | 2021.02.25 |
| 국비 33일차 Html (0) | 2021.02.23 |
| 국비 27~32일차 mybatis 정리 (0) | 2021.02.23 |
| 국비 26일차 JDBC(delete, update, 클래스 연동) (0) | 2021.02.10 |