🔖 사이트에 이미지를 넣는 방법은 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 두가지 방법이 있습니다.
img태그를 사용하는 방법
<img src="img경로" alt="마우스오버시 설명">css로 background-image 속성을 추가하는 방법
<html>
<head>
<style>
.bg-img{
background-url: "img경로"
}
</style>
</head>
<body>
<div class="bg-img"></div>
</body>
</html>
그렇담 두가지 방법의 차이점은 무엇일까요?
우선 그전에 우리는 semantic Web과 Semantic Tag에 대해 알아두고 가면 더 수월하게 이해할 수 있습니다.
Semantic Web이란?
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로, 쉽게말해 컴퓨터가 사용할 수 있는 언어를 입력하여 처리하도록 만든 프레임워크이자 기술입니다. 위에 background-image를 css에서 처리하게 한 예시가 semantic Web이라고 할 수 있습니다.
Semantic Tag란?
시멘틱 웹에서 사람도 쉽게 이해할 수 있는 tag name을 사용하여 컴퓨터에 입력하여 처리하게 만든, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag 입니다.
첫번째 예시로 들었던
<img src="img경로" alt="마우스오버시 설명">img태그가 semantic Tag라고 할 수 있습니다. 이 외에도 header, section, nav, footer등 다양한 태그가 있으며 semantic tag 링크 하단에 설명과 함께 나와있습니다.
마지막으로 두 태그방법의 차이점은?
앞서 말했다시피 semantic tag는 사람이 쉽게 이해가능하게끔 만든 tag이기에 img 태그의 alt속성을 사용하여 이미지에 대한 부가설명 등을 붙여 이미지에 대한 정보를 입력할 수 있다. 하지만 semantic web인 background-image는 이미지만을 올릴 수 있고 추가적인 설명을 하기 힘들다는 점이 다르다고 생각합니다.
Better Than Yesterday🌳