HTML 태그들

내가 정확히 모르고 있었던 태그들에 대해 정리해보았다.

 

b, strong tag ==> 글자를 굵게(bold) 지정

strong 태그는 알고 있었지만 b태그가 따로 존재하는 것은 모르고 있었다.

둘의 기능은 같지만, semantic tag의 기능으로는 strong이 어울린다.

 

i, em tag ==> 글자를 기울이게(italic) 지정

이 둘도 b와 strong처럼 기능은 같지만, emphasized(강조, 중요한)의 의미를 가진 em태그가

semantic tag의 기능으로 적합하다.

 

pre tag ==> pre태그 안의 text는 작성된 그대로 브라우저에 표시된다.

 

q tag ==> 인용문 지정 (큰따옴표로 감싸게 된다)

blockquote tag ==> 긴 인용문 블록 지정 (들여 쓰기 적용)

 

a(anchor) tag의 속성(Attribute)

*a tag는 HTML의 핵심기능으로 Hyper Link(한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능)의 역할을 담당하고 있다.

 

-href ==> 이동하고자 하는 경로의 값을 받는다.

ex) 절대 URL 경로, 상대 URL 경로, 페이지 내의 id값을 갖는 요소, mailto(메일 보내기), javascript(javascript 문법)등을 값으로 사용 가능하다. 

 

audio tag ==> 오디오 파일을 삽입할 수 있다.

-src ==> 음악 파일 경로
-preload ==> 재생 전에 음악 파일을 모두 불러올 것인지 지정
-autoplay ==> 음악 파일을 자동의 재생 개시할 것인지 지정
-loop ==> 음악을 반복할 것인지 지정
-controls ==> 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.

 

*브라우저별 지원하는 음원파일 형식

Browser	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES(24~)	YES	YES
Safari	YES	YES	NO
Opera	YES(25~)	YES	YES

*type="audio/mp3" 이런 식으로 타입을 지정할 수 있고 생략도 가능하다.

 

 

video tag ==> 비디오 파일을 삽입할 수 있다.

-src ==> 동영상 파일 경로
-poster ==> 동영상 준비 중에 표시될 이미지 파일 경로
-preload ==> 재생 전에 동영상 파일을 모두 불러올 것인지 지정
-autoplay ==> 동영상 파일을 자동의 재생 개시할 것인지 지정
-loop ==> 동영상을 반복할 것인지 지정
-controls ==> 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
-width ==> 동영상의 너비를 지정
-height ==> 동영상의 높이를 지정

 

*브라우저별 지원하는 비디오 파일 형식

Browser	MP4	WebM	Ogv
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES(21~)	YES	YES
Safari	YES	NO	NO
Opera	YES(25~)	YES	YES

*type="video/mp4" 이런 식으로 타입을 지정할 수 있고 생략도 가능하다.

 

*audio video는 html5에서 새롭게 추가된 태그이기에 IE8이하에서는 사용 불가하다.

 

참고: poiemaweb.com/html5-tag-image-multimedia