2018. 1. 22. 10:37ㆍ화면 속/HTML5
웹 상에 사진이나 동영상을 올리는 태그
기본적으로 사진과 동영상(multimedia)은 HTML의
<body>영역에 태그를 추가 합니다.
먼저, 이미지를 추가하는 태그는 다음과 같습니다.
(이런식으로 줄을 바꿔 쓰는건 개인적으로 선호하지는 않지만..)
바로 <img>입니다.
대표적인 attribute로는 src와 alt가 있습니다.
src는 이미지의 경로를 적어주는 영역이고,
혹시나 그 경로에 이미지 파일에 문제가 생겼을 경우
대안하는 텍스트 등을 보여주는 것이 alt의 영역입니다.
경로에 관한 것은 가볍게 정리해드린 곳이 있으니
참고바랍니다.
2018/01/16 - [광고쟁이의 IT_study/HTML5] - HTML5 LINK 연결하기
위의 경로는 1유저의 바탕화면에 있는 파일입니다.
*파일의 이름이 한글일 경우 인식을 못하는 경우가 있습니다.
사진을 이해하셨다면, 오디오나 동영상을 첨부하는 것도 같은 방식이니,
쉽게 이해하실 수 있을 것 같습니다.
먼저 audio입니다.
차이가 있다면, 닫는 태그</audio>가 있다는 것이겠네요.
controls는 필수 태그는 아니지만,
재생 도구를 나타내줄 것인지를 표시하는 어트리뷰트입니다.
동영상도 마찬가지이지만, 이미지와 다르게 조금 더 고급 기술(?)인
'멀티미디어'는 브라우저마다 지원하지 않는 경우도 있습니다.
하여서, 보통 동영상과 함께 아래와 같은 형식으로 사용됩니다.
동영상은 video 태그를 활용하며,
source 태그를 사이에 추가하여 주소를 적어주는 방법입니다.
둘 다 type 어트리뷰트는 생략이 가능합니다.
브라우저에 따른 오디오와 동영상 첨부 지원 여부는
후에 정리해 보도록하겠습니다 :)
'화면 속 > HTML5' 카테고리의 다른 글
| HTML5 UL과 OL의 차이, 리스트 만들기 (0) | 2018.01.17 |
|---|---|
| HTML5 LINK 연결하기 (0) | 2018.01.16 |
| HTML5 Tag의 기본, 다양한 HTML의 tag들(with body) (0) | 2018.01.05 |
| HTML5 Tag의 기본, 다양한 HTML의 tag들(with head) (0) | 2018.01.04 |
| HTML5의 특징, 시맨틱 웹(Semantic Web) (0) | 2018.01.02 |