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 / 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 / a / 링크(link) 만들기

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

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

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 / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

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

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

HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기

HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기

표 만들 때 사용하는 태그 표는 table 태그로 만듭니다. 행은 tr 태그로 만듭니다. 열의 제목이 들어가는 셀은 th 태그로 만듭니다. 내용이 들어가는 셀은 td 태그로 만듭니다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분지을 수도 있습니다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용합니다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용합니다. 표 제목은 caption 태그로 만듭니다. 예제 위의 ...

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 / 문법

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 / figure, figcaption / 이미지 등을 감싸고 캡션 만드는 태그

HTML / figure, figcaption / 이미지 등을 감싸고 캡션 만드는 태그

figure figure는 사진, 이미지, 다이어그램 등을 감싸는 요소입니다. figcaption figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치시킵니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | figcaption</title> </head> <body> <p>Aenean nec mollis nulla. Phasellus lacinia ...

HTML / input / radio / 라디오 버튼 만들기

HTML / input / radio / 라디오 버튼 만들기

라디오 버튼 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 합니다. 라디오 버튼은 input 태그로 만듭니다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택합니다. value : 선택했을 때 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Apple 또는 Banana 중 하나만 선택합니다.(중복 선택이 가능하게 하려면 체크박스를 만드세요.) 아무것도 ...