[HTML] a / input Tag
2024. 10. 4. 21:46ㆍHTML
a 태그를 이용하여 클릭하면 해당 경로로 접속되는 하이퍼링크를 만들어 보자.
그리고 input 태그의 다양한 속성에 대해서 알아보자.
<a href= ...>
- 해당 영역을 클릭하면 지정한 경로로 이동한다.
- 지금 코드에서는 td 안에 a 태그를 두었기 때문에 td 를 클릭하면 경로 이동된다.
<body>
<input type="color" name="" id="">
<table border="0.7" cellpadding="10" cellspacing="0" align="center">
<th bgcolor="#FFC5D0"colspan="20">돼지고기</th>
<details>
<summary>[펼치기.접기]</summary>
<tr>
<td align="center" bgcolor="#FFE3EE" rowspan="3">돼지머리</td>
<td align="center" bgcolor="#FFE3EE">목살</td>
<td align="center" bgcolor="#FFE3EE" rowspan="2">가브리살</td>
<td align="center" bgcolor="#FFE3EE" rowspan="2">등심</td>
<td align="center" bgcolor="#FFE3EE" rowspan="4">뒷다리살</td>
</tr>
<tr>
<td align="center" bgcolor="#FFE3EE" >항정살</td>
</tr>
<tr>
<td align="center" bgcolor="#FFE3EE">갈비</td>
<td align="center" bgcolor="#FFE3EE">갈매기살</td>
<td align="center" bgcolor="#FFE3EE">안심</td>
</tr>
<tr>
<td></td>
<td align="center" bgcolor="#FFE3EE">앞다리살</td>
<td align="center" bgcolor="#FFE3EE"colspan="2">삼겹살</td>
</tr>
<tr>
<td></td>
<td align="center" bgcolor="#FFE3EE" class="hidden">돈족</td>
<td></td>
<td></td>
<td align="center" bgcolor="#FFE3EE" class="hidden">돈족</td>
</tr>
<table border="0.7" cellpadding="10" cellspacing="0" align="center">
<tr>
<br><br>
<th align="center" bgcolor="#eee">내장부위</th>
<td align="center"><a href="https://namu.wiki/w/%EB%8F%BC%EC%A7%80%EA%B3%B1%EC%B0%BD">돼지곱창</a></td>
<td align="center"><a href="https://namu.wiki/w/%EB%A7%89%EC%B0%BD#s-2">돼지막창</a></td>
<td align="center"><a href="https://namu.wiki/w/%EC%83%88%EB%81%BC%EB%B3%B4">새끼보</a></td>
</tr>
<tr>
<th align="center" bgcolor="#eee">기타부위</th>
<td align="center">돼지기름</td>
<td align="center">뒷고기</td>
<td align="center">비계</td>
</tr>
<tr>
<th align="center" bgcolor="#eee">가공육</th>
<td align="center">베이컨</td>
<td align="center">소시지</td>
<td align="center">순대</td>
</tr>
<tr>
<th align="center" bgcolor="#eee">종돈</th>
<td align="center">듀록</td>
<td align="center">랜드레이스</td>
<td align="center">요크셔돼지</td>
</tr>
<tr>
<th align="center" bgcolor="#eee">브랜드육</th>
<td align="center">선진포크</td>
<td align="center">하이포크</td>
<td align="center">포크밸리</td>
</tr>
<tr>
<th align="center" bgcolor="#eee">기타</th>
<td align="center">프로틴플레이션</td>
</tr>
</table>
</details>
</table>
</body>
</html>
>> 결과
돼지고기
[펼치기.접기]
| 돼지머리 | 목살 | 가브리살 | 등심 | 뒷다리살 | 항정살 | 갈비 | 갈매기살 | 안심 | 앞다리살 | 삼겹살 | 돈족 | 돈족 | |||||
| 내장부위 | 돼지곱창 | 돼지막창 | 새끼보 |
|---|---|---|---|
| 기타부위 | 돼지기름 | 뒷고기 | 비계 |
| 가공육 | 베이컨 | 소시지 | 순대 |
| 종돈 | 듀록 | 랜드레이스 | 요크셔돼지 |
| 브랜드육 | 선진포크 | 하이포크 | 포크밸리 |
| 기타 | 프로틴플레이션 |
< input type="text" ... >
- 기본값
<input type="color" ... >
- 컬러를 스포이드로 추출할 수 있다.
- 웹 상에 있는 이미지의 색상을 알고 싶을 때 사용하면 유용하다.
< input type="radio" ... >
- 여러 선택지 중에 하나만 택할 때 사용한다.
- 기본값을 지정할 수도 있으나, 사용자의 선택에 따라서 달라진다.
< input type="submit" ... >
- 사용자가 선택한 내용을 제출한다.
- 해당 내용에 대한 처리를 할 수 있게 데이터를 넘겨주는 역할 (다른 페이지로 데이터를 보낼 수 있음)
<body>
<h1>input 연습</h1>
<hr>
<ul>
<li>input 태그는 대부분 form태그 내부에 배치하여 사용한다</li>
<li>input 태그는 사용자 입력 편의성을 위해 type을 변경할 수 있다</li>
<li>type을 지정하지 않으면 기본은 type="text"이다</li>
<li>form 태그의 action 속성은 입력값을 보낼 서버의 경로이다</li>
<li>submit을 클릭하면 form 내부의 모든 input을 제출(전송)한다</li>
</ul>
<!-- vscode 주석 처리하기 : ctrl + k, c -->
<!-- vscode 주석 해제하기 : ctrl + k, u -->
<form action="https://search.naver.com/search.naver">
<p><input type="text" name="query" placeholder="네이버 검색어 입력"
autocomplete="off" required autofocus></p>
<!-- <p><input type="text" name="where" placeholder="image,news,kin"></p> -->
<!-- <p>
<label><input type="radio" name="where" value="image">이미지</label>
<label><input type="radio" name="where" value="news">뉴스</label>
<label><input type="radio" name="where" value="kin">지식iN</label>
</p> -->
<p>
<select name="where">
<option value="">통합검색</option>
<option value="image">이미지</option>
<option value="news">뉴스</option>
<option value="kin">지식iN</option>
</select>
</p>
<p><input type="submit" value="검색"></p>
</form>
</body>
</html>
>>결과
input 연습
- input 태그는 대부분 form태그 내부에 배치하여 사용한다
- input 태그는 사용자 입력 편의성을 위해 type을 변경할 수 있다
- type을 지정하지 않으면 기본은 type="text"이다
- form 태그의 action 속성은 입력값을 보낼 서버의 경로이다
- submit을 클릭하면 form 내부의 모든 input을 제출(전송)한다
이번에는 수량을 입력받는 페이지를 만들어보자.
<body>
<h1>수량 입력받는 input</h1>
<hr>
<form>
<table>
<tr>
<td>
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fshopping.phinf.naver.net%2Fmain_3287948%2F32879481546.20221212152237.jpg&type=a340" width="500">
</td>
<td>
<p>가격 : 19,800원</p>
<p>수량 : <input type="number"
required
min="1" max="10" value="1" step="1"></p>
<p>옵션 :
<select>
<option value="small">1인분</option>
<option value="medium" selected>2~3인분</option>
<option value="large">4~5인분</option>
</select>
</p>
<p>
<input type="submit" value="구매">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
>> 결과
수량 입력받는 input
이번에는 input type 중에 "radio" 라는 속성을 이용하여, 설문 조사 페이지를 만들어 보자.
<style>
table {
border-collapse: collapse;
margin: 50px auto;
font-size: 12px;
}
td, th {
padding: 10px;
border: 1px solid #dadada;
}
th {
background-color: #f5f7f9;
}
</style>
</head>
<body>
<h1>능력단위평가표</h1>
<hr>
<form>
<table>
<thead>
<tr>
<th>능력단위요소</th>
<th>문항</th>
</tr>
</thead>
<tbody>
<tr>
<th>DBMS 설치하기</th>
<td>
<hr color="#dadada" size="1">
<p>
<!-- <font color="red">[문항1]</font> -->
<span style="color: red;">[문항1]</span>
파일시스템과 DBMS의 차이 및 장단점을 아는가 (배점:10)
</p>
<hr color="#dadada" size="1">
<p>
훈련교사:
<input type="radio" name="q1" value="5" checked>매우 우수하다
<input type="radio" name="q1" value="4">우수하다
<input type="radio" name="q1" value="3">보통이다
<input type="radio" name="q1" value="2">미흡하다
<input type="radio" name="q1" value="1">매우 미흡하다
</p>
</td>
</tr>
<tr>
<th>데이터베이스 오브젝트 생성하기</th>
<td>
<hr color="#dadada" size="1">
<p>
<!-- <font color="red">[문항1]</font> -->
<span style="color: red;">[문항2]</span>
DBMS 사용자 계정의 패스워드 설정 방법을 아는가 (배점:10)
</p>
<hr color="#dadada" size="1">
<p>
훈련교사:
<input type="radio" name="q2" value="5">매우 우수하다
<input type="radio" name="q2" value="4">우수하다
<input type="radio" name="q2" value="3">보통이다
<input type="radio" name="q2" value="2">미흡하다
<input type="radio" name="q2" value="1">매우 미흡하다
</p>
</td>
</tr>
<tr>
<th>기본 SQL 작성하기</th>
<td>
<hr color="#dadada" size="1">
<p>
<!-- <font color="red">[문항1]</font> -->
<span style="color: red;">[문항3]</span>
DDL, DML을 구분하여 알고 있는가 (배점:10)
</p>
<hr color="#dadada" size="1">
<p>
훈련교사:
<input type="radio" name="q3" value="5">매우 우수하다
<input type="radio" name="q3" value="4">우수하다
<input type="radio" name="q3" value="3">보통이다
<input type="radio" name="q3" value="2">미흡하다
<input type="radio" name="q3" value="1">매우 미흡하다
</p>
</td>
</tr>
<tr>
<th>고급 작성하기</th>
<td>
<hr color="#dadada" size="1">
<p>
<!-- <font color="red">[문항1]</font> -->
<span style="color: red;">[문항4]</span>
제약조건을 적용하여 테이블을 생성할 수 있는가 (배점:10)
</p>
<hr color="#dadada" size="1">
<p>
훈련교사:
<input type="radio" name="q4" value="5">매우 우수하다
<input type="radio" name="q4" value="4">우수하다
<input type="radio" name="q4" value="3">보통이다
<input type="radio" name="q4" value="2">미흡하다
<input type="radio" name="q4" value="1">매우 미흡하다
</p>
</td>
</tr>
<tr>
<th>절차형 SQL 작성하기</th>
<td>
<hr color="#dadada" size="1">
<p>
<!-- <font color="red">[문항1]</font> -->
<span style="color: red;">[문항5]</span>
시퀀스 및 인덱스를 알고 활용할 수 있는가 (배점:10)
</p>
<hr color="#dadada" size="1">
<p>
훈련교사:
<input type="radio" name="q5" value="5">매우 우수하다
<input type="radio" name="q5" value="4">우수하다
<input type="radio" name="q5" value="3">보통이다
<input type="radio" name="q5" value="2">미흡하다
<input type="radio" name="q5" value="1">매우 미흡하다
</p>
</td>
</tr>
<tr>
<th>응용 SQL 작성하기</th>
<td>
<hr color="#dadada" size="1">
<p>
<!-- <font color="red">[문항1]</font> -->
<span style="color: red;">[문항6]</span>
오라클 제약조건의 종류와 특징을 알고 있는가 (배점:10)
</p>
<hr color="#dadada" size="1">
<p>
훈련교사:
<input type="radio" name="q6" value="5">매우 우수하다
<input type="radio" name="q6" value="4">우수하다
<input type="radio" name="q6" value="3">보통이다
<input type="radio" name="q6" value="2">미흡하다
<input type="radio" name="q6" value="1">매우 미흡하다
</p>
</td>
</tr>
<tr>
<th>고급 작성하기</th>
<td>
<hr color="#dadada" size="1">
<p>
<!-- <font color="red">[문항1]</font> -->
<span style="color: red;">[문항7]</span>
자바에서 JDBC를 이용하여 DB에 접속할 수 있는가 (배점:10)
</p>
<hr color="#dadada" size="1">
<p>
훈련교사:
<input type="radio" name="q7" value="5">매우 우수하다
<input type="radio" name="q7" value="4">우수하다
<input type="radio" name="q7" value="3">보통이다
<input type="radio" name="q7" value="2">미흡하다
<input type="radio" name="q7" value="1">매우 미흡하다
</p>
</td>
</tr>
<tr>
<th>고급 작성하기</th>
<td>
<hr color="#dadada" size="1">
<p>
<!-- <font color="red">[문항1]</font> -->
<span style="color: red;">[문항8]</span>
날짜 형태의 자료를 처리할 수 있는가 (배점:10)
</p>
<hr color="#dadada" size="1">
<p>
훈련교사:
<input type="radio" name="q8" value="5">매우 우수하다
<input type="radio" name="q8" value="4">우수하다
<input type="radio" name="q8" value="3">보통이다
<input type="radio" name="q8" value="2">미흡하다
<input type="radio" name="q8" value="1">매우 미흡하다
</p>
</td>
</tr>
<tr>
<th>고급 작성하기</th>
<td>
<hr color="#dadada" size="1">
<p>
<!-- <font color="red">[문항1]</font> -->
<span style="color: red;">[문항9]</span>
문제상황을 인식하고 해결할 수 있는가 (배점:10)
</p>
<hr color="#dadada" size="1">
<p>
훈련교사:
<input type="radio" name="q9" value="5">매우 우수하다
<input type="radio" name="q9" value="4">우수하다
<input type="radio" name="q9" value="3">보통이다
<input type="radio" name="q9" value="2">미흡하다
<input type="radio" name="q9" value="1">매우 미흡하다
</p>
</td>
</tr>
<tr>
<th>평가 근거자료1</th>
<td align="center"><a href="">홍길동2A.zip</a></td>
</tr>
<tr>
<th>평가 근거자료 첨부1</th>
<td>
<p style="border: 1px solid #dadada;
width: fit-content;">
<input type="file">
</p>
<input type="checkbox">삭제(파일명:홍길동2A.zip)
</td>
</tr>
<tr>
<th>교수자 총평</th>
<td>
<textarea style="resize: none;" cols="60" rows="5"></textarea>
</td>
</tr>
</tbody>
</table>
<style>
button {
border: 0;
background-color: #00acac;
color: white;
font-weight: bold;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 20px;
cursor: pointer;
margin: 10px 20px;
}
</style>
<p align="center">
<button>←</button>
<button>→</button>
</p>
<p align="center">
<input type="submit" value="채점하기">
</p>
</form>
</body>
</html>
>> 결과
능력단위평가표
Java 코드를 작성할 때는 콘솔창의 오류 코드를 유심히 보았다면,
html은 오류라고 뜰게 없기 때문에 항상 F12를 눌러 개발자 도구로 확인하는 습관을 가지는게 좋다.
'HTML' 카테고리의 다른 글
| [HTML] 농협 사이트 만들어 보기 (0) | 2024.10.05 |
|---|---|
| [HTML] display (0) | 2024.10.05 |
| [HTML] img 태그 (1) | 2024.10.04 |
| [HTML] table (0) | 2024.10.04 |