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

img

  • img는 HTML 문서에 이미지를 삽입하는 태그입니다.
  • 주요 속성은 src, alt, width, height, loading입니다.
    • 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>

예제 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로 정하면 모든 이미지를 로드하지 않고 일부만 불러옵니다.

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

Related Posts

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

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

label label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다. 예제 input 요소에 label을 붙인 간단한 예제입니다. <!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 등 양식을 label로 감싸면, id와 for가 ...

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 태그에 추가할 ...

HTML / br / 줄바꿈하는 태그

HTML / br / 줄바꿈하는 태그

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 다음은 br 태그를 이용해서 줄바꿈을 한 예제입니다. 첫 번째 문단은 코드 상에서 줄바꿈을 했지만 웹브라우저에서는 띄어쓰기로 표현되고, ...

HTML / form / 데이터를 전달하는 양식 만들기

HTML / form / 데이터를 전달하는 양식 만들기

form form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다. 문법 <form method="xxx" action="yyy"> ... </form> method : 값을 전송하는 방법입니다. get 또는 post를 입력합니다. action : 값을 전달할 페이지를 입력합니다. 예제 1 get 방식으로 값을 전달하는 간단한 양식입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * ...

HTML / q, blockquote / 인용하기

HTML / q, blockquote / 인용하기

인용 인용임을 나타내는 태그에는 q와 blockquote가 있습니다. q는 문단 안에서 인용할 때 사용하는 인라인 요소이고, blockquote는 새로운 문단에서 인용하는 블록 요소입니다. 문법 <q cite="xxx">...</q> <blockquote cite="xxx">...</blockquote> 인용문의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택사항이고, 웹브라우저에서는 보이지 않습니다. 예제 1 q 요소의 기본 모양은 인용문구를 큰 따옴표로 감싸는 것입니다. <!doctype html> <html lang="ko"> <head> <meta ...

HTML / 문법

HTML / 문법

문법 <tagname>Contents</tagname> 위 모든 걸 요소(element)라고 합니다. <tagname>을 시작 태그, </tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 합니다. Contents는 내용입니다. 예를 들어 <p>Lorem</p> 는 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem입니다. 속성 태그는 속성(attribute)을 가질 수 있습니다. <tagname attribute="value">Contents</tagname> 예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 합니다. <blockquote id="abc"> ... </blockquote> 속성값(value)은 큰 따옴표로 감싸도 ...

HTML / del - 삭제되었음을 나타내는 태그, ins - 새로 추가되었음을 나타내는 태그

HTML / del - 삭제되었음을 나타내는 태그, ins - 새로 추가되었음을 나타내는 태그

del, ins del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>My favorate color is <del>blue</del> <ins>red</ins>.</p> </body> </html> CSS / text-decoration / 선으로 ...

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

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

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

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

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

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