본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

img 요소

최초 작성일
최종 수정일
이번 시간에는...
HTML 문서 내에 이미지를 넣을 수 있는 img 요소(태그)에 대해 알아봅니다. 또한 웹 접근성을 위해 img 요소에 반드시 필요한 속성인 alt 속성을 살펴보며, alt와 title 속성을 비교해 봅니다.

지난 강의에서 이미지에 대해 알아보았으니, 이번에는 그 이미지를 넣을 수 있는 img 요소를 살펴보도록 하겠습니다. img 요소는 인라인 요소로써, 전에 한 번 봤듯이 스스로 닫는 태그입니다.

위와 같이 사용하며, src 속성에 이미지 주소를 넣어 사용합니다. 이 img 요소에서 src 속성과 alt의 속성은 필수 속성입니다. 보통 src 속성만 사용하는 경우가 있는데요, alt 역시 반드시 써주셔야 합니다.

alt 속성

img 요소의 alt 속성은 Alternate(대체하다)의 줄임 말입니다. 다시 말해 이미지의 대안을 나타냅니다. 이 이미지는 외부의 주소이기 때문에, 주소가 잘못되었거나 해당 위치의 서버에 문제가 있다면 이미지를 못 읽어 올 수 있습니다. 이럴 때 이 alt 속성의 내용이 해당 이미지를 대체하여 나타납니다.

이미지를 불러오지 못했을 때에는 alt의 텍스트가 화면에 나타납니다.
IE7에서 이미지를 불러오지 못 했을 때의 모습

하지만, 이미지가 제대로 로드가 될 경우에는 이 속성 값이 브라우저에서 보이지 않기 때문에 이 속성을 무시하는 경향이 있지만, 반드시 써야 할 속성입니다. 왜냐하면, 이 alt 속성은 이미지를 보지 못하는 분들이 보기 때문입니다. 시각장애인은 이미지를 볼 수 없기 때문에, 이 이미지의 alt 속성을 스크린리더로 듣습니다. 또한, 이미지를 제대로 이해하지 못하는 검색엔진 역시 이미지를 이 alt 속성으로 받아드립니다.

alt 속성은 해당 이미지를 묘사해주는 내용 150자 이내로 들어가야 합니다.

또는 텍스트 이미지의 경우 해당 텍스트를 반드시 포함해야 합니다.

이미지형태로 쓰여진 안녕하세요 문자

하지만, 종종 이 이미지가 아무 의미 없는 꾸미는 이미지일 수 있습니다. 리스트 앞에 나오는 블릿같은 이미지의 경우입니다.

항목 1

항목 2

이럴 경우에는 오히려 alt의 속성 값을 비워두는 것이 좋습니다.

위의 코드에서 alt로 블릿을 넣을 경우, 스크린 리더에서 '블릿 이미지, 항목 1', '블릿 이미지, 항목 2' 이런 식으로 읽혀지게 됩니다. 무의미한 내용입니다. 이런 내용은 검색엔진 역시 읽혀질 필요가 없습니다. 이렇게 의미 없는 내용은 코드 두 번째 줄처럼 alt 속성을 선언만 하되, 값을 비워두어야 합니다. 만약 alt 속성 자체를 쓰지 않으면 비 표준입니다.

또한 종종 이미지 alt 값이 이미 나온 텍스트와 완전 동일한 텍스트를 넣기도 하는데, 이는 피해야 할 방법입니다. 보통 사이트를 구축하고 자동으로 보여줄 때 다음과 같이 나옵니다.

즐거운 여름 휴가

다음과 같이 넣을 경우, 스크린 리더에서 '즐거운 여름 휴가 이미지, 즐거운 여름 휴가'라는 식으로 같은 말을 두 번 반복하게 됩니다. 이런 경우에는 차라리 이전에 살펴본 의미 없는 이미지처럼 alt를 비워두는 것이 낫습니다.

하지만, 위와 같이 a 요소로 이미지와 문구를 같이 감싸는 것이 아닌 각각 감싸는 경우가 있습니다.

