img 태그와 백그라운드 이미지에 대하여

[WEB] semantic web & semantic tag

 

위의 글에서 이어집니다!

먼저 보고 오세용

---

 

우리는 앞서 시맨틱 웹이 그래서 어떤 것인지 맛만 좀 봤고

시맨틱 태그를 쓰고 쓰지 않고가 어떠한 차이가 나는지도 맛을 좀 봤다

 

이미지를 표시하는 방법에는

HTML의 img 태그를 이용하는 방법과

CSS의 background-image 를 이용하는 방법이 있는데

 

img 태그는 어떠한 이유로 이미지를 로드할 수 없을 때의 상황도 가정하고 있다

alt의 값이 바로 그 로드할 수 없을 때의 상황을 대비한 것!

 

그럼 뭔가 백 그라운드 이미지를 사용하는 것이 img 태그를 이용하는 것의 하위호환인 느낌이 들 수 있지만

그저 서로 다른 것 뿐이라고 생각한다

 

예를 들어 우리가 어떠한 사이트를 만든다고 했을때

 

꼭 필요한 이미지 그러니까 사용자가 이 페이지에서 얻어가고자 하는 정보와 밀접한 관련이 있는 이미지라면

그 이미지가 반드시 필요할 것이고 그럼 그 이미지가 출력되지 않는 것은 굉장히 크리티컬하다

예컨데 사용자는 이미지가 로드되지 않았음을 인지한다면 사이트를 새로고침하는 등의 액션을 취할 것이다

해당 자리에 어떠한 이미지가 로드되어야 함을 사용자에게 인지시키기 때문이다

 

하지만 꼭 필요하지 않은 이미지의 경우 가령 이해를 돕기 위함이 아닌 장식처럼 심미적인 것들

그런 것들은 굳이 이미지가 로드되지 않음을 사용자에게 알릴 필요가 없다

(물론 디자인이 사용자 경험과 관련 없다는 얘기는 아니다)

 

이전 글에서 설명한 시맨틱 태그들은 내가 부여한 태그가 어떤 의미를 내포하고 있는지 개발자와 컴퓨터 모두 알 수 있게 한다

마치 img 태그가 단순히 이미지만을 나타내는 것이 아닌 그 이미지가 어떤 역할을 하고 있는지를 내포하고 있는 것처럼

 

이와 달리 백그라운드 이미지는 단순히 이미지만을 삽입하고 그 이미지는 어떠한 의미도 내포하고 있지 않을 수 있다

이런 점에서는 시맨틱 요소보단 논 시맨틱 요소와 연관지어 생각해볼 수 있겠다

 

---

아 물론 내 설명이 완벽한건 아니다

완벽하지 않을 수도 있는 것이 아니라 완벽하지 않다

난 시맨틱 웹 또는 태그에 관하여 모두 알고 있는 것이 아니기에ㅋㅋㅋㅋ

다만, 이 글을 읽는 사람들이 감을 아주 조금이라도 잡는다면 좋을거 같다