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 등 스크립트를 이용한다.
HTML / input / checkbox / 체크박스 만들기
체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스이다. 체크박스는 input 태그로 만든다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름이다. value : 전달될 값이다. checked : 선택된 상태로 만든다. 예제 1 - 기본 Blue 또는 Red를 선택한다. 둘 다 선택할 수 있다.(라디오 버튼은 하나만 선택할 수 있다.) 아무것도 선택되지 않은 상태에서 시작한다. <!doctype html> <html lang="ko"> ...
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 / progress - 진행 정도 나타내는 바 만드는 태그
progress progress는 진행 정도 나타내는 바를 만드는 태그이다. HTML5에서 추가되었다. 주요 속성은 max, value이다. max를 전체로 보았을 때 value에 해당하는 정도를 나타낸다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타낸다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타낸다. 웹브라우저에 따라, 웹브라우저의 버전에 따라 표현 방식이 다르다. <!doctype html> <html lang="ko"> <head> <meta ...
HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기
표 만들 때 사용하는 태그 표는 table 태그로 만든다. 행은 tr 태그로 만든다. 열의 제목이 들어가는 셀은 th 태그로 만든다. 내용이 들어가는 셀은 td 태그로 만든다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용한다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용한다. 표 제목은 caption 태그로 ...
HTML / input / radio / 라디오 버튼 만들기
라디오 버튼 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 한다. 라디오 버튼은 input 태그로 만든다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택한다. value : 선택했을 때 전달될 값이다. checked : 선택된 상태로 만든다. 예제 1 Apple 또는 Banana 중 하나만 선택한다.(중복 선택이 가능하게 하려면 체크박스를 만든다.) 아무것도 선택되지 ...
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 / placeholder / 양식에 안내 문구 추가하기
input 태그에 value를 이용해서 기본값을 만들 수 있다. 이 상태에서 버튼을 클릭하면 기본값이 전송된다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; ...
HTML / input / number / 숫자 입력하는 양식
input type="number" input 태그의 type을 number로 하면 숫자만 입력할 수 있다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: Consolas, monospace; ...
img img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다. src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나온다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 ...
HTML / caption / 표(table)에 캡션 붙이는 태그
caption 표(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>