[HTML-02] 여러가지 중요 태그들

 

2019. 06. 12 필기

figure태그, a태그, map태그, quote태그, pre태그, list태그, meter태그, progress태그, table태그, object태그

 

● FIGURE 태그

<figure></figure> : 사진, 오디오, 비디오, 코드 등을 담는 컨테이너 역할
--- 여러 가지 자식 요소 포함 가능(img, code 등)
<figcaption></figcaption> : 이에 대한 설명하는 문구를 담는 태그(선택적)
--- figure 요소에서 한 번만 사용 가능

(예시)

<figure>
<img alt="예시" src="/images/hi.png">
<figcaption>한국인의 인사하는 모습</figcaption>
</figure>

 

● A 태그

a 태그 : 앵커라고도 함. 다른 페이지로 이동하는 링크를 생성할 때 사용

<a></a> : 박스모델의 클릭 이벤트에 대한 기본 이벤트핸들러 제공

하이퍼링크(Hyper Link) : 등록된 URL 주소로 다른 자원을 요청
=> href 속성 : 하이퍼링크를 클릭하면 저장된 URL 주소로 페이지 이동
--- 즉, 클릭이벤트에 의한6 요청자원의 URL 주소로 다른 자원을 요청하여 응답

 

HTML Escape 문자
 : HTML에서 사용 불가능한 문자를 표현

(예시)
공백 표시 --  
<>기호 표시 -- &lt;(<), &gt;(>)

 

target 속성 : 각 링크가 클릭되었을 때 새로운 페이지가 어떻게 오픈될지를 지정
_self : 현재 탭에서 새로운 페이지 오픈(default)
_blank : 새탭에서 페이지 오픈
_parent : 부모 프레임에 새로운 페이지 오픈
_top : 현재 탭에 새로운 페이지를 오픈하고 모든 프레임 취소

앵커(Anchor) : 박스모델을 클릭한 경우 현재 페이지에서 위치 이동

id 속성 : id="labelname" 형식으로 선언하여 이용

a태그를 이용하여 라벨 기능 구현 - 위치 설정

 

● MAP 태그

a태그 외에도 map태그 역시 하이퍼링크 기능을 제공한다.

<map></map> : 이미지 링크에 기능을 제공
=> 하위태그 : area 태그(*필수)

name 속성 : 태그의 이름을 속성값으로 설정

<area></area> : 이미지 내부에 영역을 설정하여 하이퍼링크 기능 제공
--- 즉, 이미지의 일부만 하이퍼링크가 걸리게 할 수 있다.
--- 이미지 왼쪽은 a링크, 오른쪽은 b링크 이런 식으로도 설정 가능

<area alt="예시코드" shape="rect" coords="">

 

shape 속성 : 영역의 모양 지정
--- rect(직사각형-default), circle, poly

coords 속성 : 도형을 구성하는 좌표값을 나타냄
--- 좌표값을 알기 위해서는 그림판 등으로 지정하고자 하는 영역의 왼쪽 위 모서리, 오른쪽 아래 모서리의 좌표값을 확인하여 순서대로 나열한다. (예시) coords="0,0,128,116"

usemap 속성 : map 태그의 이름을 속성값으로 설정

 

● QUOTE 태그

<quote></quote> : 인용문 태그.

<blockquote></blockquote> : 

<cite></cite> : 책, 영화, 그림 등의 작품 제목을 지정할 때 사용
cite 속성 : cite 태그와 달리 인용문의 출처 표시

 

● PRE 태그

<pre></pre> : 태그 내용을 변형하지 않고 있는 그대로 출력하는 태그
--- TML4 : xmp 태그, HTML5 : pre 태그

 

● LIST 태그

list 태그 : 항목을 나열하는 데 사용하는 태그
--- 텍스트, 이미지, 영상, 링크 등을 포함할 수 있다

<li></li> : 목록 출력 태그
=> 상위 태그 : <ol>~</ol>, <ul>~</ul>

<ol></ol> : 목록에 순서를 부여하여 출력

<dl></dl> : 목록 출력

List 태그

