안녕하세요.
오늘은 이미지를 표시하는 태그를 알아보겠습니다.
이미지를 웹 화면 상에 표시하기 위해서는 <img/> 태그를 사용해야 합니다.
이 태그는 끝 태그가 없고, 이미지를 표시하기 위해 src라는 속성을 지정해줘야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<img src="https://images.unsplash.com/photo-1657299156653-d3c0147ba3ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"/>
</body>
</html>
src 속성에는 이미지의 상대경로 혹은 절대경로를 넣어주면 됩니다.
상대경로와 절대경로에 대한 설명은 다음에 하도록 하겠습니다.
지금 저는 Unsplash의 Wasa Crispbread의 사진을 사용했습니다.
그런데 이미지가 너무 큽니다.
이 경우는 width나 height, 혹은 두 가지 속성을 모두 이용해 이미지 크기를 조정할 수 있습니다.
우선 width 속성으로 이미지 크기를 조정해 보겠습니다.
웹에서의 크기 단위는 기본적으로 px을 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<img
width="200px"
src="https://images.unsplash.com/photo-1657299156653-d3c0147ba3ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"/>
</body>
</html>
너비를 200px로 준 모습입니다.
이 경우 너비는 200px로 고정되고 높이는 원본 이미지의 비율에 맞게 조정됩니다.
반대로 높이를 200px로 설정하면,
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<img
height="200px"
src="https://images.unsplash.com/photo-1657299156653-d3c0147ba3ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"/>
</body>
</html>
높이가 200px로 고정되고 너비는 원본 이미지의 비율에 맞게 조정됩니다.
만약 높이와 너비를 모두 200px로 설정하면,
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<img
width="200px"
height="200px"
src="https://images.unsplash.com/photo-1657299156653-d3c0147ba3ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"/>
</body>
</html>
이미지 비율이 원본과 달라지기 때문에 이와 같이 나오게 됩니다.
이 문제를 해결하기 위한 방법이 있지만 이 역시 다음에 알아보도록 하겠습니다.
다음으로 <img/> 태그에는 alt 라는 중요한 속성이 있습니다.
alt는 이미지를 표시할 수 없을 때 표시할 대체 텍스트를 설정할 수 있습니다.
만약 다음과 같이 이미지 경로가 잘못되거나 경로상에 이미지가 존재하지 않는다면
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<img
width="200px"
height="200px"
src="잘못된 경로"/>
</body>
</html>
이미지는 이렇게 표시되지 않습니다.
이 때 alt 속성에 이미지에 대한 설명을 입력해주면,
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<img
width="200px"
height="200px"
src="잘못된 경로"
alt="샐러드 한 상 차림"/>
</body>
</html>
이미지를 표시할 수 없을 경우 이와 같이 대체 텍스트를 보여줍니다.
'Frontend 기본' 카테고리의 다른 글
| HTML 태그 - <table> (0) | 2022.08.10 |
|---|---|
| HTML 태그 - <video> (0) | 2022.08.09 |
| HTML 주석과 개발자 도구 (0) | 2022.08.05 |
| HTML 태그 - <ol>, <ul>, <dl> (0) | 2022.08.04 |
| HTML 시멘틱 태그 (0) | 2022.08.03 |