목차
type 정의 type 구문 - <a> 경우 type 구문 - <button> 경우 type 구문 - <embed> 경우 type 구문 - <input> 경우 type 구문 - <link> 경우 type 구문 - <menu> 경우 type 구문 - <object> 경우 type 구문 - <ol> 경우 type 구문 - <script> 경우 type 구문 - <source> 경우 type 구문 - <style> 경우
type 정의
태그 종류에 따라 의미 다름.
<button> - 버튼 타입 지정
<input> - 표시방법 및 입력 가능값 종류 지정
<a>, <embed>, <link>, <object>, <script>, <source>, <style> - MIME 타입 (= 인터넷 미디어 타입) 지정
<ol> - 순서 표현하는 값 유형 지정.
1. type 속성 지원 태그 종류
<a> , <button> , <embed> , <input> , <link> , <menu> , <object> , <ol> , <script> , <source> , <style>
2.
주요 최신 브라우저 모두 지원.
type 구문 - <a> 경우
목차
<a> type 예제
<a href="https://homzzang.com" type="text/html">홈짱닷컴</a>
<a> type 정의
링크된 문서의 인터넷 미디어 유형(이전의 MIME 유형) 지정.
href 속성이 설정된 경우만 사용.
사용여부는 권고사항이라, 실무에선 거의 사용 X
모든 브라우저 지원.
<a> type 구문
<a type="media_type ">
<a> type 속성값
media_type
링크된 문서의 인터넷 미디어 타입 지정. (지원종류 확인 )
type 구문 - <button> 경우
목차
<button> type 예제
<form action="/action_page .php" method="get">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br><br>
<label for="nick">별명:</label>
<input type="text" id="nick" name="nick"><br><br>
<button type="submit" value="확인">확인</button>
<button type="reset" value="초기화">초기화</button>
</form>
<button> type 정의
버튼 유형 지정.
<button> 요소의 type 속성은 반드시 지정할 것. (∵ 브라우저마다 <button> 요소의 type 속성 기본값이 다를 수 있음.) 모든 브라우저 지원.
<button> type 구문
<button type="button|submit|reset">
<button> type 속성값
button|submit|reset
button - 클릭 가능 버튼
submit - FORM 데이터 제출용 버튼
reset - FROM 데이터 초기화 버튼
type 구문 - <embed> 경우
목차
<embed> type 예제 <embed> type 정의 <embed> type 구문 <embed> type 속성값 <embed> type 예제
<embed type="image/jpg" src="https://source.unsplash.com/random">
결과보기
<embed> type 정의
삽입된 콘텐츠(= src 속성값)의 인터넷 미디어 타입(이전의 MIME 타입) 지정.
<embed> type 구문
<embed type="media_type ">
<embed> type 속성값
media_type
삽입된 콘텐츠의 인터넷 미디어 타입 지정. (지원종류 확인 )
type 구문 - <input> 경우
목차
<input> type 예제
<form action="/action_page .php">
<label for="name">이름: </label>
<input type="text" id="name" name="name">
<input type="submit" value="확인">
</form>
결과보기
<input> type 정의
입력 허용 데이터 유형과 입력창 표시 방법 지정.
데이터 유효성 보장 X (∴ 유효성 검사는 서버에서 별도로 해야 함.)
기본값: text
모든 브라우저 지원.
<input> type 구문
<input type=" value ">
<input> type 속성값
button - 클릭 가능한 버튼 (주로 스크립트 활성화 위해 JS와 사용)
checkbox - 체크박스
color - 색상 선택기
date - 날짜 입력 제어 (년, 월, 일 (시간 없음))
datetime-local - 날짜 및 시간 입력 제어 (년, 월, 일, 시간 (시간대 없음)
email - 이메일
file - 파일 선택 필드 및 파일 업로드 위한 "찾아보기" 버튼
hidden - 숨겨진 입력 필드
image - 이미지로 된 제출 버튼
month - 월 및 연도 입력 제어 (시간대 없음)
number - 숫자 입력
password 암호 입력
radio - 라디오 버튼
range - 슬라이더 컨트롤과 같은 범위 제어
reset - 리셋 버튼 (= 데이터 초기화)
search - 검색 문자열 입력
submit - FORM 데이터 제출 버튼
tel - 전화번호 입력
text - (기본값) 한 줄 텍스트 입력
time - 시간 입력 제어 (시간대 없음)
url - URL 입력
week - 주 및 연도 입력 제어 (시간대 없음)
type 구문 - <link> 경우
목차
<link> type 예제
<link rel="stylesheet" type="text/css" href="style.css">
<link> type 정의
링크된 문서/리소스의 미디어 타입 지정.
가장 일반적인 값: text/css
생략 시 브라우저는 rel 속성의 값을 보고 자체 판단. (예: rel="stylesheet" 경우, type 속성값이 "text/css"라고 가정.)
모든 브라우저 지원.
<link> type 구문
<link type="media_type ">
<link> type 속성값
media_type
링크된 문서의 미디어타입 지정. (지원종류 확인 )
type 구문 - <menu> 경우
목차
<menu> type 예제
<style>
div {background:yellow;border:1px solid gray;padding: 10px;}
</style>
<div contextmenu="hzmenu">
<p>Firefox 브라우저로 이 박스에서 마우스 오른쪽 버튼 클릭</p>
<menu type="context" id="hzmenu">
<menuitem label="새로고침" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
<menu label="공유하기">
<menuitem label="트위터" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
<menuitem label="페이스북" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
</menu>
<menuitem label="이 페이지를 이메일" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
</div>
<menu> type 정의
메뉴 타입 지정.
주요 최신 브라우저 지원 X (단, Firefox 8.0+ 브라우저만 type="context"에 한해 지원.)
<menu> type 구문
<menu type="list|context|toolbar">
<menu> type 속성값
list|context|toolbar
list - (기본값) 리스트 메뉴. 사용자가 수행하거나 활성화할 수 있는 명령 목록(li 요소)context - 내용 메뉴. (사용자가 명령과 상호작용 전에 메뉴 활성화 필요)toolbar - 툴바 메뉴. (명령 활성화해 즉시 사용자가 명령과 상호 작용 가능)
type 구문 - <object> 경우
목차
<object> type 예제
<object data="https://source.unsplash.com/random" type="image/jpg" width="500" height="300">
</object>
결과보기
<object> type 정의
어브젝트의 인터넷 미디어 타입 지정.
<object> type 구문
<object type="media_type ">
<object> type 속성값
media_type
어브젝트 데이터의 인터넷 미디어 타입 지정. (지원 종류 확인 )
type 구문 - <ol> 경우
목차
<ol> type 예제
<ol type="1"> <!--숫자-->
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<ol type="a"> <!--영문 소문자-->
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<ol type="A"> <!--영문 대문자-->
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<ol type="i"> <!--로마자숫자 소문자-->
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<ol type="I"> <!--로마자숫자 대문자-->
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
결과보기
<ol> type 정의
순서있는 리스트의 순서값 표시 유형 지정.
<ol> type 구문
<ol type="1|a|A|i|I"> ...</ol>
<ol> type 속성값
1 - 숫자a - 영문 소문자A - 영문 대문자i - 로마자숫자 소문자I - 로마자숫자 대문자
type 구문 - <script> 경우
목차
<script> type 예제
<p id="demo"></p>
<script type="application/javascript">
document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";
</script>
결과보기
<script> type 정의
스크립트 타입 지정.
<script> type 구문
<script type="script_type ">
<script> type 속성값
script_type
스크립트 타입 지정. (자주 쓰는 일반값은 아래와 같음.)
JavaScript MIME 경우 - application/javascript (기본값) 또는 application/ecmascript
module 경우 - 준비 중
또 다른 MIME 타입 - src 속성은 무시됨.
전체 지원 목록 확인하기
type 구문 - <source> 경우
목차
<source> type 예제
<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
당신 브라우저는 audio 태그 지원 X
</audio>
<source> type 정의
미디어 소스의 인터넷 미디어 타입 (기존의 MIME 타입) 지정.
<source> type 구문
<source type="media_type ">
<source> type 속성값
media_type
미디어 리소스의 인터넷 미디어 타입 지정.
video/ogg
video/mp4
video/webm
audio/ogg
audio/mpeg
전체 미디어 타입 보기
type 구문 - <style> 경우
목차
<style> type 예제
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<p>그누보드/영카트 제작관리</p>
결과보기
<style> type 정의
<style> 태그 안 내용의 인터넷 미디어 타입 (기존 MIME 타입) 지정.
기본값: text/css (∴ 생략해도 잘 작동)
모든 브라우저 지원.
<style> type 구문
<style type="media_type ">
<style> type 속성값
media_type
스타일시트 내용의 인터넷 미디어 타입 지정.
