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

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

 

 

1. <img> (image) 태그 

웹페이지에  이미지를 삽입(display) 할 때 사용하는 HTML 태그입니다.
(닫는 태그 없이 단독으로 사용되는 빈 요소, 즉 self-closing tag예요.)

포맷형식	특징	설명	용도
JPG (JPEG)	손실 압축 이미지	- 파일 용량이 작음 - 색 표현력 우수 - 배경 투명 지원 안됨	일반 사진, 웹 이미지
PNG	비손실 압축 이미지	- 투명 배경 지원 - 선명한 품질 유지 - 용량이 다소 큼	UI 아이콘, 로고, 투명 이미지
GIF	손실 압축 이미지	- 256색 제한 - 배경 투명 가능 - 애니메이션(움짤) 지원	간단한 움직이는 이미지
SVG	벡터 이미지	- 확대해도 깨지지 않음 - 코드로 표현됨 - 색, 크기 자유롭게 조절 가능	아이콘, 로고, 일러스트
WebP	손실/비손실 지원	- 구글 개발 - JPG, PNG, GIF 대체 목적 - 높은 압축률 + 품질 유지	웹 최적화 이미지, 썸네일, 배너 등

 

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

<img src="logo.png" alt="회사 로고" width="150" height="150">

태그	설명	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. 폴더 경로 

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

../ : 상위 폴더

/ : 최상위( 절대위치 ) : 실무에서 많이 사용

 

홍길동 폴더안에 자식 assets, img , index.html -> 형제

assets 폴더안에 자식 video.mp4

img 폴더안에 자식 img1.jpg, img2.jpg, img3.jpg - 형제 

 

 

 

경로

 

 

4. 링크

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

<a> = anchor (닻)
문서 안에서 위치(주소)를 연결하는 역할을 하기 때문에
‘닻을 내린다’는 의미에서 anchor라는 이름이 붙었어요.

 

<a href="https://www.example.com">Example 사이트로 이동</a>

<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 ="네이버로 이동합니다."
download	클릭 시 파일 다운로드	href="file.pdf" download
rel	현재 문서와의 관계 (보안·SEO용)	rel="noopener noreferrer"

 

 

 

속성	설명
href	링크할 URL 주소 (필수 속성)
target	링크 열릴 위치 지정 (_blank, _self, _parent, _top)
title	마우스를 올렸을 때 보이는 설명 툴팁
download	링크 클릭 시 다운로드 동작 수행

 

 

예시)

<!-- 기본 링크 -->
<a href="https://www.google.com">구글로 이동</a>

<!-- 새 창에서 열기 -->
<a href="https://www.naver.com" target="_blank">네이버 새 창</a>

<!-- 툴팁 + rel 속성 -->
<a href="https://example.com" target="_blank" title="새 탭에서 열기" >
  예제 사이트
</a>

<!-- 파일 다운로드 -->
<a href="/files/sample.pdf" download>PDF 다운로드</a>

 

같은 디렉토리

 

<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>

 

 

내부이동 

<a href="#section2">2번 섹션으로 이동</a>

<section id="section2">
  <h2>두 번째 섹션</h2>
</section>

 

다운로드 링크 

<a href="assets/resume.pdf" download>이력서 다운로드</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에서부터는 브라우저에서 가지고 있는 것으로 사용

 

 

속성	설명
src	비디오 파일 경로
controls	재생, 일시정지 등의 기본 제어 버튼 표시
autoplay	페이지 로드시 자동 재생
muted	음소거 상태로 시작 (autoplay 사용 시 자주 함께 사용됨)
loop	비디오가 끝나면 자동 반복 재생
poster	재생 전 보여줄 썸네일 이미지 지정
width / height	비디오 크기 설정
preload	로딩 방식 설정 (auto, metadata, none)

 

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

 

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

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