HTML <img> Tag and CSS background-image property / Semantic Web & Semantic Tag

Semantic

Semantic의 뜻을 캠브릿지 사전에서 찾아보았다.

(of words and language) connected with meaning:
해석하면 (단어와 언어가) 의미로 연결되어 있는. 단어와 언어가 의미를 갖고 있는 걸 시멘틱이라고 한다. 

 

Semantic Web

위키피디아에서는 아래와 같이 정의한다.

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

우리 인간들은 인터넷의 활성화로 많은 정보들을 얻을 수 있게 되었지만 반대로 불필요한 정보들도 많아졌다. 넘쳐나는 정보화 시대에서 내가 필요한 정보를 하나하나 찾아야 했다. 시멘틱 웹은 위에 첨부한 개념처럼, 기계(컴퓨터)가 사람을 대신해 웹 페이지의 정보들을 이해하고 우리가 필요한 형태로 가공해주는 것을 의미한다. 우리가 굳이 검색하지 않아도 컴퓨터가 알아서 정보들을 찾고 해석하고 가공해서 우리한테 필요한 정보들만 보여준다니!! 이 얼마나 편리한가. 그러기 위해서는 기계가 웹 페이지를 이해할 수 있도록 작성을 해야했다. 과거의 웹 문서들은 div태그나 body태그를 사용하여 웹 사이트에 대한 설명을 직접 적었는데 id나 class를 부여해도 컴퓨터는 이 부분이 헤더를 나타내는지, 푸터를 나타내는지 모른다. id나 class는 사람들마다 다 다르게 지정하니까 알 수 없는 거 아닐까..? 그래서 지금은 header, nav 등과 같은 의미를 갖고 있는 semantic tag들을 사용해 웹을 만드는 걸 선호한다.

 

Semantic Tag

의미를 가진 태그로 웹 페이지 각각의 파트들을 정의하는 데 사용된다.(상단바, 사이드, 네비게이션바 등등)

출처 :&nbsp;https://www.w3schools.com/html/html5_semantic_elements.asp

 

 

✅ 사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img태그를 사용하는 것과  태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.위의 질문에 대답할 수 있나요? 실제 면접에서 자주 다루는 질문입니다. 이를 설명하기 위해서는 Semantic Web과 Semantic Tag에 대한 이해가 있어야 합니다.

1. 두가지 방법의 차이점 :

- img태그를 사용하면 이미지에 문제가 있는 경우 깨진 이미지가 보이고 alt속성을 사용해 해당 이미지를 대체할 텍스트를 명시할 수 있다. 반면에 css의 background-image속성은 이미지에 문제가 생겨도 아무 이미지가 노출되지 않는다.

- img태그는 html 파싱시 파일을 읽어오므로 성능이 css의 background-image속성보다 좋다.

 

2. 어떠한 경우에 사용하면 좋은가:

* HTML <img> Tag

- 디자인 요소뿐만 아니라 하나의 컨텐츠로서 작용해야 할때

- 검색할 때 노출이 되도록 만들고 싶을 때

 

* CSS background-image property

- 컨텐츠의 한 부분이 아니고 오로지 디자인 요소로만 쓰일 때

- 이미지의 특정 부분만 보여주고 싶을 때

- 텍스트를 대체할 이미지가 필요할 때

- 전체 화면을 이미지로 채우거나 반복된 이미지가 필요할 때

 

==> 정리!! 하나의 컨텐츠로서 의미있는 이미지를 표현해야한다면 img태그를 사용하고 그냥 디자인 요소로, 말그대로 하나의 배경 속성으로만 사용하고 싶다면 css의 background-image속성을 사용하자!

 

 

 

 

https://www.w3docs.com/snippets/html/when-to-use-html-img-tag-and-css-background-image-property.html

When to Use HTML <img> Tag and CSS background-image Property