728x90
더보기
Day36. 230620
scr 속성 - 이미지 파일 경로 지정하기
<img>태그 - 이미지 삽입하기
<img src"경로" [속성="값"]>
절대경로
최상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식
상대경로
현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성한 경로
.(or ./) 현재위치 디렉토리
../ 현재위치의 상위 디렉토리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지</title>
</head>
<body>
<h2>이미지</h2>
<xmp>
프로토콜://IP주소:포트번호/컨택스트패스/~~파일명
위치 : http://localhost:8081/ourPro/ch03/image_p94.html
../image/food1.jpeg
http://localhost:8081/ourPro/image/food1.jpeg
속성
border="테두리두께"
width="너비%px" height="높이%px"
alt="이미지설명"
title="이미지설명"
<img src="path"/>
<figure>
<img src=""/>
..
<img src=""/>
<figcaption>제목,설명</figcaption>
</figure>
</xmp>
<hr/>
<a href="https://www.coupang.com/" target="_blank"><img src="http://localhost:8081/ourPro/imges/coupang.png"
width="50%" alt="쿠팡" title="coupang"/></a>
<hr/>
*절대경로<img src="http://localhost:8081/ourPro/imges/food1.jpg"
width="50%"
alt="짱구" title="zzangu"/>
<br/><br/>
*상대경로<img src="../imges/zzang6.jpg" width="50%">
</body>
</html>
<figure> 태그 - 설명 글을 붙일 대상 지정
사진, 도표, 삽화, 오디오, 비디오, 코드 등을 한 단위가 되는 요소를 묶을 때 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<figure>
<img src="../imges/food1.jpg" width="50%">
<img src="../imges/zzang6.jpg" width="50%">
<figcaption>짱구짱</figcaption>
</figure>
</body>
</html>
728x90
'개발 수업 > WEB' 카테고리의 다른 글
| [CSS] 스타일과 스타일 시트 (0) | 2023.06.21 |
|---|---|
| [HTML] 표만들기 예제 (0) | 2023.06.20 |
| [HTML] 링크만들기 (0) | 2023.06.20 |
| [HTML] table 태그 (0) | 2023.06.20 |
| [HTML] 표를 만드는 태그 (0) | 2023.06.19 |
