HTML
HTML 입력 양식 태그, 구조화
haventmetyou
2023. 10. 5. 14:57
입력 양식 태그
HTML5 문서 구조화
공간 분할 태그
| 블록 형식 태그 | 인라인 형식 태그 |
| div 태그 | span 태그 |
| h1~h6 태그 | a 태그 |
| p 태그 | input 태그 |
| 목록 태그 | 글자 형식 태그 |
| 테이블 태그 | 입력 양식 태그 |
시맨틱 태그
| 태그 | 설명 |
| header | 머리말(페이지 제목, 페이지 소개) |
| nav | 하이퍼링크들을 모아 둔 내비게이션 |
| aside | 본문 흐름에 벗어나는 노트나 팁 |
| section | 문서의 장이나 절에 해당하는 내용 |
| article | 본문과 독립적인 콘텐츠 영역 |
| footer | 꼬리말(저자나 저작권 정보) |
텍스트 가운데 정렬
div 안에 text-align: center;
표 가운데 정렬
table 안에 margin-left: auto;margin-right: auto;
회원가입 서식 작성
<!DOCTYPE html>
<html>
<head>
<title>연습 1</title>
</head>
<body>
<form>
<fieldset>
<legend>회원등록</legend>
<section>
<article>
<table border="1" summary="회원가입 서식 작성" style="margin-left: auto;margin-right: auto;">
<caption>회원가입 서식 작성</caption>
<thead>
<tr>
<th><label>*이름</label></th>
<td><input type="text" required></td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2" style="text-align: center;"><input type="submit" value="전송" disabled><input type="reset" value="취소"></td>
</tr>
</tfoot>
<tbody>
<tr>
<th><label>*사진</label>
<td><input type="file" value="파일 선택" 선택된 파일 없음 required></td>
</tr>
<tr>
<th><label>*아이디</label></th>
<td><input type="text" placeholder="아이디는 8글자 이상." required></td>
</tr>
<tr>
<th>*비밀번호</th>
<td><input type="text" placeholder="대소문자와 숫자, 특수문자를 적어도 하나씩 사용 10글자 이상." size="55" required></td>
</tr>
<tr>
<th><label>*비밀번호 확인</label></th>
<td><input type="text" size="55" required></td>
</tr>
<tr>
<th><label>*이메일</label></th>
<td><input type="text" required>@
<select>
<option>naver.com</option>
<option>직접입력</option>
</select></td>
</tr>
<tr>
<th><label>*생년월일</label></th>
<td><input type="date" name="연도-월-일" required></td>
</tr>
<tr>
<th><label>*성별</label></th>
<td><input id="man" type="radio" name="gender">
<label for="man">남자</label>
<input id="woman" type="radio" name="gender" checked>
<label for="woman">여자</label></td>
</tr>
<tr>
<th><label>*연락처1</label></th>
<td><input type="text" placeholder="010-123(4)-5678" required></td>
</tr>
<tr>
<th><label>*주소</label></th>
<td>우편번호: <input type="text" required><br>
도로명 주소:<br><input type="text" size="45" required><br>
상세주소: <input type="text" required></td>
</tr>
<tr>
<th><label>가입경로</label></th>
<td><select>
<option>지인</option>
</select></td>
</tr>
<tr>
<th><label>취미</label></th>
<td><select multiple="multiple">
<option selected>축구</option>
<option>농구</option>
<option>야구</option>
</select>
</td>
</tr>
<tr>
<th>관심 분야</th>
<td><input type="checkbox" checked>HTML <input type="checkbox">CSS <input type="checkbox">Javascript</td>
</tr>
<tr>
<th>이메일 수신 여부</th>
<td><input type="radio" checked>예 <input type="radio">아니요</td>
</tr>
</tbody>
</table>
</article>
</section>
</fieldset>
</form>
</body>
</html>
까먹을 수 있는 부분
table 안 summary는 테이블 제목
table 내용 가운데 정렬 style="margin-left: auto;margin-right: auto;"
입력하면 사라지는 텍스트 placeholder
텍스트 크기 input 안에 size 명령어
type radio, checkbox 선택 checked
option 선택 selected
submit 버튼 비활성화 disabled