목차
접기
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fieldset, legend 태그</title>
</head>
<body>
<form action="">
<fieldset style="width: 300px; border: 1px solid red; color: blue;">
<legend><b>로그인</b></legend>
<table>
<tr>
<td><label for="id">아이디</label></td>
<td><input type="text" id="id" name="id"></td>
</tr>
<tr>
<td><label for="password">비밀번호</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="로그인">
<input type="button" value="취소"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>연관 있는 입력 양식 그룹으로 묶는 방법
- fieldset, legend 태그 사용하기
HTML5의 대표적인 공간 분할 태그
- div
- 블록 형식으로 공간 분할
- 한줄을 다 잡아먹는다.
- span
- 인라인 형식으로 공간 분할
- 자신의 글자 크기만큼 영역 차지
- 왼쪽에서 오른쪽으로 쌓임
시맨틱 태그
- 시맨틱 태그를 사용한 시맨틱 웹 구현
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| css 선택자 종류 / 기본 선택자 (0) | 2021.06.02 |
|---|---|
| div, span 분할태그 (0) | 2021.06.02 |
| 시맨틱태그_적용한 HTML5 문서 구조 (0) | 2021.06.02 |
| 시맨틱태그_설명(html 웹 문서 구조) (0) | 2021.06.02 |
| select tag의 optgroup, label 사용하여 셀렉트 그룹 만들기 (0) | 2021.06.02 |