HTML - 이미지(Image / <img>)

HTML 이미지 (Image)

HTML에서 이미지는 매우 중요한 요소로 자리 잡고 있다. 웹에서 주로 사용되는 이미지의 종류에는 JPEG 이미지, GIF 이미지, PNG 이미지가 있다.

이미지를 삽입할 때는 <img> 태그를 사용한다. <img> 태그를 사용해서 이미지를 웹 페이지에 표시하는 방법은 웹 페이지에 이미지를 삽입하는 것이 아니라 연결되는 것입니다. <img> 태그에는 두 가지 필 수 속성이 있습니다. 첫 번째는 src 두 번째는 alt 입니다.

src: 이미지의 경로를 지정합니다.
alt: 이미지를 표시할 수 없는 경우 보여줄 대체 텍스트를 지정합니다.

또한 이미지의 너비와 높이를 지정할 수 있습니다. 만약 너비와 높이를 지정하지 않으면 페이지가 이미지를 로드하는 동안 깜빡일 수 있습니다.

 <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

<a> 태그 안에 <img> 태그를 넣어서 이미지에 링크를 걸 수 있습니다.

<a href="링크 주소">
  <img src="이미지 주소" alt="대체 텍스트">
</a>

위의 예시에서 href 속성은 이미지를 클릭했을 때 이동할 링크 주소를 지정합니다. 예를 들기 위해 구글 로고를 이미지로 사용하고 구글로 이동하는 예시를 만들어 보겠습니다.

<a href="https://www.google.com">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google 로고">
</a>

Google 로고

또한 이미지의 테두리(border)를 설정 할 수 있습니다. border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있습니다. border 속서을 사용하면 이미지 주위에 선을 생성하여 시각적으로 구분할 수 있도록 도와줍니다.

<img src="이미지경로" alt="대체 텍스트" width="너비" height="높이" border="테두리 두께">

* 최신 HTML 표준에서는 border 속성이 폐기되었으며, CSS를 사용하여 테두리를 제어하는 것이 권장 됩니다. CSS를 이용한 방법은 추후 CSS를 공부할 때 설명하겠습니다.

HTML에서는 <map> 태그를 사용하여 이미지 맵을 만들 수 있습니다. 이미지 맵은 이미지 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 말합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Image Map Example</title>
</head>
<body>
  <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>
</body>
</html>

위의 코드는 이미지 맵을 생성하는 데 필요한 HTML 코드입니다.

<img> 태그를 사용하여 이미지를 삽입합니다. src 속성을 통해 이미지를 지정하고 alt 속성으로 이미지 대체 텍스트를 지정합니다. usemap 속성을 통해 이미지에서 사용할 맵을 지정합니다.
<map> 태그를 추가하여 이미지 맵을 생성합니다. name 속성을 사용하여 이미지와 이미지 맵을 연결합니다.
<area> 태그를 사용하여 클릭 가능한 영역을 추가합니다. 각 영역은 shape, coords, alt, href 속성을 가집니다.

위의 코드를 사용하면 이미지 맵이 생성되고 사용자는 이미지의 특정 영역을 클릭하여 해당 링크로 이동할 수 있습니다. 실제 이미지와 클릭 가능한 영역의 좌표는 원하는 이미지에 맞게 조정하면 됩니다.

저작자표시 비영리 변경금지 (새창열림)

'웹 > HTML' 카테고리의 다른 글

HTML - 테이블(table) (0)	2023.06.20
HTML - 리스트(List) (0)	2023.06.20
HTML - 색 배경 링크 (0)	2023.06.19
HTML - 스타일(Style) (0)	2023.06.19
HTML - 엔티티 와 문자셋 (0)	2023.06.19

프로그래밍 종합 저장소

HTML - 이미지(Image / <img>)