바로바로 시각화 되는 것에 큰 매력을 느낌..!
글 작성 완료 하면 깨지는 부분들이 있어서, 그 부분들은 삭제했다.
여러 페이지와 괜한 구상도 상상하면서 셀프 동기부여중 끠햣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
tr, td, th { border: solid 1px #000000; }
</style>
</head>
<body>
<form method="post">
<label for="name">이름</label>
<input type="text" id="name" placeholder="이름을 입력하세요." required
minlength="2" maxlength="8">
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요" id="mail" required>
<label for="pw">비밀번호</label>
<input type="password" placeholder="최소 6글자, 최대 12글자" required
minlength="10" maxlength="15">
<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력"
min="10" max="40" step="5">
<label for="upload"파일 업로드></label>
<input type="file" id="upload" accept="image/png, image/jpg, image/gif">
<button type="submit">제출</button>
</form>
<label for="n1">한국</label>
<input type="checkbox" id="n1" name="country" value="한국">
<label for="n2">일본</label>
<input type="checkbox" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="checkbox" id="n3" name="country" value="중국">
<label for="n1">한국</label>
<input type="radio" id="n1" name="country" value="한국" checked>
<label for="n2">일본</label>
<input type="radio" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="radio" id="n3" name="country" value="중국">
<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>
<select name="job">
<option selected disabled>직업을 선택해 주세요.</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</tr>
</tfoot>
</table>
</select>
</body>
</html>
<header>
<h1>
<a href="#">
<img>
</a>
</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
<main role="main">
</main>
<section>
<h2>service</h2>
</section>
<section>
<h2>service</h2>
</section>
<article>
<h2>article title</h2>
<p>Nice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet you</p>
</article>
</main>
<aside></aside>
<footer></footer>
<div></div>
</body>
</html>