반응형
이미지와 관련된 태그
<img src="삽입할 이미지의 경로" alt="이미지에 대한 설명 문구"
width="가로크기(px/%)" height="세로크기(px/%)">
<!DOCTYPE html>
<html>
<head>
<title>이미지와 관련된 태그</title>
</head>
<body>
<img src="resources/images/펭수1.jpg alt="펭하">
<br><br>
<img src="resources/images/펭수2.jpg alt="거 대충 넘어갑시다">
<br><br>
<p>
width와 height로 가로 길이와 세로 길이를 조절할 수 있다.<br>
이때, 고정 길이는 px로 지정하고, 가변 길이는 %로 지정한다.
</p>
<h4>고정 길이(px) → 기본값으로 설정. 화면 사이즈가 변동돼도 사진의 크기는 고정.<h4>
<img src="resources/images/펭수3" alt="노력은 배신하지 않는다"
width="250px" height="150px">
<br><br>
<h4>가변 길이(%) → 화면 사이즈에 따라 사진의 크기가 달라짐.<h4>
<img src="resources/images/펭수2" alt="거 대충 넘어갑시다"
width="15%" height="10%">
</body>
</html>
<img src="이미지 경로" alt="이미지 설명 문구">
이미지 경로를 제대로 작성했을 때 1번 사진과 같이 해당 이미지가 뜬다. 그리고 이미지 경로가 제대로 작성되지 않았을 때, 즉 해당 경로에 이미지가 없거나 경로가 잘못 작성되었을 경우엔 2번 사진과 같이 엑박 표시와 함께 해당 이미지에 대한 설명 문구가 뜬다.
width="가로크기(px/%)" height="세로크기(px/%)"
가로크기와 세로크기를 'px'로 설정하면 화면이 커지든 작아지든 사진 크기는 변함이 없다.(고정 길이)
그러나 '%'로 설정하면 화면이 커지거나 작아졌을 때 사진 크기도 함께 커지거나 작아진다.(가변 길이)
반응형