[TIL#13]HTML&CSS-2

안준현·2021년 4월 13일

HTML / CSS

목록 보기

4/7

웹 기술은 정보표현과 전달에 간편한 방법을 제공하여 인터넷이 실생활까지 확산되는 기폭제 역할을 하였다.
그러나, 웹상에 축적된 정보가 방대해 짐에 따라 많은 문제에 봉착하게 되었다.
- 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보 접근만을 허용하고 있어, 정보 검색시 무수히 많은 불필요한 정보가 돌출하여 정보 홍수를 가중시키고 있다.
- 또한, 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리하여야 하는 문제가 있다.
- 이러한 문제들의 근본원인은 컴퓨터가 정보자원의 의미를 이해하지 못하는데 원인이 있다.
기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할수 있는 웹을 개발하고자 탄생한 것이 Semantic Web이다.

위에서 설명바와 같이 Semantic Web은 과거의 무분별한 태그 사용으로 비효율적인 시스템을 개선하고자, 의미가 있는 태그들을 개발 하였다.

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

img(의미있음) vs div(의미 없음) backgroung-image
- img태그를 사용시 alt속성에 문자열을 넣을 수 있음
- 이는 meta 정보가 되어 alt속성에 작성된 문자열은 meta정보가 되며, Search Engine (검색엔진)은 alt속성에 지정된 문자열을 인식하게 된다.
div background-image의 경우 단순한 이미지 첨부 어떠한 정보도 담지 않는다.

즉 HTML 태그인 <img>를 사용하는 것과 <div> 태그에 CSS 속성인 background-image 를 추가하는 것은 웹 브라우저에 표출되는 모습은 동일하다.

But!