HTML / Reference / img
개요
- img는 HTML에서 이미지를 삽입할 때 사용하는 태그입니다.
- 이 태그는 자체 종료 태그(self-closing)이며, 이미지 파일을 웹 페이지에 표시하는 데 사용됩니다.
문법
<img src="xx" alt="xx" width="xx" height="xx" loading="xx">
- src : 이미지의 경로
- alt : 이미지를 표시할 수 없을 때 출력할 내용
- width : 이미지의 가로 크기
- height : 이미지의 세로 크기
- loading : 이미지 로딩 방식
예제 1
- width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옵니다.
- 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 값이 출력됩니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <img src="images/200x200.png" alt="My Image"> <img src="images/200x200_.png" alt="My Image"> </body> </html>
alt 속성이 없는 것을 검색 엔진이 싫어합니다. 따라서 alt=""라도 넣어주는 것이 좋습니다.
예제 2
- width 속성으로 가로 크기만 정하면 세로 크기는 원본의 가로 세로 비율에 맞게 정해집니다.
- height 속성으로 세로 크기만 정하면 가로 크기는 원본의 가로 세로 비율에 맞게 정해집니다.
- 가로 크기와 세로 크기를 동시에 정하면 원본의 가로 세로 비율과 상관없이 설정한 크기로 나옵니다.
- 아래는 200x200 크기의 이미지 파일의 출력 크기를 변경하는 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <img src="images/200x200.png" alt="My Image"> <img src="images/200x200.png" alt="My Image" width="100"> <img src="images/200x200.png" alt="My Image" height="150"> <img src="images/200x200.png" alt="My Image" width="100" height="200"> </body> </html>
예제 3
- loading 속성을 이용하여 이미지를 불러오는 방식을 정할 수 있습니다.
- 기본값은 eager로, 모든 이미지를 불러옵니다.
- lazy로 설정하면 이미지가 뷰포트의 일정 거리 안으로 들어오면 불러옵니다. 불필요한 이미지 로딩을 줄여서 페이지 속도를 증가시킬 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Lazy Loading</title>
<style>
body { font-family: Consolas, sans-serif; }
h1 { margin: 30px 0px; text-align: center; }
img { max-width: 100%; display: block; margin: 0px 0px 500px 0px; }
</style>
</head>
<body>
<div class="a">
<h1>Lazy Loding</h1>
</div>
<div class="b">
<img src="images/img-01.jpg" alt="" loading="lazy">
<img src="images/img-02.jpg" alt="" loading="lazy">
<img src="images/img-03.jpg" alt="" loading="lazy">
<img src="images/img-04.jpg" alt="" loading="lazy">
<img src="images/img-05.jpg" alt="" loading="lazy">
<img src="images/img-06.jpg" alt="" loading="lazy">
<img src="images/img-07.jpg" alt="" loading="lazy">
<img src="images/img-08.jpg" alt="" loading="lazy">
<img src="images/img-09.jpg" alt="" loading="lazy">
<img src="images/img-10.jpg" alt="" loading="lazy">
<img src="images/img-11.jpg" alt="" loading="lazy">
<img src="images/img-12.jpg" alt="" loading="lazy">
<img src="images/img-13.jpg" alt="" loading="lazy">
<img src="images/img-14.jpg" alt="" loading="lazy">
<img src="images/img-15.jpg" alt="" loading="lazy">
<img src="images/img-16.jpg" alt="" loading="lazy">
<img src="images/img-17.jpg" alt="" loading="lazy">
<img src="images/img-18.jpg" alt="" loading="lazy">
<img src="images/img-19.jpg" alt="" loading="lazy">
<img src="images/img-20.jpg" alt="" loading="lazy">
</div>
</body>
</html>
- loading의 값을 lazy로 정하면 모든 이미지를 로드하지 않고 일부만 불러옵니다.
- 스크롤하여 밑으로 내려가면 이미지를 하나씩 불러온다.
caption은 표에 제목을 붙일 때 사용합니다. caption 태그는 반드시 table 태그 내부에 있어야 하며, thead, tbody, tr 등의 다른 테이블 요소들보다 먼저 위치해야 합니다. 기본 위치는 표 위 가운데입니다. 위치는 CSS의 caption-side로 정합니다.
form은 HTML에서 사용자 입력을 서버로 전송하는 양식을 정의할 때 사용됩니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. form 태그 안에 input, select, textarea 등 양식이 들어갑니다.
HTML / Reference / input type="date"
type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.
HTML / Reference / input type="range"
type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다.
blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.
pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.
q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.
label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.
video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.
address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다.