[attribute] HTML - type 속성 ★★★ - 요소 타입 지정 (= type속성 = 타입속성)

1. type 정의
2. type 구문 - <a> 경우
3. type 구문 - <button> 경우
4. type 구문 - <embed> 경우
5. type 구문 - <input> 경우
6. type 구문 - <link> 경우
7. type 구문 - <menu> 경우
8. type 구문 - <object> 경우
9. type 구문 - <ol> 경우
10. type 구문 - <script> 경우
11. type 구문 - <source> 경우
12. 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> type 정의
• <a> type 구문
• <a> type 속성값

---

<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 예제
• <button> type 정의
• <button> type 구문
• <button> type 속성값

---

<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> 경우

목차

1. <embed> type 예제
2. <embed> type 정의
3. <embed> type 구문
4. <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 예제
• <input> type 정의
• <input> type 구문
• <input> type 속성값

---

<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> type 정의
• <link> type 구문
• <link> type 속성값

---

<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 예제
• <menu> type 정의
• <menu> type 구문
• <menu> type 속성값

---

<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> type 정의
• <object> type 구문
• <object> type 속성값

---

<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 정의
• <ol> type 구문
• <ol> type 속성값

---

<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 예제
• <script> type 정의
• <script> type 구문
• <script> type 속성값

---

<script> type 예제

 

<p id="demo"></p>

<script type="application/javascript">

document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";

</script>

 

결과보기

---

<script> type 정의

 

스크립트 타입 지정.

• type 속성은 <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 예제
• <source> type 정의
• <source> type 구문
• <source> type 속성값

---

<source> type 예제

 

<audio controls>

  <source src="song.ogg" type="audio/ogg">

  <source src="song.mp3" type="audio/mpeg">

  당신 브라우저는 audio 태그 지원 X

</audio>

---

<source> type 정의

 

미디어 소스의 인터넷 미디어 타입 (기존의 MIME 타입) 지정.

• IE9 이상 주요 최신 브라우저 모두 지원.

 

---

<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 정의
• <style> type 구문
• <style> type 속성값

---

<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

스타일시트 내용의 인터넷 미디어 타입 지정.

• text/css - (기본값) 텍스트로 스타일. (※ 현재 지원되는 유일값)
• 미디어 타입 전체 목록 보기