[ html5 ] 이미지, 링크 , 엔티티 코드, 동영상

이미지, 링크, 엔티티 코드, 동영상

 

 

1. 이미지

이미지 확장자 

jpg ( jpeg ) : 기본

png : 투명이미지

svg : W3C가 개발한 개방형 표준으로 벡터포맷유형

gif : 움짤

WebP : 구글에서 개발한 이미지 포맷 - gif, png, jpg 포맷을 대체하귀 위해 개발  

 

<img src="이미지 주소" alt="대체텍스트필수">

 

 

태그	설명	mdn	W3Schools
img	이미지	바로가기	바로가기

속성	설명	형식
src	이미지 경로( 필수 )	src = "./이미지명.jpg"
alt	이미지 대체 텍스트 ( 필수 )	alt = "이미지안에글자 또는 타이틀"
width	너비	width="100", width="100px"
height	높이	height="100", height="100px"
title	툴팁	title="이미지 설명"

 

* alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로 접근성 차원에서는 매우 유용합니다. 또는 네트워크 오류, 콘텐츠 차단, 사용하지 않는 링크 등의 이미지를 표수 할 수 없는 경우에는 이속성의 값을 대신 보여줍니다. 

 

 

 

2. figure / figcaption 

 

태그	설명	mdn	W3Schools
figure	한 단위가 되는 요소 묶을때 이미지 또는 삽화 등의 독립적인 콘텐츠를 감싸는 태그	바로가기	바로가기
figcation	이미지를 설명 해당 콘텐츠에 대한 캡션(설명)을 제공	바로가기	바로가기

 

 

 <figure>
        <img src="https://www.example.com/image.jpg" 
        alt="Beautiful scenery of mountains" 
        width="600" height="400">
        <figcaption>Beautiful scenery of mountains during sunset</figcaption>
</figure>

 

 

 

 

figure 태그

 

 

 

3. 폴더 경로 

./ : 현재 폴더 ( 생략가능 )

../ : 상위 폴더

/ : 최상위( 절대위치 ) 

 

경로

 

 

4. 링크

다른 페이지나 같은 페이지 웹주소 연결, 이메일, 내부(외부) 페이지 책갈피 

<a href="URL주소" target="새탭" title="툴팁" > 컨텐츠 </a>

태그	설명	mdn	W3Schools
a	하이퍼 링크	바로가기	바로가기

속성	설명	형식
href	페이지 URL 웹 주소 : naver, nate..  반드시 http:// zip파일, pdf, ppt, 등등 파일연결  tel : 전화번호 mailto : 이메일  내부 링크	href="파일명.html" href="http://www.naver.com" href="./파일명.pdf" href="tel:010-0000-1111" href="#아이디명"
target	_self : 기본값 _blank : 새탭 _parent: 부모에 표시 부모가 존재하지 않으면 _self와 동일 _top : URL 최상단 브라우징 맥락	target ="_blank"
title	툴팁	title ="네이버로 이동합니다."

 

 

 

같은 디렉토리

 

<a href="about.html">About Us</a>

<a href="./about.html">About Us</a>

 

상위디렉토리

<a href="../about.html">About Us</a>

 

루트디렉토리

<a href="/about.html">About Us</a>

 

앵커링크

 

같은 페이지 내 특정 섹션

<a href="#section1">Go to Section 1</a>

 

다른 페이지 내 특정 섹션

<a href="about.html#section1">다른페이지 특정위치</a>

 

 

기본 이메일 링크

<a href="mailto:example@example.com">Send Email</a>

 

 

전화걸기

<a href="tel:+1234567890">Call Us</a>

 

 

자바스크립트 실횅

<a href="javascript:alert('Hello World!')">Click Me</a>

 

클릭 시 페이지의 상단으로 이동

 

<a href="#">Back to Top</a>

 

 

4. 엔티티(entity) 코드 

 

- html 문서에서 특수 문자를 입력하기 위해 사용되는 코드 

기호	참조	설명
<	&lt;	레스댄(less-than)
>	&gt;	그레이터댄(grater-than)
"	&quot;	더블쿼테이션(이중인용부호)
&	&amp;	앤드(앰퍼센트)
공백	&nbsp;	한칸띄우기
ⓒ	&copy;	저작권(copyright)
™	&trade;	상표(trademark)
®	&reg;	등록상표(registered trademark)

 

 

 

5. 동영상

 

video

mdn

 

video의 의미
외부의 있는 다른 플러그인들을 이용해서 불렀으나 html5에서부터는 브라우저에서 가지고 있는 것으로 사용

video 요소의 속성
1. src : 미디어 파일의 경로
<video src="assets/video.mp4"> </video>​

2. width, height : 크기
<video src="assets/video.mp4" width="720" height="480" >​

3. controls : 컨트롤 UI보이기
<video src="assets/video.mp4" width="720" height="480" controls >

4. autoplay : 자동시작
<video src="assets/video.mp4" width="720" height="480" controls autoplay="true" >

5. preload : metadata
preload="auto"라고 하면 자동으로 다운로드하고
preload="none"이라고 하면 재생버튼을 눌러야 다운을 받는다.

6. poster : 멈췄을때 포스터
<video src="assets/video.mp4" width="720" height="480" controls preload="auto" poster="img/bigbang_poster.jpg" >

7.loop

8. muted :음소거
비디오에 포함된 오디오를 음소거할경우 지정 (기본값이 false)

​<video src="assets/video.mp4" controls preload="auto" poster="img/_poster.jpg" ></video>