HTML에서 image 태그란?
HTML에서 image 태그는 웹페이지에 이미지를 삽입하기 위한 태그입니다. 이 태그를 사용하면, 이미지 파일을 웹페이지에 삽입하여 사용자에게 시각적인 정보를 전달할 수 있습니다.
<image> 태그를 사용하는 방법
image 태그는 보통 다음과 같이 작성됩니다.
<img src="이미지파일경로" alt="대체텍스트">src 속성은 이미지 파일의 경로를 지정하며, alt 속성은 이미지를 대체할 텍스트를 지정합니다. alt 속성은 이미지가 로드되지 않았거나, 시각적으로 접근할 수 없는 상황에서 이미지 대신 텍스트로 대체되어 사용자에게 정보를 전달합니다.
src와 alt 속성은 필수 속성이며, 이 두 가지 속성을 빼먹게 되면 웹 페이지에 이미지가 정상적으로 표시되지 않습니다.
<image> 태그에서 사용할 수 있는 속성
<image> 태그에서 사용할 수 있는 다양한 속성들이 있지만, 이들은 이미지 태그의 성능, 접근성, SEO 등을 개선하기 위한 추가적인 속성이며, 필수 속성은 아닙니다. 중요한 내용이 아니므로 "아~ 이런 것도 있구나" 정도로만 참고해주세요.
width 속성
<img src="이미지파일경로" width="500">width 속성은 이미지의 너비를 지정합니다. 값은 픽셀(px) 단위로 지정됩니다.
height 속성
<img src="이미지파일경로" height="500">height 속성은 이미지의 높이를 지정합니다. 값은 픽셀(px) 단위로 지정됩니다.
title 속성
<img src="이미지파일경로" title="이미지 설명">title 속성은 이미지에 대한 추가 정보를 제공하는 툴팁을 지정합니다.
loading 속성
<img src="이미지파일경로" loading="lazy">loading 속성은 이미지 로드 방식을 지정합니다. lazy로 지정하면 페이지 로드 후 이미지를 로드할 때까지 기다리며, eager로 지정하면 이미지를 즉시 로드합니다.
decoding 속성
<img src="이미지파일경로" decoding="async">decoding 속성은 이미지 디코딩 방식을 지정합니다. async로 지정하면 비동기적으로 디코딩하며, sync로 지정하면 동기적으로 디코딩합니다.
sizes 속성
<img srcset="이미지파일경로-400w.jpg 400w,
이미지파일경로-800w.jpg 800w,
이미지파일경로-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
src="이미지파일경로-800w.jpg">sizes 속성은 이미지를 보여줄 미디어 조건을 지정합니다. 이 속성은 반응형 웹디자인에서 사용됩니다.
srcset 속성
<img srcset="이미지파일경로-400w.jpg 400w,
이미지파일경로-800w.jpg 800w,
이미지파일경로-1200w.jpg 1200w"
src="이미지파일경로-800w.jpg">srcset 속성은 다양한 화면 크기와 해상도에 맞게 이미지 파일을 제공합니다. 각 파일의 경로와 해당 이미지의 크기를 지정해야 합니다.
crossorigin 속성
<img src="https://example.com/image.jpg"
crossorigin="anonymous">crossorigin 속성은 다른 도메인에서 호스팅되는 이미지를 가져올 때 사용됩니다. 이 속성을 사용하면 브라우저에서 해당 이미지의 보안 정책을 준수할 수 있습니다.
usemap 속성
<img src="이미지파일경로"
usemap="#링크맵이름">
<map name="링크맵이름">
<area shape="rect" coords="0,0,100,100" href="링크주소">
</map>usemap 속성은 이미지에 링크 맵(link map)을 지정합니다. 링크 맵은 이미지의 특정 영역을 클릭하면 해당하는 링크로 이동할 수 있도록 합니다.
ismap 속성
<img src="이미지파일경로"
usemap="#링크맵이름"
ismap>ismap 속성은 링크 맵(link map)이 있는 이미지에 대해 클릭 영역을 지정합니다.
HTML에서 image 태그란?
HTML에서 image 태그는 웹페이지에 이미지를 삽입하기 위한 태그입니다. 이 태그를 사용하면, 이미지 파일을 웹페이지에 삽입하여 사용자에게 시각적인 정보를 전달할 수 있습니다.
<image> 태그를 사용하는 방법
image 태그는 보통 다음과 같이 작성됩니다.
<img src="이미지파일경로" alt="대체텍스트">src 속성은 이미지 파일의 경로를 지정하며, alt 속성은 이미지를 대체할 텍스트를 지정합니다. alt 속성은 이미지가 로드되지 않았거나, 시각적으로 접근할 수 없는 상황에서 이미지 대신 텍스트로 대체되어 사용자에게 정보를 전달합니다.
src와 alt 속성은 필수 속성이며, 이 두 가지 속성을 빼먹게 되면 웹 페이지에 이미지가 정상적으로 표시되지 않습니다.
<image> 태그에서 사용할 수 있는 속성
<image> 태그에서 사용할 수 있는 다양한 속성들이 있지만, 이들은 이미지 태그의 성능, 접근성, SEO 등을 개선하기 위한 추가적인 속성이며, 필수 속성은 아닙니다. 중요한 내용이 아니므로 "아~ 이런 것도 있구나" 정도로만 참고해주세요.
width 속성
<img src="이미지파일경로" width="500">width 속성은 이미지의 너비를 지정합니다. 값은 픽셀(px) 단위로 지정됩니다.
height 속성
<img src="이미지파일경로" height="500">height 속성은 이미지의 높이를 지정합니다. 값은 픽셀(px) 단위로 지정됩니다.
title 속성
<img src="이미지파일경로" title="이미지 설명">title 속성은 이미지에 대한 추가 정보를 제공하는 툴팁을 지정합니다.
loading 속성
<img src="이미지파일경로" loading="lazy">loading 속성은 이미지 로드 방식을 지정합니다. lazy로 지정하면 페이지 로드 후 이미지를 로드할 때까지 기다리며, eager로 지정하면 이미지를 즉시 로드합니다.
decoding 속성
<img src="이미지파일경로" decoding="async">decoding 속성은 이미지 디코딩 방식을 지정합니다. async로 지정하면 비동기적으로 디코딩하며, sync로 지정하면 동기적으로 디코딩합니다.
sizes 속성
<img srcset="이미지파일경로-400w.jpg 400w,
이미지파일경로-800w.jpg 800w,
이미지파일경로-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
src="이미지파일경로-800w.jpg">sizes 속성은 이미지를 보여줄 미디어 조건을 지정합니다. 이 속성은 반응형 웹디자인에서 사용됩니다.
srcset 속성
<img srcset="이미지파일경로-400w.jpg 400w,
이미지파일경로-800w.jpg 800w,
이미지파일경로-1200w.jpg 1200w"
src="이미지파일경로-800w.jpg">srcset 속성은 다양한 화면 크기와 해상도에 맞게 이미지 파일을 제공합니다. 각 파일의 경로와 해당 이미지의 크기를 지정해야 합니다.
crossorigin 속성
<img src="https://example.com/image.jpg"
crossorigin="anonymous">crossorigin 속성은 다른 도메인에서 호스팅되는 이미지를 가져올 때 사용됩니다. 이 속성을 사용하면 브라우저에서 해당 이미지의 보안 정책을 준수할 수 있습니다.
usemap 속성
<img src="이미지파일경로"
usemap="#링크맵이름">
<map name="링크맵이름">
<area shape="rect" coords="0,0,100,100" href="링크주소">
</map>usemap 속성은 이미지에 링크 맵(link map)을 지정합니다. 링크 맵은 이미지의 특정 영역을 클릭하면 해당하는 링크로 이동할 수 있도록 합니다.
ismap 속성
<img src="이미지파일경로"
usemap="#링크맵이름"
ismap>ismap 속성은 링크 맵(link map)이 있는 이미지에 대해 클릭 영역을 지정합니다.
