HTML / Reference / img
개요
img는 HTML 문서에 이미지를 삽입하는 태그입니다.
문법
<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로 정하면 모든 이미지를 로드하지 않고 일부만 불러옵니다.
- 스크롤하여 밑으로 내려가면 이미지를 하나씩 불러온다.
HTML / Reference / input type="hidden"
개요 양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 사용자가 접속한 IP 로그인한 상태에서의 계정 정보 게시물의 답글인 경우 게시물의 ID 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정합니다. 문법 <input type="hidden" name="xxx" value="yyy"> 예제 다음은 size의 값을 big으로 정하고 넘기는 ...
HTML / Reference / input type="time"
개요 type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다. 아래 스크린샷은 크롬 기준입니다. 문법 <input type="time" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 시간을 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 시간입니다. max : 선택 항목으로, 입력 가능한 가장 늦은 시간입니다. 예제 - 기본 양식 시간을 입력 받는, 선택 ...
HTML / Reference / figure, figcaption
개요 figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. 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 / Reference / input type="radio"
개요 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 합니다. 라디오 버튼은 input 태그로 만듭니다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택합니다. value : 선택했을 때 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Apple 또는 Banana 중 하나만 선택합니다. 아무것도 선택되지 않은 상태에서 시작합니다. <!doctype html> <html lang="ko"> ...
HTML / Reference / input type="date"
개요 type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다. max : 선택 항목으로, 입력 가능한 가장 늦은 날짜입니다. 예제 - 기본 양식 날짜를 입력 받는, 선택 항목이 없는 가장 ...
개요 video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다. 문법 <video autoplay controls loop muted poster="aaa" preload="bbb"> <source src="xxx" type="yyy"> zzz </video> autoplay : 동영상을 자동으로 재생합니다. controls : 재생, 정지 등 조작 메뉴를 보여줍니다. loop : 동영상을 반복 재생합니다. poster : 동영상 재생 전에 ...
개요 표(table)에 캡션 붙일 때 caption 태그를 사용합니다. 기본 위치는 표 위 가운데입니다. 캡션 위치는 CSS의 caption-side로 정합니다. 예제 캡션의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> table { width: 100%; } th, td { border: 1px solid #dadada; } </style> </head> <body> <table> <caption>Table Caption</caption> <tr> <th>Lorem</th><th>Ipsum</th> </tr> <tr> <td>Dolor</td><td>Amet</td> </tr> </table> </body> </html>
개요 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>
개요 pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다. 예제 HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식합니다. 예를 들어 다음 문서의 내용은 ...
HTML / Reference / input type="number"
개요 type이 number인 input은 숫자를 입력받는 양식입니다. 숫자 이외의 값을 입력하면 경고 메시지를 출력합니다. 문법 <input type="number" step="xxx"> 예제 - 기본 input 태그의 type을 number로 하면 숫자만 입력할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { ...