이미지 태그 - <img>
이미지를 넣고자 할 때 사용하는 태그
src : 보여줄 이미지의 주소. 필수 속성
width : 이미지의 너비. 픽셀(px) 또는 %로 값 부여
height : 이미지의 높이. 픽셀(px) 또는 %로 값 부여
border : 이미지 테두리의 굵기 (HTML5에서 지원하지 않는다)
vspace : 이미지와 텍스트 사이의 위아래 여백 (HTML5 에서 지원하지 않는다)
align : 텍스트와의 상관관계 위치. top, middle, bottom, left, right가능 (HTML5에서 지원하지 않는다)
alt : 이미지가 없거나 로딩되지 않을 때 대체되는 텍스트
title : 마우스를 이미지에 올려 놓았을 때 풍선 도움말로 보이는 텍스트
비디오 태그 - <Video>
웹 페이지에서 동영상을 볼 수 있게 만들어 주는 기능을 수행
HTML5 이전에는 플러그인을 사용해야만 가능했지만 HTML5에서는 비디오 태그를 통해 동영상을 보여줄 수 있다.
<video> 태그의 src 속성을 이용하여 비디오를 추가하거나 src 속성을 설정하지 않고 <source>태그를 두어 비디오를 추가할 수 있다.
src : 비디오 파일의 경로 지정
poster : 비디오가 준비중일 때 보여질 이미지 파일의 경로
width : 비디오의 너비
height : 비디오의 넓이
controls : 비디오 재생 도구를 출력할 지 결정
autoplay : 비디오를 자동 재생할 지 결정
loop : 비디오를 반복 재생할 지 결정
<video>태그의 src속성을 설정하지 않고 <source>태그를 이용하여 비디오를 추가할 수도 있다. <source>태그를 이용하여 비디오를 추가할 경우 브라우저의
코덱 상황에 맞게 비디오를 선택하여 플레이하므로 여러 방식으로 인코딩된 동영상을 넣어주어 사용한다.
- <source> 태그를 이용하는 방법
type : 비디오 파일의 코덱 정보
오디오 태그 - <audio>
웹 페이지에서 소리 컨텐츠를 재생하기 위한 태그
HTML5부터 사용할 수 있는 태그
<video> 태그와 마찬가지로 <source> 태그를 이용할 수 있다
src : 오디오 파일의 경로 지정
controls : 오디오 재생 도구를 출력할 지 결정
autoplay : 오디오를 자동 재생할 지 결정
loop : 오디오를 반복 재상할 지 결정
프레임 태그 - <iframe>
웹 페이지에 컨텐츠 삽입을 목적으로 사용되는 태그
문서 내에 다른 문서를 포함할 수 있다
src : 프레임의 내에 보여질 경로 지정. 유효한 URL이어야 한다.
width : 프레임의 너비
height : 프레임의 높이
sandbox : 추가되는 프레임에 제한을 두고 속성. 보안성을 높이기 위해 사용되는 HTML5에서 추가된 속성
srcdoc : 프레임의 내에 보여질 내용 지정. 올바른 HTML이나 XML형식을 가져야한다. HTML5부터 사용 가능
HTML5 시맨틱 태그
문서 구조를 정의하는 HTML5의 태그
<body> 태그 내에서 영역을 구분하는 용도로 사용된다
기본적으로 <div> 태그와 같은 역할을 하지만 시멕틴 태그가 가지는 의미는 검색엔진이나 그 이외의 기계적인 동작들을 수행될 때, 웹 페이지를 쉽게
이해할 수 있게 해준다.
- 주요 HTML5 시멘틱 태그
<header> : 헤더 부분, 사이트 소개, 로고, 메뉴, 머리글 등
<footer> : 푸터 부분. 사이트 제작사나 저작권 관련 정보 등
<nav> : 네이게이터 부분. 사이트 내 메뉴 등
<section> : 실제 문서 내용
<article> : 문서 내용이 많은 경우 <section> 영역을 여러 개의 주제별로 <article>로 나눔
<aside> : 사이드 바와 같은 형태의 영역
'IT 관련,, > 중요문자 적어두기' 카테고리의 다른 글
| [웹/SPRING]스프링 MVC 패턴이란 무엇인가~ (0) | 2018.09.22 |
|---|---|
| [웹/JSP]MVC 패턴이란?? (0) | 2018.09.03 |
| [웹/SPRING]JSON 형식이란~ (0) | 2018.08.13 |
| [웹/SPRING]Ajax란~ (0) | 2018.08.12 |
| [웹/클라이언트]자바스크립트의 함수형태 (0) | 2018.08.09 |