Something good can work for you / HTML : img, input 태그

HTML : img, input 태그

부트캠프(END)/Web2022. 7. 6. 21:11

<img> 태그

이미지 파일을 넣어줄 수 있는 태그. 파일을 넣어도 되고, 주소값을 넣어도 된다.

- src : 이미지 파일 또는 URL로 이미지를 출력할 수 있도록 해 준다. (필수)

- width/height : 너비/높이

- title : 풍선 도움말

<figure> 태그

문자와 이미지를 함께 나타내도록 해 준다. (카드같은 느낌)

- figurecaption : 어떤 문자를 넣을 지 지정한다.

<!-- 
img태그의 속성
src : 필수! 이미지 파일 또는 URL로 이미지를 출력한다.
width : 너비
height : 높이
title : 풍선 도움말
<figure>, <figurecaption> -> 문자와 이미지를 함께 나타내도록 해 준다.
 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
  </head>
  <body> 
  <h1>원격(URL)</h1>
  <img src="https://movie-phinf.pstatic.net/20150922_278/14429125873720WOoU_JPEG/movie_image.jpg?type=m886_590_2">
  <h1>실제 이미지</h1><!-- ./==현재 파일이 있는 위치 -->
  <img src="./image/m.jpg">
  <h1>img->figure</h1>
  <figure>
  	<img src="./image/m.jpg" title="이터널 선샤인">
  	<figcaption>이터널 선샤인</figcaption>
  </figure>
   </body>
</html>

<input> 태그

<input type=?>
[한 줄 입력칸]
type=text : ID, 이름...
type=password : 비밀번호(***필터링되어 나타남)
[버튼]
type=submit : 데이터 전송 버튼
type=reset : 초기화 버튼
type=button : 기능이 없어 자바스크립트로 기능을 연결해 주어야 한다.
type=image : submit
type=radio|checkbox : 그룹 설정이 필요하다.
[기타]
type=date, number, file,...
type=hidden : 수정, 삭제, ID, PWD등 사용자에게서 숨길 때

[여러 줄 입력칸]
<textarea> : rows(height), cols(width)
<select> : 콤보박스

input 태그 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
  </head>
  <body> 
  한줄 문자열 입력 : <input type=text size=10><br>
  비밀번호 입력: <input type=password size=10><br>
  라디오버튼 : <input type=radio name=sex>남자 <input type=radio name=sex>여자<br>
  체크박스 : <input type=checkbox>운동1
  		  <input type=checkbox>운동2
  		  <input type=checkbox>운동3
  		  <input type=checkbox>운동4
  		  <input type=checkbox>운동5 <br>
  달력 출력 : <input type=date size=20><br> 		  
  숫자 출력 : <input type=number max="100" min="1"><br>
  파일 업로드 : <input type=file size=20><br>
  버튼=>전송 : <input type=submit value="전송">
  	<input type=button value="우편번호 검색">
  	<input type=reset value="취소">
  	<input type=image src="https://movie-phinf.pstatic.net/20150922_278/14429125873720WOoU_JPEG/movie_image.jpg?type=m886_590_2" width=100><br>
  여러줄입력 : <textarea rows="10" cols=50"></textarea><br>
  드롭다운 메뉴 : <select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  </select>
   </body>
</html>

↓↓↓

Insert title here 한줄 문자열 입력 :
비밀번호 입력:
라디오버튼 : 남자 여자
체크박스 : 운동1 운동2 운동3 운동4 운동5
달력 출력 :
숫자 출력 :
파일 업로드 :
버튼=>전송 :
여러줄입력 :
드롭다운 메뉴 :

table 태그 + input 태그 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </script>
  </head>
  <body>
 <form>
  	<table width=250>
  		<tr>
  			<td width=15% align="right">ID</td>
  			<td width=85%><input type=text size=15 required></td>
  		</tr>
  		<tr>
  			<td colspan="2"><input type=text size=15 placeholder="ID" id="text"></td>
  		</tr>
  		<tr>
  			<td width=15% align="right">Password</td>
  			<td width=85%><input type=password size=15 required></td>
  		</tr>
  		<tr>
  			<td colspan="2" align="center">
  			 <input type=submit value="로그인">
  			 <input type=button value="취소"></td>
  		</tr>
 	</table>
 </form>
  </body>
</html>

↓↓↓

Insert title here

저작자표시 비영리 변경금지 (새창열림)

'부트캠프(END) > Web' 카테고리의 다른 글

CSS : 구조적 선택자 (0)	2022.07.08
CSS : 속성, 선택자 (0)	2022.07.07
HTML : 기본 태그 (0)	2022.07.04

ID

Password

HTML : img, input 태그

↓↓↓

↓↓↓

'부트캠프(END) > Web' 카테고리의 다른 글

티스토리툴바