포스팅의 시작, 질문
아래 질문에 대답할 수 있는가?
❓️ : 사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과
<div>태그에background-image속성을 추가하는 것인데요,
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요
대충은 알 것 같은데 정확히 설명하기는 살짝 애매한 이 느낌..
관련 개념인 Semantic web, semantic tag에 대해 알아본 뒤 다시 대답해보자
Semantic Web
현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지(개념의 타입이나 사용상의 제약조건들을 명시적으로 정의한 기술) 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스 리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행중이다. - wiki
조금 더 확실히 이해하기 위해, 검색엔진이 어떻게 웹사이트 정보를 수집하는지를 알아보자
검색엔진은 매일 전세계의 웹사이트 정보를 수집하고 (=크롤링),
검색 사이트 이용자가 검색할만한 키워드를 예상해 이에 대응되는 인덱스를 만들어둔다.(=인덱싱)
인덱스를 생성할 때 사용되는 정보는 결국 웹사이트의 HTML 코드이다.
따라서 검색 엔진은 HTML 코드만으로 그 의미를 인지해야 하는데,
그 코드에는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어가 뒤섞여있다.
예를 들어 아래의 두 코드는 브라우저에서 동일한 외형을 가지지만, 의미론적(semantic)으로는 큰 차이가 있다.
<font size="6"><b>선릉 맛집 추천</b></font>
<h1>선릉 맛집 추천</h1>
1행의 <font>는 의미론적인 관점에서 보면 의도가 명확하지 않고, 크기와 굵기만 지정하는 메타데이터를 브라우저에게 알린다.
2행의 <h1>은 가장 상위 레벨의 header라는 의미를 가지고 있다.
검색엔진은 h1 요소의 content를 중요한 제목으로 인식해 (선릉만 검색하도 결과에 나오도록) 인덱스에 포함시킬 확률이 높고, 사용자도 h1 요소의 content가 제목이구나 인식한다.
이렇게 시맨틱 요소로 구성되어 있는 웹페이지는 효과적인 크롤링과 인덱싱을 가능하도록 한다.
위 사례로 알 수 있듯이 Semantic Web은 '의미론적인 웹'이라는 뜻으로, 웹 상의 다양한 서비스와 데이터들이 자유롭게 호환되고 공유되기 위한, 그리고 사람과 기계, 기계와 기계가 지식 정보를 서로 명확히 정의, 교환할 수 있는 표준이다.
Semantic Tag
HTML의 tag는 non-semantic tag와 semantic tag로 나뉘어진다.
semantic
Non-Semantic tag
: 의미가 없는 tag. content에 대하여 어떠한 설명도 하지 않는 tag
예를 들어 우리는 <div>만 보고선 그 안에 어떤 content가(text, img 등) 들어있을지 알 수 없다. <span> 역시 tag만 보고선 어떤 것을 위한 text (title, header 등) 일지 알 턱이 없다.
Semantic tag
: 의미를 가진 tag. 그 자체로 브라우저, 검색엔진, 개발자 모두에게 content의 의미를 정확히 설명하는 tag
예를 들어 <img>를 보면 그 안에 그림이, <header>를 보면 그 안에 문서/섹션의 머릿말이 들어갈 거라고 알 수 있다.
포스팅의 결론, 질문에 대한 대답
Semantic Web과 Semantic Tag의 개념을 알게된 지금, 아래 질문에 답해보자
❓️ : 사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과
<div>태그에background-image속성을 추가하는 것인데요,
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요
두 가지 방법은 두개의 차이점이 있다.
첫째, tag 그 자체로 content의 의미를 전달하고 있는지에 대해 차이가 있다.<img> 는 tag 자체로 그림이 들어갈 것임을 나타내는 semantic tag이고 <div> 태그는 그 안에 그림이 들어갈지 텍스트가 들어갈지 알 수 없는 non-semantic tag이다.
둘째, <img> tag는 <img alt=”이미지 로딩실패”>처럼 이미지가 없을 때 추가할 수 있는 문구가 있지만 <div> 에 background-imgae 속성을 줄 경우 에러가 뜨면 아무것도 나오지 않는다.
따라서 사이트의 이미지가 의미론적으로 중요한 content의 일부일 경우 <img> tag 를 이용하는 것이 좋고, content의 일부에 해당하지 않을 경우엔 <div> tag를 사용하는 것이 좋다.
📌️ 참고학습자료
한국데이터산업진흥원 - 데이터 기술 자료
poiemaweb
