Semantic web 과 Semantic tag에 대한 의미
Semantic web이란 의미론적인 웹 이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다. 사람의 머리속의 언어에 대한 이해를 컴퓨터언어로 표현하고 이것을 컴퓨터가 사용할 수 있도록 만든다는 것. 인터넷에 존재하는 수많은 웹 페이지에 메타데이터를 부여하여, 잡다한 데이터 집합이 아닌 '의미'와 '관련성'을 가지는 거대한 데이터베이스를 구축하고자 하는 것이 Semantic web이다.
Semantic Tag란 Semantic Web에서 사람과 기계가 이해할 수 있는 형태,
즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag이다.
조금 더 쉽게 말자하면 HTML5 언어에 익숙하지 않은 사람이 보고도 작성된 코드의 태그가 무엇을 의미하는지 쉽게 알아볼 수 있도록 하는 태그를 Semantic Tag 라고 한다.
img태그와 background-img속성의 차이점
img tag는 결국 의미가 있는 시맨틱 태그로써 컴퓨터가 이해할 수 있고 alt 속성으로 에러 발생시 이미지가 깨져도 어떠한 이미지인지 알 수 있지만
background-image는 의미있는 태그가 아닌 그냥 속성으로 css에 작성한다.
이미지에대한 에러가 발생시 어떠한 정보도 알 수 없다.
또 컴퓨터는 에러가 발생한 background-image가 어떤 이미지인지 알 수 없다.
결론은 사용자를 위한 이미지가 에러 시 이미지가 깨져도 어떠한 이미지인지 정보가 들어가야하고 조금 더 검색엔진에 의해 웹이 잘 노출 되도록 하기 위해선
시맨틱 태그인 img tag를 사용하고, 그저 웹 디자인과 같은 미적요소로 이미지를 보여주기 위해서는 background-image를 사용하는게 좋을 것 같다.
img태그와 background-img 예시
태그로 이미지 넣기
이미지를 웹 사이트에 추가하는 방법이 몇개 있는데
가장 많이 쓰이는 방법은 img태그를 사용하는 것
alt: image가 뜨지 않았을 때(서버에서 image가 삭제됐거나 잘못된 이미지 주소일 때) image 대신 보여줄 텍스트
src: image 파일 경로 or image url 주소
<img src="이미지 주소" alt="이미지 에러 발생시 출력할 텍스트">img 태그의 속성(attribute)에는 width, height 가 있어서 html에서 직접 수정 가능
<img src="이미지 주소" alt="이미지 에러 발생시 출력할 텍스트"
width="이미지 가로 길이" height="이미지 세로 길이">!하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 style.css에서
작성하는 것이 좋음.
background-image로 이미지 넣기
태그가 아니라 css를 이용해 이미지를 생성 하는 것
<style>
background-image: url(이미지 주소);
</style>사이트에 이미지가 있을때 어떤것은 img태그로 만들고, 어떤것은 css의 background-image 속성으로 이미지를 추가했는지 사용자는 알기 어렵다.
(개발자 도구를 열어서 직접 확인 가능)
