728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_이미지 관련 태그</title>
</head>
<body>
<h1>img 태그</h1>
<pre>
- 웹 문서에 사진이나 그림 같은 이미지를 삽입하는 용도이 태그
[속성]
1) src : 삽입할 이미지의 경로를 지정하는 속성(파일 경로, 웹 주소)
2) width/height : 이미지의 크기를 지정하는 속성
3) alt : 이미지를 설명하는 속성
-> 이미지가 출력되지 않는 경우 화면에 직접 표시
</pre>
<hr>
<h3>src 속성 확인</h3>
<!--
상대 경로 : 현재 위치를 기준으로 경로 지정
.. : 상위 폴더
/ : 아래 , 안쪽, 안에
-->
<img src="../images/cats/cat1.jpg">
<!-- 웹 이미지 경로(웹상 절대경로)를 이용해서 이미지 출력-->
<img src="https://www.shutterstock.com/image-vector/snoopy-dog-cartoon-character-background-260nw-2351422507.jpg">
<hr>
<h2>width,height 속성을 이용한 크기 조절(고정/ 가변크기)</h2>
<h4>고정 크기 단위(px) : 화면의 크기와 상관없이 지정된 값의 크기를 갖는 단위</h4>
<img src="../images/dogs/dog1.jpg" width="300PX" height="240PX">
<img src="../images/dogs/dog2.jpg" width="300PX" height="240PX">
<img src="../images/dogs/dog3.jpg" width="300PX" height="240PX">
<img src="../images/dogs/dog4.jpg" width="300PX" height="240PX">
<img src="../images/dogs/dog5.jpg" width="300PX" height="240PX">
<hr>
<h4>가변 크기 단위(%) : 화면이나 영역 기준 사이즈 크기에 따라 크기가 변경되는 단위</h4>
<img src="../images/flowers/flower1.jpg" width="15%" height="240px">
<img src="../images/flowers/flower2.jpg" width="15%" height="240px">
<img src="../images/flowers/flower3.jpg" width="15%" height="240px">
<img src="../images/flowers/flower4.jpg" width="15%" height="240px">
<img src="../images/flowers/flower5.jpg" width="15%" height="240px">
<hr>
<h2>alt 속성 확인</h2>
<img src="../images/cats/cat2.jpg" width="300px" height="240px" alt="고양이 사진">
</body>
</html>
728x90
반응형