[HTML][tag] img
<tag>에 관하여
-요약설명
- img요소 : HTML 문서 내에 이미지를 넣을 수 있는 이미지 태그입니다.
-심화설명
·img 요소 / 사용법 <img src=" 주소값" alt= " 이미지의 대체 요소">
image의 약자인 img태그는 인라인 요소로써 meta태그와 같이 단일 태그입니다. img태그의 속성으로는 주소값을 확인하는 src속성과 image태그가 나오지 않을때나 스크린 리더에 이미지태그가 있다는것을 알려줄 alt속성이 있습니다. 가끔 이미지를 불러오는 주소가 잘못되었거나, 로드가 되지 않을때 엑스표시로 된 박스(엑박)을 보신적이 종종 있을것입니다. 참고1과 같은 사진 입니다. 이와 같이 이미지가 나오지 않을때 대체할 수 있는 텍스트로 alt를 사용하며 시각장애인들은 이미지가 보이지 않기때문에 이 alt속성을 이용하여 스크린리더가 읽어주기 때문입니다. 또한 의미없는 사진을 올릴 경우엔 alt속성을 쓰되 칸을 비워놔야 합니다. 왜냐하면 alt속성을 사용하지 않으면 비 표준이기 때문입니다. alt속성은 150글자의 글자 제한이 있습니다.
이미지 로드
예제1
<body>
<img src="www.wdfkjkg.com" alt="벤베스 실험실 로드 실패!">
</body>
결과
참고 1
-width, height
이미지의 크기를 지정해 줄 수 있는 속성입니다. 이 속성이 입력되지 않을땐 웹페이지에서 사진의 원래 크기로 나타내며, 점차 HTML과 CSS의 영역을 나누기 때문에 CSS로 width, height값 조절을 많이 하는 편입니다.
※특징
만약 사진과 제목이 같은 a태그나 한 태그 안에 있을시에는 굳이 alt를 사용하지 않아도 됩니다. 그럴 시엔 스크린 리더기에서도 2번 읽혀지기 때문입니다. 대부분의 브라우저에서는 alt 속성 값이 마우스를 올려놨을 때 보이지 않습니다. 하지만 ie 7버전 이하에서는 마우스를 이미지 위에 올려놓았을 시 이미지 위에 텍스트창이 보입니다. 사실 이것은 정상적인 동작은 아닙니다. title속성은 alt속성을 대체할 수 업으니 주의하시기 바랍니다. title은 그림의 부가적인 설명일 뿐입니다. alt는 검색엔진에서의 요소로도 사용되기 때문에 반드시 입력해줘야 합니다.
