HTML - 이미지

이미지(Image)는 2차원 평면에 시각적으로 표현된 요소를 말합니다. 현재 웹 페이지에서 이미지는 중요한 구성 요소 중 하나로 자리 잡고 있습니다.

웹 페이지에서 주로 사용하는 이미지 파일 형식

• JPEG: 압축률이 높아 사진에 적합한 형식입니다.
• GIF: 간단한 애니메이션과 투명 효과를 지원합니다.
• PNG: 고품질 이미지와 투명도를 표현할 수 있습니다.

이미지 삽입하기

HTML에서 이미지를 삽입하려면 <img> 태그를 사용합니다. <img> 태그는 종료 태그가 필요 없는 빈 태그이며, 기본 문법은 다음과 같습니다.

<img src="이미지_주소" alt="대체_문자열">

 

• src: 이미지의 URL 경로를 지정합니다.
• alt: 이미지가 로드되지 않을 때 표시될 텍스트를 지정합니다.

예시:

<img src="/img_html5_logo.png" alt="이미지가 로드되지 않았습니다.">

이미지 크기 설정하기

HTML에서는 이미지의 크기를 width와 height 속성을 사용하거나 style 속성을 이용해 설정할 수 있습니다. 크기 단위는 픽셀(pixel)을 기본으로 합니다.

두 가지 방법:

1. 속성 이용

<img src="/examples/images/img_flag.png" alt="HTML 크기 설정" width="320" height="214">

2. style 속성 이용

<img src="/examples/images/img_flag.png" alt="스타일 크기 설정" style="width:320px; height:214px;">

 

참고:
HTML5 표준에서는 style 속성을 활용하는 것이 일반적입니다. 추후 CSS를 배우면서 스타일을 분리하면 유지보수가 더 쉬워집니다.

이미지 테두리 추가하기

이미지에 테두리를 추가하려면 border 속성을 사용합니다. 이 속성으로 테두리 두께와 스타일, 색상을 설정할 수 있습니다.

예시:

<img src="/examples/images/img_flag.png" alt="이미지 테두리" style="width:320px; height:214px; border:3px solid black;">

이미지에 링크 연결하기

이미지 자체에 링크를 추가하려면 <a> 태그를 사용합니다. 이미지를 클릭하면 설정된 URL로 이동하게 됩니다.

예시:

<a href="/html/intro" target="_blank">
    <img src="/examples/images/img_flag.png" alt="이미지 링크" style="width:320px; height:214px;">
</a>

이미지 맵(Image Map) 만들기

이미지 맵은 이미지의 특정 영역을 클릭 가능하도록 만드는 기능입니다. <map> 태그와 <area> 태그를 조합하여 구현합니다.

• usemap 속성: <img> 태그에서 맵과 이미지를 연결합니다.
•  태그: 클릭 가능한 영역을 정의합니다.

예시:

<img src="/examples/images/img_imagemap.jpg" alt="이미지 맵 예제" usemap="#vending" style="width:320px; height:240px;">

<map name="vending">
    <area shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
    <area shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
</map>

 

• shape: 영역 모양을 설정합니다 (rect, circle, poly 등)
• coords: 영역의 좌표를 지정합니다.
• href: 클릭 시 이동할 URL을 설정합니다.

이미지를 적절히 활용하면 웹 페이지의 가독성과 시각적 매력을 높일 수 있습니다. 위의 내용을 바탕으로 다양한 이미지를 효과적으로 적용해보세요!