<img> 태그는 HTML 문서에 이미지를 삽입한다.
<img src="images/apple.jpg" alt="사과">
- src 속성을 통해 경로를 설정해주는 것은 필수
- alt 속성은 이미지에 대한 설명 : 웹 접근성이 향상된다. 스크린리더가 alt 값을 읽어 사용자에게 이미지를 설명한다. 또한 네트워크 오류, 컨텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에 속성값이 대신 보여진다.
- height : 픽셀 단위의 이미지 높이 (단위 없는 정수)
- width : 픽셀 단위의 이미지 너비 (단위 없는 정수)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image_Media</title>
</head>
<body>
<h2>이미지 태그</h2>
<img width="200" src="../image.png" alt="wak" />
<img height="120" src="../image.png" alt="wak" />
</body>
</html>
절대경로 vs 상대경로
절대경로
: 리소스(이미지)의 절대경로는 말 그대로 절대적인 고유한 경로를 지정하는 것.
- 웹 이미지 절대경로 ex) http://www.naver.com/apple.png >>> http 프로토골로 시작해서 전체 경로를 입력한다.
- 웹 이미지 절대경로 ex) /apple.png >>> 루트('/') 디렉터리부터 시작하는 경우 현재 도메인이 자동으로 앞에 붙는다.
- PC 컴퓨터 절대경로 ex) C:\user\honggildong|apple.png
절대경로를 이용하면 웹에서 이미지가 사라지거나 내 컴퓨터에서 만든 파일을 다른 곳으로 옮길 때 해당 절대경로를 다시 수정해야하는 불편함이 있다. 그래서 작업중인 폴더에 이미지를 옮기고 상대적인 위치를 가리킴으로써 불편함을 해소할 수 있다.
루트 디렉터리
: 최상위 디렉터리를 말한다. 윈도우의 경우 C:\ , 맥의 경우 \
상대경로
: 상대경로는 현재 문서를 기준으로 경로를 인식하는 방법이다.
- index.html 에서 동일한 위치에 있는 apple.png를 가져오는 방법 → src="apple.png" 또는 src="./apple.png"
- index.html 의 상위 폴더에 이미지가 있는 경우 → src="../apple.png"
- index.html 의 하위 폴더에 이미지가 있는 경우 → src="하위폴더/apple.png"
<audio> 태그
: HTML 문서에 소리 콘텐츠를 넣을 때 사용
: src 속성 또는 <source> Element를 사용하여 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 선택한다.
<h2>오디오 태그</h2>
<audio src="../assets/audio.wav" controls></audio>
<video 태그>
<h2>비디오 태그</h2>
<video width="400" src="../assets/video.MP4" poster="./image.png" controls type="video/mp4"></video>
오디오&비디오 태그 속성
- controls: 플레이어 화면에 컨트롤바를 표시한다.
- autoplay: 오디오나 비디오를 자동으로 실행한다. 크롬, 파이어폭스 브라우저는 자동재생 X. 만약 자동재생을 하고 싶다면 muted 속성을 사용하여 소리를 제거해야 한다.
- loop: 오디오나 비디오를 반복재생한다.
- muted: 오디오나 비디오의 소리를 제거한다.
- preload: 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다. 사용할 수 있는 값은 auto, metadata, none 이다. 기본적으로 preload="auto"가 사용된다.
- width, height: 비디오 플레이어의 너비와 높이를 지정한다. 둘 중 하나만 지정하면 나머지는 자동으로 계산하여 표시
- poster="파일이름" : <video> 태그에서 사용하는 속성으로, 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다.
하이퍼 링크 태그
: <a> 태그는 href 속성을 사용하여 다른 페이지나 같은 페이지의 특정위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼 링크를 만든다.
: target="_blank" 속성을 사용하여 새 탭에서 화면을 열 수 있다. (자주 사용)
<h2>하이퍼 링크</h2>
<a href="http://www.naver.com" target="_blank">네이버</a>와 <a href="http://www.google.com">구글</a>은 포털 사이트 이다.
<a href="#target">target 으로 이동</a>
<a href="mailto:xxxx.xxx@gmail.com">이메일 보내기</a>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div id="target">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
target 속성:
- _self: URL을 현재 브라우징 맥락에 표시 (기본값)
- _blank: URL을 새로운 브라우징 맥락에 표시. 보통 새탭이지만 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있다.
- _parent: URL을 현재 브라우징 맥락의 부모에 표시한다. 부모가 존재하지 않으면 _self와 동일
- _top: URL을 최상단 브라우징 맥락에 표시한다. 부모가 존재하지 않으면 _self와 동일
'HTML' 카테고리의 다른 글
| Head 태그 안에 배치할 수 있는 요소 (0) | 2024.01.22 |
|---|---|
| Form 태그 (0) | 2024.01.22 |
| Sementic 태그 | Inlin Element vs Block Element (0) | 2024.01.22 |
| HTML 태그 | 글꼴태그 | 목록태그 | 표태그 (1) | 2024.01.21 |
| HTML 이란? | Emmet ? (0) | 2024.01.21 |
댓글