안녕하세요. 코드 서핑입니다.
우리는 보통 HTML 문서에 글만 적지 않습니다. 이해를 돕기 위해서 사진을 첨부하는데요.
오늘은 HTML 문서에 이미지를 삽입하는 img 태그에 대해 알아보겠습니다.
img
이미지 태그가 가지는 주요 속성은 src, width, height, alt, loading이 있습니다.
- src : 이미지의 경로. 웹 페이지에서 이미지 주소를 받아오는 절대 경로와, HTML 문서 기준으로 이미지의 주소를 정하는 상대 경로로 지정할 수 있습니다.
- width : 이미지의 가로 크기
- height : 이미지의 세로 크기
- alt : 이미지의 대체 텍스트. 이미지가 표시 될 수 없을 때 보이는 텍스트입니다. ex) 엑박
- loading : 이미지를 불러오는 방식. 기본값은 eager이고 이미지가 여러장이면 모든 이미지를 한 번에 불러옵니다. 다른 값으로는 lazy가 있는데 화면의 일정 뷰포트 영역을 차지해야만 다음 이미지를 불러옵니다. ex) 스크롤
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img tag</title>
</head>
<body>
<div class="img">
<img src="photo.png" alt="camera">
<img src="photo.png" alt="camera" width="150">
<img src="photo.png" alt="camera" height="300">
<img src="photo.png" alt="camera" width="150" height="300">
</body>
</html>결과
photo.png의 이미지 크기는 300 x 300 px입니다.
width, height 값을 지정하지 않으면 이미지 원래의 크기인 300 x 300px로 표시됩니다.
width값만 지정하면 세로크기는 원본 이미지의 가로 세로 비율에 맞춰서 표시됩니다.
마찬가지로 height값만 지정하면 가로 크기는 원본 이미지의 가로 세로 비율에 맞춰서 표시됩니다.
4번째 이미지의 경우 width="150" height="300"으로 지정했기 때문에 가로 세로 1 : 2 인 비율의 이미지가 표시되었습니다.
오늘은 HTML 문서에 이미지를 삽입하는 img 태그에대해 알아보았습니다.
읽어주셔서 감사하고,
공감과 댓글은 언제나 환영입니다.😀
'코딩 > HTML' 카테고리의 다른 글
| HTML [button] tag - 클릭할 수 있는 버튼 태그 (0) | 2020.11.12 |
|---|---|
| #1 인기있는 [HTML TAG] 모음 (0) | 2020.10.30 |