사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.
당신은 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명 할 수 있나요?🥲 아니요 못하겠습니다...
1. Semantic Web
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻을 가지고 있습니다. 쉽게 말해 '의미를 이해하는 웹' 이라고 생각하면 됩니다.
😮 의미를 이해하는 웹?
'의미를 이해한다' 라는 것은 총 두 가지 방식으로 나눌 수 있습니다.
1. 웹이 인간이 준 데이터를 스스로 이해한다는 의미
2. 인간이 컴퓨터와 웹이 (인간이 준 데이터를) 이해할 수 있도록 데이터를 전달하여 웹이 보다 더 효율적으로 정보를 처리할 수 있게 한다는 의미
👉 즉, 시맨틱 웹은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하고, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것이 목표인 것이죠! 결국 컴퓨터가 스스로 정보의 의미를 파악하고 정보를 처리, 추론할 수 있는 환경을 구축하는 것을 말해요. 이로써 웹이 존재하는 수많은 웹페이지들에 메타데이터를 부여하고 기존의 잡다한 데이터 집합(non-semantic) 에서 의미와 관련성을 지니는 거대한 데이터베이스를 구축하게 됩니다.
👉 조금 더 쉽게 말하자면 개발자가 의도한 요소의 의미가 명확히 드러나게 작성하여 컴퓨터가 스스로 정보의 의미를 파악하고 추론할 수 있는 웹입니다.
2. Semantic Tag
앞서 시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻을 가지고 있다고 했습니다. 그렇다면 시맨틱 태그의 뜻은 굉장히 쉽죠! Semantic은 '의미론적인'이라는 뜻을 가진 형용사입니다. 따라서 시맨틱 태그란 의미가 있는 태그를 말해요.
과거의 무분별한, 의미 없는 태그를 사용하던 시스템을 개선하고자 등장했다고 합니다.
👉 의미가 있는 태그를 사용한다면 이런 장점이 있어요
검색엔진최적화(SEO:Search Engine Optimization):
검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단하고 중요한 정보로 인식되는 것을 인덱스에 포함시켜 검색엔진에 노출시키기 때문에 시맨틱한 태그를 적절한 부분에 사용하는 것이 좋아요. 그렇지 않으면 검색엔진이 html 파일을 분석할 때 정확한 컨텐츠를 식별하기 힘들어 합니다.
시각 장애 사용자:
시각장애가 있는 사용자가 스크린 리더를 사용하여 웹페이지를 탐색할 때 도움이 됩니다.
코드의 가독성 상승 및 유지보수 용이
시맨틱 태그를 사용한 코드를 찾는건 수도 없이 많은div 태그를 탐색하는 것보다 훨씬 쉽습니다. 만약 시맨틱 태그를 사용하지 않고 온통 div (non-semantic) 태그로 범벅을 해놓는다면 코드를 읽는 다른 개발자들은 이게header 인지,nav 인지,section 인지..쉽게 파악 할 수 없겠죠? 하지만 반대로 의미가 있는 요소에 시맨틱 태그를 사용한다면 개발자들에게 명확한 의미를 전달할 수 있게 되고 코드의 가독성이 높아지며 유지보수가 용이하게 됩니다.
💁♀️ 예시를 들어볼게요
<div id="header"> 내용 </div>
<header> 내용 </header>두 코드의 차이를 아시겠나요? 첫번째는 단순히 div 에 'header' 라는 id 값을 집어넣었지만 두번째는 header 라는 시맨틱 태그 사용으로 컴퓨터와 개발자가 태그의 의도를 명확히 파악할 수 있게 하죠. 컴퓨터는 단순히 id 값이 'header' 라고 적혀 있다고 그 부분이 웹 페이지의 header 부분에 해당하는지 알 수 없습니다.🤦... 하지만 header 태그로 명시해준다면? 컴퓨터는 '아하! 이건 header 부분을 의미하는 중요한 정보구나!' 라고 생각할테고 곧 개발자가 무엇을 더 강조하고자 하는지, 무엇이 중요한 정보인지 쉽게 알 수 있겠죠?
3. 다시 돌아와서
사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.
당신은 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명 할 수 있나요?
🤔 자, 이제 어느정도 알았으니 처음 질문에 답변을 할 수 있을 것 같아요
<img src="https://naver.com" alt="naver">
<div id="background-img></div>#background-img {
background-image: url('https://~~~.png
};두개 다 사이트에 이미지를 넣는 방법으로 작성된 코드입니다.
첫번째는 html 에서 작성된 코드로, alt 속성에 문자열을 넣을 수 있죠.
제가 저기에 naver 라고 주소에 대한 설명을 적은 것 처럼요! alt 속성에 적힌 문자열은 곧 meta 정보가 되고 검색엔진은 alt 속성에 지정된 문자열을 인식 할 수 있게 됩니다 👍
하지만 두번째의 경우에는 단순히 CSS 에 작성된 이미지 첨부가 목적인 코드로, img 태그와는 달리 어떠한 정보도 담고 있지 않기 때문에 검색 엔진에 노출이 되지 않습니다.
결론::
만약 내가 사용하고자 하는 이미지가 검색 엔진에 노출이 되어야 하는 중요한 정보라면img태그를 사용하는 것이 좋고, 단순히 꾸밈을 위한 이미지를 삽입하고 싶다면background-image태그를 사용하는 것이 좋을 듯 합니다!
출처)
https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9
https://xtring-dev.tistory.com/entry/HTML-%EC%8B%9C%EB%A7%A8%ED%8B%B1-%EC%9B%B9Semantic-Web%EC%9D%B4%EB%9E%80-HTML%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%A4%91-%EA%B8%B0%EB%B3%B8
https://junbucks7.tistory.com/69
https://intrepidgeeks.com/tutorial/about-html-semantic-weband-semantic-tags
