[HTML] 링크, 미디어 태그 (<a>, <img>, <audio>, <video>) [3/15 Study]

 

 

HTML 링크, 미디어 태그 (이미지, 오디오, 비디오)

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

<a> - HTML: Hypertext Markup Language | MDN

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/img

<img>: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN

 

 

 

https://www.w3schools.com/html/html5_audio.asp

HTML Audio

https://www.w3schools.com/html/html5_video.asp

HTML Video

 

 

<a> - 링크 태그

 

: 웹 페이지나 외부 사이트 연결 태그입니다. anchor의 약자임

<a>태그는 anchor의 약자로 , 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다. 따라서 <a>태그에는 링크(link)의 목적지를 가리키는 href 속성이 필요합니다.

<a href="연결할 링크의 경로"> 내용 </a>

* href="#" 연결할 링크의 경로에 # 을 넣게되면 실제로는 연결되지않는, 링크 역할만 하도록 만들 수 있습니다.

이걸을 널링크(null link)라고 합니다!

 

 

<a>태그에서 사용할 수 있는 속성값

 

1) href

:  웹 문서의 경로, 사이트 주소 이동할 웹 문서 또는 웹 사이트 주소 명시할 수 있습니다.

 

Value	Description
절대 URL	웹사이트 URL (href=”http://www.example.com/default.html”)
상대 URL	자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”)

 

 

2) target

: 새 창 or 새 탭에서 링크를 열 때 사용

Value	Description
_blank	새로운 탭 or 창
_self	현재 탭 or 창
_parent	현재 화면을 불러낸 부모 탭 or 창, 없으면 현재 탭 or 창
_top	최상위 탭 or 창, 없으면 현재 탭 or 창

 

 

3) title

: 링크의 툴팁을 표시 (커서를 올렸을 때 나오는 설명)

<a href="연결할 링크의 경로" title="링크 내용에 대한 설명">

 

 

 

<img> - 미디어 태그

 

 

: 이미지 삽입

웹 페이지에 이미지를 삽입할때 사용하는 태그입니다. <img>태그 하나에 1개의 이미지를 삽입할 수 있습니다.

inline 태그이고, 반드시 src 속성을 사용해서 이미지 경로를 지정해야 합니다.

 

<img src="images/eun_frontend.png" alt="My Page">

 

이미지의 속성

Attribute	Description
width	너비
height	높이
alt	이미를 설명해주는 텍스트 추가
title	툴팁(커서 올렸을때 설명 나오는 것)
usemap	이미지 맵(하나의 이미지에 여러개의 링크를 만드는 것)

 

 

 

<audio> - 미디어 태그

 

: 음악 삽입

audio 태그 내부에 source 태그를 통해 다양한 타입의 오디오 포맷을 입력해주면, 브라우저가 알아서 지원하는 포맷으로 재생합니다.

<audio src="/examples/media/eun_frontend.mp3" controls><audio>

 

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

 

 

 

<video> - 미디어 태그

: 영상 삽입

 

<video width="640" height="360" controls>
   <source src="assets/video/eun_frontend.mp4" type="video/mp4">
</video>

 

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

 

 

 

 

 

 

 

https://inpa.tistory.com/entry/HTML-%F0%9F%8F%B7%EF%B8%8F-%ED%83%9C%EA%B7%B8-%EC%9A%94%EC%95%BD%ED%91%9C#%3Clink%3E

🏷️ HTML 태그</> 종류 총모음

 

 

 

 

🔥마무리

오늘은 링크태그와 미디어 태그에 대해서 알아보았다.

우선 링크태그는 href만 알았는데 다른 속성도 알게되서 좋았고 <a>태그는 어디에서나 많이 쓰이는 태그이기 때문에 나중에 내가 홈페이지를 만들게 되면 링크태그를 자주 사용하게 될 것같다.

미디어 태그에 대해서는 어떻게 웹 페이지에 나오게 하는지 궁금했었던 내용인데 경로를 입력해서 이미지나 오디오를 삽입 하는게 신기했다. 추가적으로 video 태그 속성으로 autoplay, muted를 같이 사용하는게 사용자에게 더 좋다라는것도 알게되었다!

오늘 하루도 화이팅😊