semantic tag
<!Document>~</html><!--자동완성 키= !+tab-->
<body></body><!--내용 컨텐츠-->
<ul>
<li></li> <!--'●'점박이-->
</ul>
<ol> <!--순서가 있는 태그-->
<li></li>
</ol>
<article></article> <!--검색엔진에 걸리게하는 tag-->
<section></section> <!--하나의 그룹/section 안에 article 사용가능-->
<head></head> <!--설정 사항 한번만 사용-->
<header></header><!--body 안에서 사용. 써도 되고 안써도 됨-->
<p></p><!--문단-->
<nav><!--메뉴에 사용-->
<!--공백문자 : 스페이스/ 공식 : 영문 1번, 한글 2번-->
<a href="~" target="_blank"></a><!--target="_blank" : 새창-->
<img src="" alt="" title=""><!--이미지 태그. src에 들어가는 './'경로는 상대 경로다. / alt: 1.이미지 부재시 알림멘트. 2.로딩 속도가 느릴때 안내멘트. / title: 마우스를 그림 화면에 올릴 시 풍선 멘트--> <!-- 크기를 가진 이미지를 중앙정렬하고 싶다면, text-align: center 속성을 주면 됨. 또한 이미지 본래의 부모 박스에 , object-fit: cover 값을 주면 됨 -->
<audio src="./~" cotrols autoplay loop preload="auto"></vedio>
<vedio src="./~" cotrols muted autoplay loop playsline preload="auto"></vedio>
<!--controls: 컨트롤러 / autoplay: 자동실행 / loop: 반복문 / playsline: 동영상이 자동재생 되게 하고, 전체모드가 되지 않도록 함 / preload: 먼저 다운 후 실행 / autoplay는 원래 지원이 되는 곳이 있고 안되는 곳이 있음. 보통 지원하지 않음.-->
<table border='1' width='~' height='~'></table><!--마크업 태그에는 px 생략가능/ 80%:창의 80% 늘려도 80%만큼 자동 설정됨(반응형,모바일 경우 '%'로 잡아줌)-->
<caption></caption><!--caption은 table_tag바로 아래 작성-->
<tr><!--하나의 행을 만듬.-->
<th></th><!--table_header: td와 똑같은 기능을 하나, 자동중앙정렬,볼드체표기 와 같은 특징을 지니고 있다.-->
</tr>
<tr>
<td></td><!--table_data: table열의 값을 가짐-->
</tr>
...
<tr>
<td width="100" colspan="2"></td><!--위치 데이터를 포함 2개의 열을 통합.-->
</tr> <!-- colspan: 열 통합 -->
<tr>
<td width="100" rowspan="2"></td><!--위치 데이터를 포함 2개의 행을 통합.-->
</tr> <!-- rowspan: 행 통합 -->
<table border="1" cellspacing="0" cellpadding="0"></table> <!-- cellspacing: 표 선, cellpadding: 글자와 표 사이의 간격 *cellspacing과 cellpadding은 기본 '0'으로 기본 설정 -->
1. <form> 태그 속성 값
- action : 폼을 전송할 URL지정(파일명)
- enctype : 폼 데이터 전송시 암호화 방법 지정
- method : 폼 데이터 전송 방법 지정
- get : URL뒤에 파라미터값 붙여서 전송. 간단한 데이터 전송. 데이터가 주소란에 표시 되므로 보안 유지 안됨.
- post : http 헤더에 숨겨서 전송. 일정 크기 이상의 데이터 전송. 보안성이 우수.
- name : 폼 이름. 자바스크립트에서 사용.
2. <input> tag
<input type="" size="" maxlength disabled> <!-- html 입력 태그/ type:입력태그 형식 / size : 박스 크기/maxlength 입력받을 문자열 크기/ name: 필수 속성 / disabled : 실행 안됨 / value : 박스 값 -->
<input type="radio" checked /><!-- radio 버튼 생성. 둘중 하나를 선택. checked는 초기값을 선택 -->
<input type="checkbox" checked /><!-- checkbox는 선택해도 되고 안해도 됨. 보통 취미나 관심분야를 선택하는 콘텐츠에 많이 사용 됨. 응용: 윙 배너 -->
<select>
<option>~</option>
<option selected>~</option>
<option>~</option>
</select><!--combo box: dropdown_tag / selected_tag를 사용할 때 init값 선택 cf)check box, radio box에는 checked 사용-->
<textarea name="content" cols="80" rows="10" resize="none">내용 작성</textarea><!-- resize='none' 사이즈를 조절할 수 업게 함. -->
<text_tag>
<b>bold체</b><br />
<i>이텔릭체</i><br />
<ins>밑줄문자</ins><br />
<u>밑줄문자</u><br />
<del>취소선</del><br/>
<s>취소선</s>
<sub>아래첨자</sub><br />
<sup>위첨자</sup><br />
벨로그에선 b태그 안먹힘
이텔릭체
밑줄문자
이건 되네
취소선
취소선
아래첨자아래첨자
위첨자위첨자
코딩뉴비