[HTML5] 기본 태그 정리 -1
2021. 1. 20. 18:03ㆍWeb 개발/HTML5
들어가며
실습환경은 GoogleChrome, ATOM Version 1.53.0에 최적화되어 있습니다.
하나의 html 코드블럭에 기초적인 HTML 태그들을 정리하고 있습니다.
최종 업데이트 날짜 : 2021.01.20
<html>
<head> <!-- 본문에 나타나지는 않지만, 본문을 꾸며주는 역할 수행 -->
<title>웹사이트 제목</title> <!-- 크롬 기준 tab이름 -->
<meta charset="utf-8"> <!-- 작성한 문서의 encoding -->
<meta name="description" content="문서 설명">
<meta name="keywords" content="문서 키워드들">
<meta name="author" content="저자">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0"> <!-- 화면의 폭을 device-width 만큼 늘려라 / initial-scale : 확대 축소 기본 값. -->
<meta http-equiv="refresh" content="30 초 간격으로 새로고침 수행">
</head>
<body> <!-- 웹 브라우저 본문에 해당 -->
<header> <!-- 아무런 기능이 존재하지 않는 header , 의미론적인 태그-->
<h1> <!-- h1, h2, h3 ... h5 -->
<!-- a: anchor(앵커) -->
<!-- href로 Hypertext를 연결할 수 있다. -->
<a href="http://link.html">제목태그</a>
</h1>
</header>
<nav> <!-- nav Navigation 네비게이션 태그, 의미론적인 태그 -->
<ol> <!-- ol: ordered list -->
<li>리스트태그1</li> <!-- 1.* -->
<li>리스트태그1</li> <!-- 2.* -->
</ol>
</nav>
<ul> <!-- ul: unordered list -->
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
<section> <!-- section 섹션. 의미론적인 태그 -->
<article> <!-- article 본문을 의미하는 의미론적인 태그 -->
<!-- 2021.01.20 추가 -->
<!-- form 사용할 때는 method는 post, enctype은 아래 default 값으로 사용 -->
<!-- 정보를 드러내서 전달(url을 통해서 데이터를 전달) : get방식 -->
<!-- 정보를 드러내지 않고 전달(url이 아니라 다른 방법으로 데이터를 숨겨서 전달) : post방식 -->
<form action="http://action.py"
method="post"
enctype="multipart/form-data"
autocomplete="on"> <!-- submit을 누르면 action url로 이동 , autocomplete : 자동완성 -->
<!-- type은 사용자에게 요구하는 type, name은 url 뒤에 &~ 붙음 -->
<!-- autofocus 자동 커서 위치 -->
<!-- required 필수 작성 요구 -->
<!-- pattern 정규표현식으로 패턴 검사 -->
<input type="" name="" placeholder="요구메세지작성가능" autofocus>
<textarea>여러줄을 입력할 때 사용</textarea>
<input type="button" onclick="alert('JavaScript와 같이 사용')">
<input type="reset" value="재설정">
<input type="file" name="파일선택가능">
<input type="hidden" name="숨김" value="숨겨서전송할값">
<input type="submit" value="이름바꾸기">
<label for="아이디">레이블을사용하면의미를가진다</label>
<!-- 레이블을 클릭하면 input box로 커서가 이동 -->
<input id="아이디" type="text" name="url파라미터">
<h1>콤보박스</h1>
<select name="콤보박스">
<option value="밸류값">표시값</option>
<option value="밸류값">표시값</option>
</select>
<h1>라디오박스</h1>
<!-- checked 로 default check 여부 설정 -->
표시값<input type="radio" name="url파라미터" value="밸류값" checked>
표시값<input type="radio" name="url파라미터" value="밸류값">
<h1>다중선택</h1>
<!-- checked 로 default check 여부 설정 -->
표시값<input type="checkbox" name="url파라미터" value="밸류값">
표시값<input type="checkbox" name="url파라미터" value="밸류값">
</form>
</article>
<article> <!-- article 본문을 의미하는 의미론적인 태그 -->
<table>
<thead> <!-- table head -->
<tr> <!-- table row -->
<th>컬럼명 table head</th>
</tr>
</thead>
<tbody> <!-- table body -->
<tr>
<td>table data</td>
</tr>
</tbody>
<tfoot> <!-- table foot -->
<tr>
<td colspan="2">가로로 3칸 병합</td>
<td rowspan="3">세로로 2칸 병합</td>
</tr>
</tfoot>
</table>
</article>
</section>
<footer> <!-- footer 의미론적인 태그 -->
</footer>
</body>
</html>