이미지 삽입 (IMG), URL (Uniform Resource Locator)

FrontEnd/HTML

by H_Develop 2022. 6. 15. 08:20

이미지 IMG : <img> 이미지 파일 경로 지정과, width, height 속성도 지정해야 한다.

(width 또는 height 하나만 지정을 한다면, 지정한 값에 맞춰 다른 방향의 크기도 같은 비율로 커진다.)
절대경로 : 무조건 최상위 위치부터 파일 위치 지정 (C:\ C드라이브 부터 시작.)
상대경로 : 현재 내가 있는 위치 기준으로 상대 파일 위치 지정 (html 파일 위치에서 img파일까지 가는 경로)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 <h3>Hiking road via East-coast...</h3>
 <img src="../01/bike_road.jpg" title="Deck biking">	 <!-- jpg와 html 문서가 같은 폴더 내 -->
 <img src="C:\HTML_SRC\01\bike_road.jpg" width="300" title="Deck biking"> <!-- 높이도 같아짐 -->
 <img src="bike_road.jpg" width="300" height="100" title="Deck biking">
</body>
</html>

jpg 24비트 트루컬러, 사진 이미지, 파일크기를 줄일 수 있음.
png 24비트 트루컬러, 무손실 압축, 휴대폰 등에서 고화질 유지, 최근 널리 사용. 휴대폰에서 많이 사용
gif 8비트 (256컬러), 무손실 압축, 그래픽 이미지에서 널리 사용, 파일크기 작음
svb 백터 그래픽 포맷, 확대 시 손실 없음, 도형, 그래프에서 사용

URL(Uniform Resource Locator)

<!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>
// URL 경로로 img 열기

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
 <audio controls>
 <source src="Savage.mp3" type="audio/mpeg">
 </audio>
</body>
</html>
// AUDIO 파일 열기

<!-- 
audio contrils  화면에 플레이어 표시
autoplay	자동 재생
loop 		무한반복
src 		오디오 파일(경로) 설정
 <video width="320" height="240" controls>
 <source src="movie1.mp4" type="video/mp4">
 </video>
-->

'FrontEnd > HTML' 카테고리의 다른 글

Form 폼 (0)	2022.06.15
하이퍼 링크, 경로, a 태그, img 삽입 (0)	2022.06.15
목록 (Ul, Ol, Li) (0)	2022.06.15
태그, 특수 문자 (0)	2022.06.15
HTML 정의 (0)	2022.06.14