티스토리 뷰
HTML 이미지
이미지는 웹 페이지의 디자인과 모양을 향상시킬 수 있습니다.
웹이미지
웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에
몇 가지 파일 형식만 사용할 수 있다.
저작권이 없는 무료 이미지
- 이미지를 사용 할 때는 꼭 저작권 여부를 확인하여야 합니다.
- 특히 무료라고 하는 경우 비상업적용도로 명시 된 경우가 많으므로 이점 유의 해서 사용!
6,850,000+ free and premium vector icons, illustrations and 3D illustrations
Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format.
www.iconfinder.com
html image 기본형식
- HTML에서 이미지를 삽입하려면 <img>tag를 사용해야 합니다.
- <img> tage는 image의 약어이며, END TAG가 없는 empty tag 입니다.
<img src="url" alt="대체 텍스트">- src: source의 약자로, 이미지가 있는 URL주소를 입력합니다.
- alt: alternative의 약자로, URL주소가 틀리거나 어떠한 에러로 인하여 이미지가 사용자에게 보여지지 않을때 대체로 보여줄 텍스트를 입력합니다. alt속성 값은 이미지를 설명해야 합니다.
- 팁: 스크린 리더는 HTML 코드를 읽고 사용자가 콘텐츠를 "듣게" 해주는 소프트웨어 프로그램입니다. 스크린 리더는 시각 장애가 있거나 학습 장애가 있는 사람들에게 유용합니다.
-
title 속성§이미지 위 마우스 올릴 시 표시할 메시지 지정
<img src="image/photo01.jpg.jpg" alt="풍경"><img src="https://blog.kakaocdn.net/dna/HPCO2/btrOAijZSK5/AAAAAAAAAAAAAAAAAAAAAJl34en_BtZAYdYLkv7raRkwKT1Q-H9mLvAwUIfxgFkW/img.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1761922799&allow_ip=&allow_referer=&signature=hcdTgq%2BA5N5n3s22MnUPo785vgg%3D">
<img> 태그의 속성
이미지 크기 - width & height
style속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다 .
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">width또는 및 height속성 을 사용할 수 있습니다 .
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">width및 속성 은 height항상 이미지의 너비와 높이를 픽셀 단위로 정의합니다.
width.height,style 모두 사용하나 style속성을 사용하는 것이 좋습니다.
스타일 시트가 이미지 크기를 변경하는 것을 방지합니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<p><img src="image/photo01.jpg" alt="풍경" width="128" height="128"></p>
<p><img src="image/photo01.jpg" alt="풍경" style="width:128px;height:128px;"></p>
</body>
</html>이미지를 링크로
<a href="http://www.naver.com" target="_blank">
<img src="image/photo01.jpg" alt="풍경" style="width:128px;height:128px;" >
</a>이미지 정렬
보통 스타일로 하지만 속성으로도 가능
<p><img src="image/photo01.jpg" alt="풍경" width="128" height="128" align="left">
안녕하세요.<br>이미지 정렬 연습</p>
HTML 이미지 맵
- HTML 이미지 맵을 사용하면 이미지에 클릭 가능한 영역을 만들 수 있습니다.
HTML <map>태그는 이미지 맵을 정의합니다. 이미지 맵은 클릭 가능한 영역이 있는 이미지입니다. 영역은 하나 이상의 <area>태그로 정의됩니다.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map><area>
- 그런 다음 클릭 가능한 영역을 추가합니다.
- 클릭 가능한 영역은 <area>요소를 사용하여 정의됩니다.
모양
클릭 가능한 영역의 모양을 정의해야 하며 다음 값 중 하나를 선택할 수 있습니다.
- rect- 직사각형 영역을 정의합니다.
- circle- 원형 영역을 정의합니다.
- poly- 다각형 영역을 정의합니다.
- default- 전체 지역을 정의
모양 = "직사각형"
- 에 대한 좌표 shape="rect"는 x축에 대한 좌표와 y축에 대한 좌표가 쌍으로 제공됩니다.
- 따라서 좌표 34,44는 왼쪽 여백에서 34픽셀, 위쪽에서 44픽셀에 위치합니다.
일반적인 이미지 형식
다음은 모든 브라우저(Chrome, Edge, Firefox, Safari, Opera)에서 지원되는 가장 일반적인 이미지 파일 형식입니다.
AbbreviationFile FormatFile Extension
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
단원 요약
- HTML <img>요소를 사용하여 이미지 정의
- HTML src속성을 사용하여 이미지의 URL 정의
- HTML alt속성을 사용하여 이미지를 표시할 수 없는 경우 대체 텍스트를 정의합니다.
- HTML width및 height속성 또는 CSS width및 height 속성을 사용하여 이미지 크기 정의
- CSS float속성을 사용하여 이미지가 왼쪽이나 오른쪽으로 떠 있게 합니다.
- Total
- Today
- Yesterday