728x90
이미지(IMG)
웹 페이지에 이미지를 사용하려면 <img> 태그를 사용한다.
이미지를 삽입할 때 <img>태그와 이미지의 너비와 높이를 설정하는 width와 height속성도 지정해야한다.
이미지 경로는 절대경로(무조건 최상위 위치)와 상대경로(html파일과 같은곳)로 입력하면 된다.
상대경로는 ./~로 시작되지만 ./를 생략해도 된다. 상대경로에서 현재 경로는 ./ 이고 하나 위 경로는 ../, 두 개 위 경로는 ../../ ~로 위치를 나타낸다.
이미지 파일 종류와 설명
| 포맷 | 설명 |
| jpg | 24비트 트루컬러, 사진 이미지, 파일크기를 줄일 수 있음 |
| png | 24비트 트루컬러, 무손실 압축, 휴대폰 등에서 고화질 유지, 최근 널리 사용 |
| gif | 8비트(256컬러), 무손실압축, 그래픽 이미지에서 널리 사용, 파일크기 작음 |
| svg | 벡터 그래픽 포맷, 확대시 손실 없음, 도형, 그래프에서 사용 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h3>Hiking road via Est-coast...</h3>
<img src="bike_road.jpg" title="Deck biking"> <!--jpg와 html문서가 같은 폴더 내에 존재-->
<img src="bike_road.jpg" width="300" title="Deck biking"> <!--높이도 300으로 설정-->
<img src="bike_road.jpg" width="300" height="100" title="Deck biking">
</body>
</html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div { border:solid 3px #eeeeee;
margin : 20px 0 0 20px; }
h3 {padding : 10px;}
p {padding : 10px;
line-height : 180%;}
</style>
</head>
<body>
<div>
<h3>렉돌 고양이</h3>
<img src="cat.jpg" height=100% width=100% align="center";>
<!-- 이미지 가운데 정렬하기 -->
<p>매우 조심스러운 성격으로 걸음걸이도 느리고 안아 올리면 몸에 <br>
힘을 빼고 축 늘어진다. 사람을 좋아하고 장난감을 가지고 놀거나 아이들과 노는 것을 좋아한다. </p>
</div>
</body>
</html
Audio / Video
웹 페이지에 오디오와 비디오를 재생하는 데에는 <audio>와 <video> 태그를 사용한다.
<audio controls> ~ </audio>를 안 써주면 화면에 플레이어가 안 보인다.
| 속성 | 설명 |
| src | 오디오 파일(경로 포함) 설정한다. |
| controls | 플레이어 화면에 컨트롤 바를 표시한다. |
| autoplay | 오디오나 비디오 소리를 자동 재생(크롬 브라우저에서는 정책적으로 자동실행이 안 됨)한다. |
| loop | 오디오나 비디오 소리를 반복 재생한다. |
| muted | 오디오나 비디오 소리를 제거한다. |
| preload | 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다. 사용할 수 있는 값은 auto, metadata, none. 기본값은 preload="auto"이다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio controls> <-- controls 를 빼면 플레이어가 보이지 않는다 -->
<audio src="savage.mp3" type="audio/mpeg">
</audio>
</body>
</html>
URL (Uniform Resource Locator)
URL 주소는 인터넷 상에 존재하는 HTML, Image, Audio, ..파일 등의 위치를 나타낸다. HTML 파일이 위치하는 경로를 기준으로 해서 Image, Audio, .. 등 파일의 위치를 지시하기 위해서 절대/상대경로를 지정하는데
▪ 절대경로는 현재 위치와 무관하게 최상위 위치로부터의 현재 위치를 지정하는 방식이고,
▪ 상대경로는 현재 위치를 기준으로 위치를 지정하는 방식이다.
상대경로는 ./~로 시작되지만 ./를 생략해도 된다. 상대경로에서 현재 경로는 ./ 이고 하나 위 경로는 ../, 두 개 위 경로는 ../../ ~로 위치를 나타낸다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="https://s.pstatic.net/static/www/mobile/edit/20220429/mobile_154324694137.png
">
</body>
</html>
'일단 해보는 코딩 > HTML' 카테고리의 다른 글
| [HTML] 테이블생성 (0) | 2022.06.15 |
|---|---|
| [HTML] Form 양식 (0) | 2022.06.15 |
| [HTML] 목록(list)와 하이퍼링크(Hyperlink OR Link) 삽입하기 (0) | 2022.06.14 |
| [HTML] HTML구조 (0) | 2022.06.14 |
| [HTML] 웹(Web) (0) | 2022.06.14 |