ㅁ 문제 1 - 글자태그, 목록태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>자바(Java) 학습내용</h1>
<h2>담당 강사 : 강보람</h2>
<p>이메일 : teacherboram@gmail.com</p>
<hr>
<ul type="disc">
<li>프로그래밍 언어
<ul type="circle">
<li><s>Java</s></li>
</ul>
</li>
<li>데이터베이스
<ul type="circle">
<li><s>Oracle</s></li>
</ul>
</li>
<li>화면구현
<ol>
<li><mark>HTML5</mark></li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>
</li>
<li>서버 개발 기술
<ol type="i">
<li><s>JDBC</s></li>
<li>Servlet</li>
<li>JSP</li>
<li>AJAX</li>
</ol>
</li>
<li>프레임워크
<ol type="a">
<li>MyBatis</li>
<li><b>Spring</b></li>
</ol>
</li>
</ul>
</body>
</html>
ㅁ 문제 2 - 표 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
thead {
background-color: aqua;
}
th {
background-color: red;
}
#d1 {
background-color: darkorange;
}
#d2 {
background-color: yellow;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<td colspan="5" align="center"><b>하수정 보석 컬렉션</b></td>
</tr>
</thead>
<tr>
<th rowspan="5">제품리스트</th>
<th>코드</th>
<th>분류</th>
<th>가격</th>
<th>구매가능 개수</th>
</tr>
<tr id="d1">
<td>01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr id="d1">
<td>01-469</td>
<td>가을</td>
<td>150,000원</td>
<td>1700</td>
</tr>
<tr id="d1">
<td>01-470</td>
<td>여름</td>
<td>950,000원</td>
<td>2500</td>
</tr>
<tr id="d1">
<td>01-471</td>
<td>봄</td>
<td>120,000원</td>
<td>3200</td>
</tr>
<tr>
<th colspan="3">총합</th>
<td id="d2">1,420,000원</td>
<td id="d2">8468</td>
</tr>
</table>
</body>
</html>
- [답]
<style>
thead{
background-color: aqua;
}
tbody{
background-color: orange;
}
tfoot{
background-color: yellow;
}
tbody th, tfoot th{ /*tbody 요소 안에있는 th 요소랑, tfoot 요소 안에있는 th 요소를 선택하기 위함*/
background-color:orangered;
}
</style>
- 첫 행은 thead, 마지막 행은 tfoot, 중간은 tbody로 선언.
- 특정 요소에 대해 더 구체적인 선택자가 정의된 경우, 그 선택자의 스타일이 우선 적용됩니다.
- 위 예제에서 tbody th와 tfoot th의 배경색이 orangered로 정의되어 있기 때문에, 이 스타일이 tbody와 tfoot의 기본 배경색을 덮어씌웁니다.
ㅁ 문제 3 - 표태그2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
thead {
background-color: pink;
color: white;
}
tbody {
background-color: yellow;
}
tfoot {
background-color: red;
color: blue;
}
caption {
color: red;
font-size: x-large;
}
input[type="button"]{
background-color: powderblue;
color: white;
}
</style>
</head>
<body>
<table border="1">
<caption><b>강의목록</b></caption>
<thead>
<tr>
<th>관</th>
<th>강의장</th>
<th>인원수</th>
<th>강의명</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td rowspan="6">1관</td>
<td rowspan="2">9 강의장</td>
<td rowspan="2">30명</td>
<td>오전 : 강보람 <input type="button" value="신청하기"></td>
</tr>
<tr>
<td>오후 : 강보람 <input type="button" value="신청하기"></td>
</tr>
<tr>
<td rowspan="2">10 강의장</td>
<td rowspan="2">23명</td>
<td>오전 : 홍길동 <input type="button" value="신청하기"></td>
</tr>
<tr>
<td>오후 : 홍길동 <input type="button" value="신청하기"></td>
</tr>
<tr>
<td rowspan="2">11 강의장</td>
<td rowspan="2">27명</td>
<td>오전 : 김말순 <input type="button" value="신청하기"></td>
</tr>
<tr>
<td>오후 : 김말순 <input type="button" value="신청하기"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">많이 신청해주세요!</th>
</tr>
</tfoot>
</table>
</body>
</html>
- [답]
<td>오전 : 강보람 <button>신청하기</button></td>
button{
background-color:skyblue;
color:white;
}
=======================================================================================
ㅁ HTML 종합실습문제1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="/server/test/do">
고객명 : <input type="text"> <br>
전화번호 : <input type="tel"> <br>
E-mail : <input type="email"> <br> <br>
<fieldset>
<legend>피자 사이즈</legend>
<input type="radio" name="size" value="s">Small<br>
<input type="radio" name="size" value="m">Medium<br>
<input type="radio" name="size" value="l">Large<br>
</fieldset>
<fieldset>
<legend>토핑 선택</legend>
<input type="checkbox" name="topping" value="bacon">베이컨<br>
<input type="checkbox" name="topping" value="cheese">치즈<br>
<input type="checkbox" name="topping" value="onion">양파<br>
<input type="checkbox" name="topping" value="mushroom">버섯<br>
</fieldset>
<br>
희망 배송 시간 : <input type="time" name="time"> <br> <br>
배송 시 요청사항 : <textarea name="" id=""></textarea> <br> <br>
<input type="submit" value="주문하기">
</form>
</body>
</html>
ㅁ HTML 종합실습문제2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="/server/test/do">
<fieldset>
<legend>납품자 정보</legend>
<ol>
<li>납품자명 : <input type="text" name="name" placeholder="name"> </li> <br>
<li>email : <input type="email" name="email" placeholder="answs@naver.com"> </li> <br>
<li>홈페이지 : <input type="url" name="homepage" placeholder="http://"> </li>
</ol>
</fieldset>
<fieldset>
<legend>납품정보</legend>
<ul>
<li>상품명 : <input type="text" name="productName"> </li> <br>
<li>납품수량 : <input type="text" name="number" placeholder="최소 100"> </li> <br>
<li>납품등급 : <input type="range"> </li> <br>
<li>기타사항 : <textarea name="etc"></textarea> </li>
</ul>
</fieldset>
<br>
<input type="submit" value="send message">
</form>
</body>
</html>
ㅁ HTML 종합실습문제3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>회원가입</h1>
<form action="/server/test/do" style="border: 1px solid black;">
<fieldset>
<legend>필수 입력 사항</legend>
<table>
<tr>
<th>ID</th>
<td><input type="text" size="30" placeholder="아이디 10글자 이내" name="id"></td>
<td><input type="button" value="중복 확인"></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" size="30" placeholder="영문,숫자,특수문자 포함 8자 이상" name="pw"></td>
<td></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="password" size="30" name="pwCheck"></td>
<td></td>
</tr>
<tr>
<th>Email</th>
<td><input type="email" size="30"></td>
<td>
<select name="emailSelect">
<option value="self" selected>직접입력</option>
<option value="naver">naver.com</option>
<option value="gamil">gmail.com</option>
<option value="daum">daum.net</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>추가 정보</legend>
프로필 사진 : <input type="file" name="file"> <br> <br>
성별 : <input type="radio" name="gender" value="M" checked> 남자
<input type="radio" name="gender" value="F"> 여자 <br><br>
생년월일 : <input type="date" name="birthday"> <br> <br>
취미 <br>
<input type="checkbox" name="hobby" value="baseball"> 야구
<input type="checkbox" name="hobby" value="basketball"> 농구
<input type="checkbox" name="hobby" value="football"> 축구 <br>
<input type="checkbox" name="hobby" value="study" checked> 공부
<input type="checkbox" name="hobby" value="music"> 음악감상 <br>
<input type="checkbox" name="hobby" value="etc"> 기타 : <input type="text" name = >
<br><br>
자기소개 <br>
<textarea name="self-introduce" rows="5" cols="60"></textarea>
</fieldset>
<br>
<input type="submit" value="회원가입">
<input type="reset" value="다시입력">
<input type="button" value="이전으로"> <br>
</form>
</body>
</html>
ㅁ HTML 종합실습문제4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
thead, tfoot {
text-align: center;
background-color: coral;
color: white;
}
#eee {
background-color: bisque;
}
</style>
</head>
<body>
<form action="insert.no" method="post">
<fieldset>
<legend>공지사항 작성하기</legend>
<table>
<tr>
<th>제목</th>
<td><input type="text" name="title" required placeholder="제목을 입력하시오."
size="30"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea name="content" required placeholder="내용을 입력하시오."
rows="10" cols="33" style="resize: none;" ></textarea></td>
</tr>
<tr>
<th>첨부파일</th>
<td><input type="file" name="uploadFile"></td>
</tr>
</table>
<br>
<input type="submit" name="submit" value="작성하기">
</fieldset>
<table border="1">
<thead>
<tr>
<td>번호</td>
<td colspan="2">제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
</thead>
<tbody id="eee">
<tr>
<td>9</td>
<td width="400px">공지사항 제목 9</td>
<td><input type="button" name="quick" value="바로가기"></td>
<td width="100px">user01</td>
<td width="100px">2021-03-29</td>
<td>34</td>
</tr>
<tr>
<td>6</td>
<td>공지사항 제목 6</td>
<td><input type="button" name="quick" value="바로가기"></td>
<td>anws445</td>
<td>2021-03-12</td>
<td>67</td>
</tr>
<tr>
<td>3</td>
<td>공지사항 제목 3</td>
<td><input type="button" name="quick" value="바로가기"></td>
<td>testg12</td>
<td>2021-03-01</td>
<td>98</td>
</tr>
<tr>
<td>2</td>
<td>공지사항 제목 2</td>
<td><input type="button" name="quick" value="바로가기"></td>
<td>palwe3</td>
<td>2021-01-02</td>
<td>85</td>
</tr>
<tr>
<td>1</td>
<td>공지사항 제목 1</td>
<td><input type="button" name="quick" value="바로가기"></td>
<td>xml23</td>
<td>2020-01-02</td>
<td>124</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">전체공지사항 갯수</td>
<td colspan="2">5개</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
'03. 웹 표준 기술 > HTML' 카테고리의 다른 글
| 07. 폼 관련 태그 (0) | 2024.08.05 |
|---|---|
| 03. 표 관련 태그 05. 멀티미디어 관련 태그 (1) | 2024.08.02 |
| 1. HTML5 - (1) 웹 통신 기초, HTML 개요, 개발 환경 설정 (0) | 2024.08.02 |
