HTML / img / 이미지 삽입하는 태그

img

img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다.

  • 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 속성으로 세로 크기만 정하면 가로 크기는 원본의 가로 세로 비율에 맞게 정해진다.
  • 가로 크기와 세로 크기를 동시에 정하면 원본의 가로 세로 비율과 상관없이 설정한 크기로 나온다.
<!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로 정하면 모든 이미지를 로드하지 않고 일부만 불러온다.

  • 스크롤하여 밑으로 내려가면 이미지를 하나씩 불러온다.

모든 브라우저가 loading 속성을 지원하는 것은 아니다. 특히 IE가 문제인데, IE에서도 이 효과를 내고 싶다면 Lozad.js 등 스크립트를 이용한다.

Related Posts

HTML / input / checkbox / 체크박스 만들기

HTML / input / checkbox / 체크박스 만들기

체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스이다. 체크박스는 input 태그로 만든다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름이다. value : 전달될 값이다. checked : 선택된 상태로 만든다. 예제 1 - 기본 Blue 또는 Red를 선택한다. 둘 다 선택할 수 있다.(라디오 버튼은 하나만 선택할 수 있다.) 아무것도 선택되지 않은 상태에서 시작한다. <!doctype html> <html lang="ko"> ...

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

em, strong em 태그는 강조하는 텍스트에 사용한다. 기본 모양은 기울임꼴이다. strong 태그는 중요한 텍스트에 사용한다. 기본 모양은 굵은 글자이다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> body { font-size: 64px; } </style> </head> <body> <p>Lorem <em>Ipsum</em> <strong>Dolor</strong>.</p> </body> </html> b 태그는 글자를 굵게 만든다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점이다.

HTML / img / 이미지 삽입하는 태그

HTML / img / 이미지 삽입하는 태그

img img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다. src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나온다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 ...

HTML / label / 폼의 양식에 이름 붙이는 태그

HTML / label / 폼의 양식에 이름 붙이는 태그

label label은 폼의 양식에 이름 붙이는 태그이다. 주요 속성은 for이다. label의 for의 값과 양식의 id의 값이 같으면 연결된다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제한다. 예제 input 요소에 label을 붙인 간단한 예제이다. label을 클릭하면 input의 type에 맞게 처리한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p> <label for="jb-input-text">Input - Text</label> <input type="text" id="jb-input-text"> </p> <p> <label for="jb-input-checkbox">Input - Checkbox</label> <input type="checkbox" id="jb-input-checkbox"> </p> </body> </html> Tip input 등 ...

HTML / input / date, time / 날짜, 시간 입력하는 양식

HTML / input / date, time / 날짜, 시간 입력하는 양식

input type="date" type이 date인 input은 날짜를 입력 받기 위한 양식이다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다르다. IE는 지원하지 않는다. 아래 스크린샷은 크롬 기준이다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정한다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜이다. max : 선택 항목으로, 입력 가능한 가장 늦은 날짜이다. 예제 1 - 기본 ...

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

순서 있는 목록 - ol 순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록이다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만든다. ​​​​<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Ordered List</h1> <ol> ...

HTML / progress - 진행 정도 나타내는 바 만드는 태그

HTML / progress - 진행 정도 나타내는 바 만드는 태그

progress progress는 진행 정도 나타내는 바를 만드는 태그입니다. HTML5에서 추가되었습니다. IE는 버전 10부터 지원합니다. 주요 속성은 max, value입니다. max를 전체로 보았을 때 value에 해당하는 정도를 나타냅니다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다. 웹브라우저마다 표현 방식이 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <div> <progress value="20" max="100"></progress> </div> <div> <progress value="20" max="200"></progress> </div> </body> </html> 예제 ...

HTML / select / 선택할 수 있는 목록을 만드는 태그

HTML / select / 선택할 수 있는 목록을 만드는 태그

select select는 선택할 수 있는 목록을 만들 때 사용한다. 목록의 내용은 option 태그로 만든다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰진다. disabled : 화면에는 보이지만 사용할 수 없도록 만든다. multiple : 여러 값을 선택할 수 있도록 한다. name : 이름을 붙인다. size : 목록을 펼치기 전에 ...

HTML / abbr - 약자(abbreviation)임을 나타내는 태그

HTML / abbr - 약자(abbreviation)임을 나타내는 태그

abbr abbr은 약자(abbreviation)임을 나타냅니다. 문법 <abbr title="Xxx Yyy Zzz">XYZ</abbr> title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | abbr</title> </head> <body> <p> <abbr title="World ...

HTML / a / 링크(link) 만들기

HTML / a / 링크(link) 만들기

링크(link)는 <a> 태그로 만든다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있다. 기본 문법 <a href="xxx">Label</a> href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣는다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리된다. <a href="">Label</a>처럼 href 속성에 값이 없으면, 현재 페이지로 이동하는 링크가 만들어진다. 주요 속성 a 태그에 추가할 ...