이럴 경우, img 요소가 들어간 링크는 내용이 비어 버립니다. 이럴 경우에는 어쩔 수 없다면, 같은 문구로라도 넣어주는 게 그나마 낫습니다. 하지만, 웬만하면 이런 경우를 만들지 마세요.

alt 와 title

보통 대부분의 브라우저에서는 alt 속성 값이 보이지 않습니다. 하지만 IE 7 이하 버전의 브라우저에서 이미지 위에 마우스를 가져다 대면, alt 속성값이 툴팁 형태로 보여집니다.

IE에서 오버했을 때 alt가 노출되는 모습

사실, 이것은 비정상적인 동작입니다. 이런 툴팁을 원한다면 title 속성을 사용하시기 바랍니다. title 속성은 거의 모든 브라우저에서 잘 보여집니다.

사실 IE7 이하에서의 이런 비정상적인 동작 덕분에, 예전에는 alt와 title을 많이 헷갈려 하기도 했습니다. 때문에 종종 alt 속성 대신 title을 넣는 실수 들도 있었습니다. 하지만, title 속성은 절대 alt 속성을 대체할 수 없으니 주의하시기 바랍니다. title은 요소에 대한 부가적인 설명입니다.

그 외의 속성들

longdesc

alt는 글자 수에 어느 정도 제한이 있기 때문에, 이미지에 대한 긴 글을 담은 페이지 주소를 넣어주는 속성입니다. a 요소의 href 속성값처럼 해당 주소(주소에는 html 뿐 아니라 txt파일도 가능합니다.) 또는 '#'으로 시작하는 id 값을 적어주면 됩니다.

이 요소는 시각 장애인의 접근성을 높여줍니다만, 잘 사용되지 않아 HTML5에서는 폐지된 속성입니다. HTML5부터는 이 속성보다는 차라리 링크를 통해서 누구나 해당 텍스트를 볼 수 있도록 권장하고 있습니다. 그리고 이 longdesc까지 필요할 정도 정보를 이미지로 처리하기 보다는, 텍스트로 나타내길 권장합니다.

width, height

width, height 속성은 각각 이미지의 너비와 높이를 지정하는 속성입니다. 이 속성이 없을 경우는 이미지의 원래 크기로 웹 페이지에 나타납니다. 이 속성이 없을 경우에는 페이지가 로딩되면서 이미지를 아직 받지 못했을 때에는 매우 작게 있다가, 이미지가 받아졌을 때, 해당 크기만큼 늘어나게 됩니다. 보통 쇼핑몰에서 상품 페이지를 처음 열었을 때, 해당 페이지가 열리면서 스크롤 바 길이가 점점 작아지는 (페이지 세로 길이가 늘어나서) 현상들이 이러한 이유입니다.

이 높이와 너비는 외형이기 때문에 css를 통해서 다 제어가 가능합니다만, 게시 글 본문의 이미지와 같이 일일이 css를 줄 수 없는 이미지들에 사용하면 유용한 속성입니다. 이 속성을 넣더라도 css로 다시 조절 가능합니다.

요점 정리
  • img 요소는 스스로 닫는 태그 형태의 인라인 요소.
  • alt 속성은 이미지를 대체하는 대체 텍스트, 이미지 내용을 텍스트로 넣음.
  • alt 속성에 입력된 대체 텍스트는 검색엔진과 스크린 리더 등에서 활용.
  • alt 속성은 반드시 선언 되어야 하며, 선언되지 않을 경우 비 표준.
  • 이미지가 아무런 내용을 담지 않을 경우(또는 기존 텍스트와 중복되는 경우), alt 속성은 선언하되 빈 값으로 선언
  • alt 속성이 IE7 이하에서는 툴팁형태로 보여지나, 이는 올바른 동작이 아님. 툴팁은 title 속성으로 넣어야 함.
  • title은 절대 alt를 대체할 수 없음. alt 없이 title을 적어선 안됨.
  • alt 속성으로 담기 어려운 긴 내용은 longdesc 속성을 활용. 하지만 긴 내용은 텍스트로 표현을 권장
  • width, height는 이미지의 기본 크기를 명시하는 속성

이 글이 유용하셨다면 친구들에게 공유 해주세요.