위코드 Pre Cource - Semantic Web과 Tag

마지막 과제로 전체 내용에 대한 복습과 함께 다음 질문을 받았다.

 

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

 

흠... 잘 모르겠다.

 

일단 <img> 태그를 사용해서 이미지를 표시하던, background-image 속성을 사용해서 이미지를 표시하던 일단 이미지는 보이니까 기능적으로 어떤 차이점이 있는지를 우선적으로 알아보았다.

 

<img>

• 이미지 태그에서 사용 할 수 있는 옵션은 src, alt, title, longdesc, width, height 정도가 있다.
• src는 말그대로 필요한 이미지 파일의 링크 또는 디렉토리를 명시한다. 사실상 필수로 써야 함
• alt의 경우 이미지를 불러오는 데에 실패했을 경우에 보여줄 내용을 입력한다. 무조건 사용하는 것이 표준임!
• title의 경우 마우스를 이미지 위에 올렸을 때 나오는 툴팁에 보여줄 내용을 입력할 수 있다.
• longdesc는 alt 속성으로 표현하기 어려운 긴 내용을 보여줘야 할 때 사용
• 기타 크기 지정

background-image

• 기능은 이미지를 불러오는 기능뿐이며 기타 다른 조절은 background와 관련된 다른 속성으로 관리한다.

<img> 와 background-image 의 차이

• <img> 태그는 이미지를 다루기 위한 전문적인 태그로서 이미지 지정과 더불어서 예외사항에 대한 처리가 가능하고, 툴팁과 같은 부가적인 기능도 제공한다.
• background-image는 '이미지를 표시한다.' 라는 1차적인 목표에 치중되어 있으며, 이에 따라서 발생할 수 있는 예외상황에 대한 처리나 부가적인 기능을 제공하지 않는다.

<img> 와 background-image 를 어떨 때 적용하면 좋을까?

• 표시할 이미지의 목적을 기준으로 잡으면 좋을 것 같다. background-image 속성을 통해서 이미지를 표시할 때 어떤 문제가 생겨서 이미지를 불러오지 못하게되면 그냥 사진을 표시하지 못한대로 넘어간다. 정상적인 작동 상황을 보지 못한 사용자라면 어떤 문제가 발생했는지 알 수 없다는 의미이기 때문에 표시할 이미지의 목적과 의미가 UX와 중요하게 관련된다면 <img> 태그를 사용해서 이미지 처리를 더 확실하게 수행할 필요가 있다고 본다.
• 예를 들면 제품 사진은 <img>를 사용해서 표시하고, 해당 페이지의 배경화면은 background-image 속성을 사용하는 느낌이 된다.

추가 사항

• 이후에 Sementic Web, Sementic Tag에 대해서 알아보면서 추가적으로 덧붙일 내용이 생겼다.
• <img>또한 Sementic Tag이고 이를 통해서 Sementic Web을 구현한다.
• Background-image는 Tag가 아니기 때문에 Sementic Web을 구현하는데에 도움이 되지 않는다.

 

이어서 semantic web과 sementic tag에 대해서 정리해보도록 하자.

 

Sementic Web

• 정의
  • '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자 팀 버너스리가 1998년 제안했고 현재는 W3C에 의해서 표준화 작업이 진행 중.
  • 쉽게 표현하면 특정한 의미를 가진 태그를 사용해서 기계가 해당 태그를 이해할 수 있도록 구현하는 것 같다.
  • <header> 태그를 통한 예시를 보고 쉽게 이해할 수 있었다.
• 기술과 표준

시맨틱 웹 기술 계층 구조 - 위키백과

• 용어 설명
  • URI / IRI  :  웹 상의 자원을 식별하기 위한 객체의 명칭, 위치 등의 표현
  • XML  :  메타 정보 표현 언어인 XML, XML 상에서의 요소나 속성을 구분하기 위해 쓰이는 이름인 Namespace, XML 문서의 마크업 방식에 대한 정의인 XML Schema 등과 같은 다양한 표준을 의미
  • RDF  :  정보 자원이나 자원의 구조를 표현하는 언어
  • RDFS  :  RDF의 Schema 정보로 경량의 온톨로지를 표현한다.
  • SPARQL  :  RDF 질의를 위한 언어
  • RIF  :  규칙의 정의와 교환을 위한 계층
  • OWL  :  특정 도메인에 대한 공유되는 일반적인 이해와 개념, 개념과의 관계를 표현하기 위한 언어
  • Logic  :  기존에 정의된 정보들을 바탕으로 새롱ㄴ 결온을 도출하는 추론 기능 등을 의미
  • Proof / Trust  :  웹의 정보에 대한 신뢰를 뜻함
• Sementic Web의 이상
  • 사람이 웹에 있는 정보의 의미를 파악하는 것이 아닌, 자동화된 기계가 해석할 수 있는 일종의 표준 수단이 되는 것
  • 인터넷의 정보를 자동으로 해석하여 처리할 수 있는 소프트웨어를 통해서 사용자의 질의에 맞는 결과를 돌려주는 것

 

Sementic Tag

• 의미
  • Sementic Web의 하위 개념이라고 볼 수도 있고, Web을 구성하는 요소들이라고 볼 수도 있다.
  • Sementic Web을 구현하기 위한 의미를 가진 태그들을 Sementic Tag라고 지칭한다.
• 종류
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <nav>
  • etc...

Sementic Web과 Tag에 대한 결론

• 즉 Sementic Web이라는 개념을 구현하기 위한 목적으로 만들어진 도구가 Sementic Tag 라고 이해했다.