728x90
01 입력 양식 태그
- 입력 양식
- 사용자에게 정보를 입력받는 요소
- 입력 양식 개요
- <form> 태그 : 영역 생성
- 입력 양식 종류
- 기본 입력 양식 태그
- <input> 태그의 type 속성을 이용해 다양한 기본 입력 양식 생성
<body>
<form action="">
<!--사용자가 입력하는 입력 양식-->
<input type="text"><br>
<input type="password"><br>
<input type="file"><br>
<input type="checkbox"><br>
<input type="radio">
<hr>
<!--보이지 않는 입력 양식-->
<input type="hidden"><br>
<!--버튼 3종-->
<input type="button"><br>
<input type="reset"><br>
<input type="submit"><br><br>
<input type="button" value="버튼"><br>
<input type="reset" value="취소"><br>
<input type="submit" value="전송"><br>
<input type="image" src="http://placehold.it/100x100">
</form>
</body>
- 간단한 입력 양식 생성
- 라디오 버튼의 name 속성을 이용해 여러 대상 중 하나만 선택하는 형태
<body>
<table border="0">
<!--1행-->
<tr>
<td><label for="username">이 름</label></td>
<td>
<input id="username" type="text">
</td>
</tr>
<!--2행-->
<tr>
<td><label for="gender">성 별</label></td>
<td>
<input type="radio" id="man" name="gender">
<label for="man">남자</label>
<input type="radio" id="woman" name="gender">
<label for="woman">여자</label>
</td>
</tr>
<!--3행-->
<tr>
<td colspan="2">
<input type="submit" value="가입">
</td>
</tr>
</table>
</body>
- 선택 가능한 입력 양식
1. 한 항목만 선택하기 : <select> 태그 이용
- 목록으로 보여주는 항목 중 하나 또는 여러 개를 선택할 때 사용
- 기본적으로 하나만 선택 가능
- <outgroup>, <option> 태그를 함께 사용
<body>
<h2>점심 메뉴</h2>
<form action="">
<select name="" id="">
<option value="">김밥</option>
<option value="">떡볶이</option>
<option value="">돈까스</option>
<option value="">라면</option>
</select>
</form>
</body>
2. 여러 항목 선택하기 : <select> 태그의 multiple 속성 사용
<body>
<h2>점심 메뉴</h2>
<form action="">
<select name="" id="" multiple>
<option value="">김밥</option>
<option value="">떡볶이</option>
<option value="">돈까스</option>
<option value="">라면</option>
</select>
</form>
</body>
3. 선택 옵션 묶기 : <optgroup> 태그 사용
<body>
<h2>점심 메뉴</h2>
<form action="">
<select name="" id="">
<optgroup label="분식">
<option value="">김밥</option>
<option value="">떡볶이</option>
<option value="">돈까스</option>
<option value="">라면</option>
</optgroup>
<optgroup label="중식">
<option value="">짜장면</option>
<option value="">짬뽕</option>
<option value="">탕수육</option>
<option value="">유린기</option>
</optgroup>
<optgroup label="한식">
<option value="">김치찌개</option>
<option value="">보리밥</option>
<option value="">된장찌개</option>
</optgroup>
</select>
</form>
</body>
- 연관 있는 입력 양식 그룹으로 묶기
- <fieldset> 태그, <legend> 태그
<body>
<form action="">
<fieldset>
<legend>입력 양식</legend>
<table border="0">
<tr>
<td><label for="name">이름</label></td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td><label for="email">이메일</label></td>
<td><input type="text" id="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit"></td>
<!--th로 두면 가운데로 간다-->
</tr>
</table>
</fieldset>
</form>
</body>
- 공간 분할 태그
- CSS로 원하는 레이아웃을 구성하기 위해 공간 분할
- HTML5의 대표적인 공간 분할 태그
- <div> 태그, <span> 태그
| div | 블록 형식으로 공간 분할 |
| span | 인라인 형식으로 공간 분할 |
1. 공간을 블록 형식으로 분할하기
<body>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
</body>
2. 공간을 인라인 형식으로 분할하기
- 자신의 글자 크기만큼 영역 차지
- 왼쪽에서 오른쪽으로 쌓임
<body>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
</body>
div -> h1, p, hr, li, ul, ol, table << 줄 바꿈O
span -> a태그, i 태그, input << 줄 바꿈X
- 시맨틱 태그
- 시맨틱 웹
- 특정 태그에 의미를 부여한 웹
- 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹
- 시맨틱 태그
- 시맨틱 태그를 사용한 시맨틱 웹 구현
시맨틱 태그를 적용하지 않은 코드
<body>
<div>
<!--헤더-->
<h1>HTML5 기본</h1>
</div>
<!--section-->
<div>
<!--nav-->
<ul>
<!--article-->
<li><a href="#">메뉴 - 1</a></li>
<li><a href="#">메뉴 - 2</a></li>
<li><a href="#">메뉴 - 3</a></li>
</ul>
</div>
<div>
<div>
<!--article-->
<h1>Lorem ipsum dolor sit amet consectetur?</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia tempora blanditiis nulla praesentium, quidem rerum animi cumque ut nam! Ea vero accusamus explicabo cum provident nam numquam perferendis totam necessitatibus?</p>
</div>
<div>
<!--article-->
<h1>Lorem ipsum dolor sit ametelit.nim pariatur magn</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque, placeat necessitatibus. Sunt exercitationem possimus, odit error architecto ipsam corrupti illo voluptate nesciunt quasi, quos rem culpa vitae officia a asperiores.</p>
</div>
</div>
<div>
<!--footer-->
<h5>대전광역시 유성구</h5>
</div>
</body>
둘 다 같은 결과로 나오기는 함!
728x90
'HTML' 카테고리의 다른 글
| [CSS] 레이아웃 구성 (0) | 2021.10.28 |
|---|---|
| [CSS] CSS3 속성 (0) | 2021.10.11 |
| [CSS] CSS3 기초 : 선택자와 단위 (0) | 2021.10.10 |
| [HTML] HTML5 기본 태그 (0) | 2021.10.09 |
| [HTML] 기본 개념 (0) | 2021.10.09 |
