"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
오늘은 위 질문을 중심으로 semamtic tags와 semantic web에 대해 정리해보고자 한다.
semantic tags (semantic markup)
*semantic : 의미의, 의미론적인
단어 그대로 해석하자면 semantic tags는 의미를 가진 태그들을 의미한다.
프로그래밍에서 시맨틱은 코드 조각의 의미를 나타낸다.
semantic tags를 사용하는 이유
- 검색엔진 최적화 (Search Engine Optimization)
시맨틱 태그를 활용하는 것은
웹페이지가 검색엔진에 최적화될 수 있도록 도와주기 때문에 중요한 도구로 활용 된다.
검색 엔진은 제목과 부제목으로 활용되는 h1, h2를 사용자에게 추천하는 용도로 파악하는 등
의미론적인 마크업(표시)을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
'나는 검색한다. 고로 존재한다' 는 농담이 있을정도로
수많은 웹페이지 중에서 제작한 웹페이지가
상위 검색랭킹에 걸리는 것은 매우 중요한 과제중 하나다.
- 접근성(accessibility)
시맨틱 태그를 활용하는 것은 사용자가 활용하는 도구(스크린리더, 키보드 등)에 상관 없이
웹페이지에 접근할 수 있도록 웹페이지 접근성을 높여준다.
예를 들어, 스크린리더(화면 판독기)만 사용하는 유저인 경우
웹페이지에 접근했을 때 시맨틱 태그를 통해 해당 웹페이지의 의미를 보다 명확히 파악할 수 있다.
이처럼 누구나 웹페이지에 접근성 할 수 있도록 도와주기 때문에 시맨틱 태그를 활용하는 것이 중요하다.
- 가독성, 유지보수
시맨틱 태그를 활용하는 것은
개발자가 코드를 유지보수 하기 쉽고, 읽기 편하게 해준다.
왜냐하면, 의미가 부여되지 않은 클래스 태그들이나
디자인 목적으로 부여된 div태그보다 header나 footer와 같은 코드 블록을 읽는 것이 훨씬 쉽다.
읽기 쉬울뿐만 아니라 개발자가 그 태그의 내용 및 의도를 명확히 파악할 수 있기 때문에
본인 뿐만 아니라 담당자가 바뀌는 등의 이유로 다른 개발자도 코드를 유지보수하기가 용이하다.
이는 일의 효율을 증가시키고 궁극적으로는 생산성을 향상시킨다.
semantic web
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,
현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 컴퓨터가 처리할 수 있는 형태로 표현하고, 이를 자동화된 컴퓨터가 처리하도록 하는 프레임워크이자 기술이다.
웹의 창시자인 팀 버너스리가 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.
시맨틱 웹은 시맨틱태그를 기반으로 구성된다.
시맨틱 웹을 제작하기 위해서는 작성하는 코드의 시각적인 효과보다
웹페이지 내에서 수행하는 목적과 역할은 무엇인지에 대해
의미론적인 차원에서 고찰해보는 시각이 필요하다.
위 내용을 바탕으로 상단의 질문에 대해 답해보자면,
img태그와 background-image 속성은
문서에 이미지를 삽입하는 코드로서 공통점을 가지고 있지만,
semantic 측면에서 차이가 존재한다.
img태그는 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에 alt 속성을 통해 img내용을 파악할 수 있다.
또한 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로,
시각장애인 등 누구나 이미지를 이해할 수 있게 웹에 대한 접근성을 높여준다.
그러므로 웹페이지 내에서 이미지가 중요한 요소로 작용하고 있다면,
img태그를 통해 문서의 의미론적인 질을 높일 수 있을 것이다.
반면,
css의 background-image 속성은
주로 문서 내용과는 별개로 스타일 목적을 위해 배경이미지를 사용 할 때 이용 하면 좋다.
.landscape {
background-image: url("cloud.png") ;
}
왜냐하면, 브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않기 때문이다.
특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않기 때문에
해당 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 img태그와 함께 설명하는 편이 좋다.
이와 같이 img태그와 background-image속성이 각각 장단점을 가지고 있듯이,
상황에 따라 적절한 태그를 활용하여 웹페이지를 제작해야 한다.
더불어 시맨틱태그를 적재적소에 사용함으로써
우리 사회가 시맨틱 웹에 쉽게 접근할 수 있게 되고 웹을 보다 더 생산적으로 활용할 수 있을 것이다.
출처
https://developer.mozilla.org/ko/docs/Web/HTML/Element/img
: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN
HTML 요소는 문서에 이미지를 넣습니다.
developer.mozilla.org
https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9
시맨틱 웹 - 위키백과, 우리 모두의 백과사전
ko.wikipedia.org
https://developer.mozilla.org/ko/docs/Web/CSS
CSS: Cascading Style Sheets | MDN
Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌
developer.mozilla.org
