HTML <img> 태그의 border 속성

HTML <img> 태그

예제

다음의 HTML은 다양한 두께의 이미지 경계선을 생성할 수 있습니다：

<html>
<body>
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="1" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="2" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="4" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="8" />
</a>
</body>
</html>

직접 시험해보세요

정의와 사용법

<img> 태그의 border 속성은 이미지 주위의 경계 너비를 정의하며, 이는 이미지 경계를 추가하거나 제거할 수 있습니다.

주의사항:기본적으로, 이미지는 경계가 없습니다(이미지가 a 요소 내에 포함된 경우를 제외하고)

브라우저는 대부분의 링크 이미지(예: <a> 태그 내에 포함된 이미지)를 두 픽셀 너비의 경계 안에 표시하여 독자가 이 이미지를 선택하여 관련 문서에 접근할 수 있다는 것을 나타냅니다.

border 속성과 픽셀 단위의 너비 값을 사용하여 이미지 경계를 제거하거나 넓히는 것이 가능합니다 (border="0")

주의:이 속성은 HTML 4와 XHTML에서도 더 이상 권장되지 않지만, 인기 브라우저에서는 여전히 잘 지원됩니다.

추가 학습: 이미지 경계선 제거

브라우저 지원

border 속성을 사용하는 것은 권장되지 않지만, 모든 주요 브라우저에서 지원됩니다.

푸시 및 주의사항

주의사항:HTML 4.01에서는 이미지의 "border" 속성을 사용하는 것을 권장하지 않습니다. XHTML 1.0 Strict DTD 및 HTML 5에서는 이 속성을 지원하지 않습니다.

푸시:사용하세요 CSS의 경계 속성 요소의 경계 스타일을 변경하려면 사용할 수 있습니다. 외부 스타일 시트에서 CSS 경계 속성을 사용하여 사이트에 모든 이미지에 일관된 경계를 설정할 수 있습니다. 이 방법은 단일 이미지에 경계 속성을 설정하는 것보다 훨씬 효율적입니다.

호환성 주의사항

img 요소의 border 속성을 사용하는 것은 권장되지 않습니다; HTML 4.01 Strict 및 XHTML 1.0 Strict DTD에서는 img 요소의 border 속성을 지원하지 않습니다.

CSS를 사용하세요.

CSS 문법: <img style="border:5px solid black">

CSS 예제: 이미지 경계

우리의 CSS 교육에서는 더 많은 정보를 찾을 수 있습니다. border 속성 의 세부 사항。

문법

<img border="value" />

속성 값

값 설명
pixels 픽셀 단위의 경계 높이。

TIY 예제

<img> 태그의 border 속성
이 예제에서는 <img> 태그의 border 속성을 사용하여 이미지 경계선을 변경하는 방법을 보여줍니다.

추가 학습: 이미지 경계선 제거

border="0" 속성을 사용하여 <img> 태그에서 이미지 경계선을 제거할 수 있습니다. 특히 이미지 맵과 같은 일부 이미지에서는 경계선이 없으면 페이지의 외관이 개선될 수 있습니다. 경계선이 없으면 이미지가 더 잘 보일 수 있습니다.

경계선을 제거하면 문서의 사용성이 감소하지 않지만, 더 많은 주의를 기울여야 합니다.因为没有边框就意味着去掉了一种非常常见的超链接视觉指示效果，这使得读者可能不会像原来那么很容易就可以找到这些链接。浏览器通常会在鼠标移动到超链接图像上的时候改变鼠标指针的形状，但是不能指望浏览器一定会这样做，更不应该让用户在没有边框的图像上摸索，已找到那些隐藏的链接。

무경계선 이미지를 사용할 때는 가장 좋다. 이렇게 하면 독자가 이 이미지를 클릭해야 한다는 것을 알 수 있습니다. 간단한 텍스트만으로도 문서가 독자에게 더 나은 접근성을 제공하는 것은 어려울 수 있습니다.

HTML <img> 태그