사이트에 이미지를 넣는 방법
- img 태그를 사용하는 방법 in HTML
- div 태그에 background-image 속성을 추가해서 css에서 작업
🧐 시맨틱 웹(Semantic Web)
인터넷의 활성화를 시작으로 웹의 사용은 폭발적으로 늘어났습니다. 그에 따라 웹상에 축적된 정보의 지나친 비대로 인해 많은 문제에 봉착하게 되었습니다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보접근만을 허용하고 있어, 정보 검색 시 무수히 많은 불필요한 정보가 처리되어 정보의 홍수를 가중시켰습니다. 또한 검색 시 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리해야 하는 문제가 발생했습니다.
위와 같은 문제로 팀 버너스리의 팀은 웹 기술의 비전으로 시맨틱 웹(Semantic Web)을 제시했습니다.
🤔 그렇다면 시맨틱 웹의 목적과 사용 이유?
시맨틱 웹이 등장한 이유와 같이 웹상의 검색엔진의 최적화를 위해서 입니다. 우리는 현재 구글, 네이버 등과 같은 검색 사이트를 이용합니다. 그리고 이 검색 사이트들은 어떤 웹 사이트를 검색하기 위해 검색엔진을 사용합니다. 우리 개발자들은 프로덕트를 만들게 되면 사용자들의 검색어에 많은 노출을 할 수 있어야 하게 때문에 검색엔진 최적화(SEO: Search Engine Optimization)를 고려해줘야 합니다. 따라서 검색엔진에 잘 노출 되려면 시멘틱 웹을 따라야한다는 뜻이기도 합니다
#Semantic tag
시맨틱 웹을 용이하게 하기 위해, 의미를 가지고 있는 다양한 semantic tag들이 새로 추가되어왔는데, 아래와 같은 요소들입니다. 반면, 의미를 가지고 있지 않은 non-semantic tag에는 div, span 등이 있다.
semantic tag : form, section, nav, aside, footer, table 등
non-semantic tag : div, span
태그의 경우, 해당 컨텐츠가 이미지라는 것을 명확히 알려주는 semantic tag 중의 하나로, 검색 엔진에서 웹페이지를 검색할 시에 src 또는 alt(이미지 설명) 정보를 바탕으로 보다 명확한 검색을 가능하게 할 수 있고, 이는 사이트의 노출에 긍정적인 영향을 끼칠 수 있습니다. 반면, 태그의 경우에는 non-sematic tag로, 사이트 컨텐츠에 대한 의미나 설명이 없습니다. background-image의 경우에는 반복적으로 사용되는 작은 아이콘이나, 단순히 사이트의 디자인적인 측면을 강화해주는 이미지들에 사용하는 것이 좋습니다.
