[HTML] Image Alts

안녕하세요. 동기 여러분! 오늘은 Alts 속성에 대해 알아보겠습니다.

 

Image Alts

alt 속성은 Alternative text에 줄임말입니다. Alternative가 대체 가능한, 대안이 되는 이라는 뜻이 되니까 Image Alts라고 하면 이미지의 대체 가능한 텍스트라는 말이 되겠습니다.

 

---

 

사용 목적

1. 웹 페이지를 로드하는 중에 가끔 이미지가 안 뜨는 경우가 있는데, 이럴 경우 이미지가 있어야 하는 곳에 마우스 커서를 올리면 alt에 작성된 내용이 뜨게 되고 사용자가 읽을 수 있게 됩니다.
2. 시각 장애가 있는 사용자가 화면에 뜨는 내용들을 읽어주는 소프트웨어를 사용할 경우, alt를 통해 이미지도 읽어줄 수 있습니다.
3. alt는 Search Engine Optimization(SEO)에서도 상당히 중요한 역할을 하는데요, 우리가 구글이나 네이버 같은 강력한 검색 엔진을 사용할 때(이미지를 검색할 때) 컴퓨터는 이미지 자체는 읽지 못하고 이미지에 있는 alt의 내용을 통해 검색을 도와줍니다. alt를 사용할수록 검색 노출이 올라가 상당한 이점을 누릴 수 있습니다.

 

---

 

사용 방법

<img src="URL" alt="이미지 설명" />

사용 방법은 단순히 src= "URL" 옆에 한 칸 띄우고 alt="내가 쓰고 싶은 이미지 설명"을 넣어주면 됩니다.

 

---

 

예

나무위키에서 디아블로 2를 검색하면 패키지 이미지가 하나 뜨는데 이것을 분석해보겠습니다.
링크 : https://namu.wiki/w/%EB%94%94%EC%95%84%EB%B8%94%EB%A1%9C%202

 

 

이미지 출처 : 나무위키 디아블로2, 블리자드 엔터테인먼트

 

저번 시간과 마찬가지로 F12번을 눌러 Elements에서 이미지의 값을 가져왔더니 alt= "diablo2package"라고 적혀 있습니다. 아까 사용 목적 3번째에 SEO에서 alt가 상당히 중요한 역할을 한다고 했습니다.

 

그렇다면 실제로 alt의 내용을 검색해도 이미지가 뜨는지 확인해봅시다.

 

대박...

 

너무나도 놀랍지 않습니까? 뜹니다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

---

 

오늘의 느낌

코딩의 세계는 참 재밌다 ㅋㅋㅋㅋ