<ol><li> : 리스트에 번호를 부여하여 출력
<ul><li> : 번호 없이 불릿(●)으로 정렬 -- ● -> ○ -> ■ 순으로 불릿 인덱스 생성(이후 계속 검정네모)
<dl><dt><dd> : <dl> 태그생성 <dt> 항목명시 <dd> 항목에 대한 설명

=> 위 코드블럭 안의 코드를 그대로 복붙 시 다음과 같이 나타남(티스토리는 html태그를 인식하기 때문)

1.  : 리스트에 번호를 부여하여 출력
   
   •  : 번호 없이 불릿(●)으로 정렬
     

      : 

      태그생성 

      항목명시 

      항목에 대한 설명

● METER 태그

<meter></meter> : 배율(%)을 이미지 형식으로 출력

value 속성 : 현재 사용값을 속성값으로 설정

max 속성 : 최대값을 속성값으로 설정

 

● PROGRESS 태그

--- javascript와 함께 동적인 구현을 하는 데 많이 쓰인다

<progress>~</progress> : 진행상황을 이미지 형식으로 출력(value, max 속성 사용)

<button>~</button> : 버튼 출력하는 태그

type 속성 : 버튼 종류를 속성값으로 설정
onclick 속성 : 클릭 이벤트에 대한 이벤트 핸들러

script 태그 : 태그 내용으로 스크립트 프로그램 작성

type 속성 : 스크립트 종류를 속성값으로 설정

innerHTML : 특정한 html 태그 안에 들어갈 html 값

 

● TABLE 태그

: 표를 출력하기 위한 태그

하위태그로 tr태그가 반드시 포함되어야 함

<tr></tr> : 표 안에 행을 출력
하위태그=> th, td 태그

<th></th> : 행 안에 열을 출력(컬럼명)

<td></td> : 행 안에 열을 출력(컬럼값)

컬럼명과 컬럼값의 개수가 동일해야 한다 / 즉, tr태그의 하위태그 개수가 반드시 동일해야 한다

border 속성 : 외각선 출력 --- 0(미출력:default), 1(출력)

summary 속성 : 테이블에 대한 설명을 속성값으로 설명

<caption></caption> : 테이블에 제목 출력

<thead></thead>, <tbody></tbody>, <tfoot></tfoot>
 : 테이블의 머릿부, 중간부, 꼬리부 영역 표현(특정한 기능을 하는 게 아니라, 영역을 구분해주는 역할)

rowspan="n" : 아래로 n개의 행을 합침

colspan="n" : 옆으로 n개의 열을 합침

<embed></embed> : 멀티미디어 파일 재생 --- 플래시(Flash) 또는 Window Media 파일(WMA, WMV)

 

● OBJECT 태그

: 멀티미디어 파일을 재생하기 위한 태그

=> 하위태그 : param 태그

data 속성 : 속성값에 재생하고자 하는 멀티미디어 파일 경로(URL) 입력
type 속성 : 재생하고자 하는 멀티미디어 파일 유형을 입력(코덱)

<param> : 멀티미디어 파일 재생 관련 부가적인 정보를 제공

<audio> : 오디오 파일 재생
--- 재생 가능한 오디오파일 종류
--- 1. MPEG-1 Audio Layout3 : mp3 파일 - IE9 이상, 사파리, 크롬, 파이어폭스 등
--- 2. Ogg Vorbis : ogg 파일 - 오페라, 크롬, 파이어폭스 등

autoplay 속성 : 자동 재생 기능
controls 속성 : 재생 관련 패널 출력 
loop 속성 : 반복재생 기능 
muted 속성 : 음소거 기능
--- autoplay, controls, loop, muted 모두 속성값 생략 가능
preload 속성 : 오디오 파일의 로딩관련 속성값 설정
--- 속성값 : auto(default),none, metadata(앨범표지 등 미디어의 부속적인 정보)

<video></video> : 비디오 파일 재생
--- 1. H.264/AVC : mp4 파일 - IE9 이상, 사파리, 크롬, 파이어폭스 등
--- 2. Ogg Treora : ogg(ogv) 파일 - 오페라, 크롬, 파이어폭스 등
--- 3. WebM : webm 파일 - 오페라, 크롬, 파이어폭스 등

poster 속성 : 썸네일 이미지 설정 가능(영상이 재생되지 않을 때 이미지 파일 출력)