개발 도구 (Development Tools)/HTML & CSS

#7. HTML 이미지

BiCute 2023. 3. 17. 08:00
반응형

 

HTML에서 이미지를 표시하려면 "img" 요소를 사용합니다.

"src" 속성을 사용하여 이미지의 URL을 지정할 수 있습니다.

 

다음은 간단한 예입니다.

<img src="image.jpg" alt="이미지 설명">

"alt" 속성은 이미지가 로드되지 않을 때 표시될 텍스트입니다.

접근성을 위해 이미지의 설명을 제공하는 것이 좋습니다.

 

 

 

# 이미지 tag

 

img 태그는 HTML에서 이미지를 표시하는 데 사용됩니다.

아래는 "img" 태그의 주요 속성입니다.

- src: 이미지의 URL을 지정합니다.

예:

<img src="image.jpg">

 

- alt: 이미지가 로드되지 않을 때 대체 텍스트를 지정합니다.

접근성을 위해 이미지의 설명을 제공하는 것이 좋습니다.

예:

<img src="image.jpg" alt="이미지 설명">

 

- widthheight: 이미지의 가로 및 세로 크기를 지정합니다.

예:

<img src="image.jpg" alt="이미지 설명" width="200" height="100">


- style: 이미지의 CSS 스타일을 지정합니다.

예:

<img src="image.jpg" alt="이미지 설명" style="border:1px solid black;">

 

 

- classid" 이미지에 CSS 클래스 또는 ID를 지정합니다.

예:

<img src="image.jpg" alt="이미지 설명" class="thumbnail">
// or
<img src="image.jpg" alt="이미지 설명" id="profile-pic">




# 이미지 사이즈

 

HTML에서 이미지의 크기는 widthheight 속성을 사용하여 지정할 수 있습니다. 이미지의 크기는 픽셀(px)로 지정할 수 있습니다. 다음은 이미지의 가로 및 세로 크기를 200px 및 100px로 지정하는 예입니다.

<img src="image.jpg" alt="이미지 설명" width="200" height="100">

주의할 점은 이미지의 실제 크기와 "width"와 "height" 속성으로 지정한 크기가 다를 수 있다는 것입니다.

이미지의 원본 크기와 "width"와 "height" 속성으로 지정한 크기 사이의 차이는 브라우저가 이미지를 크기 조절하는 방식에 따라 달라질 수 있습니다.

CSS를 사용하여 이미지의 크기를 조절할 수도 있습니다.

이 경우 "width"와 "height" 속성은 생략할 수 있습니다.

CSS를 사용하면 더 많은 제어를 가질 수 있습니다.

예를 들면 다음과 같습니다.

<style>
img {
  width: 200px;
  height: 100px;
}
</style>

 

상대적인 단위(%)를 사용하여 이미지의 크기를 지정할 수도 있습니다.

이 경우 이미지의 크기는 부모 요소의 크기에 상대적으로 지정됩니다.

예를 들면 다음과 같습니다.

<style>
img {
  width: 50%;
  height: 25%;
}
</style>

 

 

 

# alt 속성

 

alt 속성은 HTML 이미지 태그에서 중요한 속성입니다.

alt 속성은 이미지가 로드되지 않을 때 또는 이미지가 이해할 수 없을 때 표시되는 대체 텍스트를 정의합니다.

이는 사용자가 이미지를 볼 수 없는 경우, 예를 들어 스크린 리더를 사용하는 경우, 가장 기본적인 정보를 제공하는 데 도움이 됩니다.

 

예:

<img src="image.jpg" alt="이미지 설명">

 

alt 속성은 웹 접근성을 위한 권장 사항이며, 검색 엔진 최적화를 위한 관습적인 사용도 있습니다.

alt 속성의 값은 구체적이고 의미있는 문자열이어야 합니다.

만약 이미지가 부가적인 꾸미기에 한해서만 사용되면, alt 속성을 비워두는 것이 좋습니다.

 

 

 

# image map

 

Image map은 HTML에서 이미지를 여러 부분으로 나누고, 각 부분에 링크를 걸 수 있는 기능입니다.

이는 이미지에서 특정 영역을 클릭할 때 특정 URL로 전송되도록 설정하는 것을 말합니다.

Image map을 사용하면, 하나의 이미지에 대해 여러 개의 링크를 걸 수 있어 유용합니다.

Image map을 사용하려면, 먼저 이미지를 정의하고 map 태그와 area 태그를 사용하여 이미지의 링크 영역을 정의해야 합니다.

map 태그의 name 속성에서 정의한 이름을 img 태그의 usemap 속성에 지정하여 이미지와 map을 연결합니다. area 태그의 shape 속성에서 링크 영역의 모양을 지정하고, coords 속성에서 링크 영역의 좌표를 지정합니다. href 속성에서 링크할 URL을 지정합니다.

예:

<img src="image.jpg" alt="링크가 있는 이미지" usemap="#imagemap">

<map name="imagemap">
<area shape="rect" coords="0,0,50,50" href="link1.html">

 

 

이미지 맵에서 좌표를 지정하려면 "area" 태그 내에서 "coords" 속성을 사용할 수 있습니다.

"coords" 속성의 값은 모양 정점의 x 및 y 픽셀 위치를 나타냅니다.

값의 수는 정의되는 모양에 따라 다릅니다.

다음은 이미지 맵에서 사용할 수 있는 다양한 모양입니다.

  • rect (사각형): 사각형의 마주보는 꼭지점의 좌표를 나타내는 4개의 값(x1, y1, x2, y2)으로 지정합니다.
  • circle (원): 중심점의 x, y 좌표와 반지름을 나타내는 3가지 값(x, y, r)으로 지정합니다.
  • polygon (다각형): 정점의 x, y좌표를 나타내는 짝수의 값(x1, y1, x2, y2, ..., xn, yn)으로 지정합니다.

 

참고: 다음 Image Map Generator 사이트를 이용하면 좌표를 쉽게 생성할 수 있습니다.

https://www.image-map.net/

 

Free Online Image Map Generator

Easy free online html image map generator. Select an image, click to create your areas and generate html your output!

www.image-map.net

반응형