TIL# 37-2 CSS (3)

Dasom·2020년 8월 19일
0

css

목록 보기
3/6
post-thumbnail

Semantic Web

웹 기술은 축적된 방대한 데이터에 대해 키워드(keyword)에 의한 정보 접근만을 허용하고 있어, 정보 검색시 무수히 많은 불필요한 정보가 돌출한다. 또한, 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어 모든 정보를 사용자가 직접 개입해서 처리하여야 하는 문제가 있다. 이러한 문제들의 근본원인은 컴퓨터가 정보자원의 의미를 이해하지 못하는데 원인이 있다.

시맨틱 웹(semantic web)은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할수 있는 웹을 만드는 것이 목표이다.

Semantic Tag

시멘틱(Semantic)이란 '의미가 통하는' 이라는 뜻이다. 시멘틱 태그란 태그만 보고도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그를 말한다.

왜 semantic tag 를 이용할까?

시멘틱 태그를 이용하거나 이용하지 않거나 웹 페이지에 나타나는 것은 똑같다. 하지만 실제로 문서를 처리할 때는 큰 차이가 있다.

시멘틱 태그로 작성된 소스를 보면 태그만 보고도 어느 부분이 제목이고 어느 부분이 내용인지 알 수 있다.

시각장애인들은 웹 사이트를 이용할 때 화면 낭독기 같은 웹 보조기구를 사용하는데 이때도 시멘틱 태그를 통해 어느 부분이 제목이고 내용인지 구별할 수 있어서 내용 전달이 더 정확해진다.

semantic tag 의 종류

<header> 머리말 지정

<nav> 문서를 연결하는 네비게이션 링크

<section> 주제별 컨텐츠 영역

<article> 컨텐츠 내용 넣기

<aside> 본문 이외의 내용 표시

<iframe> 외부 문서 삽입

<footer> 제작 정보와 저작권 정보 표시

<address> 사이트 제작자 정보, 연락처 정보


Question

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

<img> 는 웹 크롤링을 하는 등의 문서 처리를 할 때 이미지에 대한 정보를 볼 수 있지만, <div> 태그에 background-image 속성을 추가하는 것은 이미지에 대한 정보를 알 수 없다. 따라서 <img> 는 이미지에 대한 정보가 중요할 때, <div> 태그에 background-image 속성을 추가하는 경우는 의미가 없는 그저 '장식'으로만 이미지를 넣는 경우에 사용한다.

profile
개발자꿈나무🌲

0개의 댓글