시맨틱 웹(semantic web)이란 무엇일까?
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.
(출처_위키백과)
사실 무슨 뜻인지 명확하게 이해되지 않는다...😳
그럼 semantic이라는 단어부터 살펴보자. semantic=의미의, 의미론적인
보다 구체적인 개념, semantic elements에 대해 찾아보니 조금씩 이해가 된다.
<header> 태그는 HTML의 제목을 정의할 때 사용한다. h1 태그는 h6 태그보다 font-size가 클 뿐만 아니라, 보다 중요한 제목임을 의미한다. style 속성을 활용하여 사이즈를 키울 수는 있겠지만, 제목으로서 의미적인 가치는 없다. 따라서 내용과 목적에 맞는 semantic elements를 활용할 필요가 있다.
그렇다면 어떠한 이점이 있을까?
개발자(인간)의 의도와 의미가 프로그램(컴퓨터)에게 보다 명확하게 전달될 수 있다.
추가적으로 아래와 같은 이점이 있을 것이라고 생각된다.
- 검색 엔진(SEO) 최적화 - 중요한 키워드로 인식하여 상위에 노출될 수 있을 뿐만 아니라 자료의 접근성도 높인다.
- 다른 개발자와 협업하는 과정에서, contents의 맥락과 의미를 코드를 통해 전달할 수 있다.
고민해볼 문제!
Q) "사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
A)
우선 가장 명확한 차이는 <img> 태그는 HTML 파일에, background-image 속성을 추가하는 것은 CSS 파일에서 이루어질 것이다.
또한, <img> 태그는 alt 속성을 가질 수 있으며 이는 네트워크의 오류가 있거나 콘텐츠가 차단되었을 경우, 혹은 스크린 리더를 사용할 경우 사용자에게 해당 이미지가 어떤 것인지 설명할 수 있어 '접근성' 측면에서 유리하다. 하지만, background-image 속성에는 해당 기능이 없다.
<img> 태그를 사용할 경우, 검색 엔진(SEO) 측면에서도 유리하다. 최근에는 이미지 검색이 가능한 검색 엔진도 있지만, 대다수의 사용자가 텍스트를 통해 검색하기 때문에 alt 속성을 활용하여 이미지의 정보를 추가한다면 노출될 가능성이 높아지며 이는 곧 애플리케이션에 대한 접근성으로 이어지기 때문이다.
그렇다면 CSS의 background-image 속성은 언제 사용하는 것이 좋을까? 말 그대로 웹의 background에 이미지를 추가할 경우 활용하면 좋을 것 같다. 배경 이미지는 그 자체에 중요한 의미를 담고 있지 않기 때문이다. 따라서, 각각의 이미지가 담고 있는 semantic value에 맞는 방법을 사용하자.
참고) https://developer.mozilla.org/ko/docs/Glossary/Semantics
