HTML에서 이미지를 넣는 두 가지 방식에 대한 TMI 포스팅입니다.
결론부터 보시려면 제일 아래의 결론부터 보세요!
태초에 Timothy John "Tim" Berners-Lee 선생님께서 존재하셨으니...
1980년대에 팀 버너스리 옹께서는 CERN(Conseil Européen pour la Recherche Nucléaire, 유럽입자물리연구소)에 근무하고 계셨다. 학위도 옥스퍼드에서 물리학 학사를 취득하였으나, CERN에서의 두드러진 업적은 물리학이 아니라 전산 쪽이였다.
WorldWideWeb: Proposal for a HyperText Project이라는 문서에 미니멀리즘한(?) 디자인으로 잘 정리되어 있는 내용을 아주 짧게 축약하자면
"내가 생각을 해봤는데, 언제까지 이렇게 문서를 비효율적으로 관리할 텐가? 논문 주석에 있는 참조 논문 찾다가 하루가 다간다. 이래가지고는 유럽입자물리학의 미래가 어둡다. 내가 하이퍼텍스트라는 걸 구상했는데 검토해 보시라."
결과적으로 팀 버너스 리 옹께서는 HTML, HTTP를 최초로 설계하셨다. HTTP(HyperText Transfer Protocol)는 문서 송수신 방식, HTML(HyperText Markup Language)은 HTTP에 의해 송수신되는 문서를 정의한다.
아주 짧고 비유적으로 표현하자면 펜과 종이로 문서 관리하는 조직에 ERP를 도입한 격이다.
HTML
HTML이 무엇인지 이해해보기 위해 단어를 곱씹어보자. HTML은 HyperText Markup Language이다. Hyper한 Text이라고 한다. 아마도 팀 버너스 리 옹께서 생각한 HyperText는 과학 논문의 주석에 인용 논문을 클릭하면 화면에 바로 해당 논문이 출력되는 그러한 Text였을 것이라고 생각한다. HTML이 존재하지 않던 시대엔 꿈만 같은 일이였을 것 같다.
그 꿈같은 일을 구현하기 위해 HTML은 Markup Language라는 방식을 사용했다. 마크업 랭귀지는 태그라는 것을 이용하여 문서의 구조를 표현한다.
Hyper한 Text를 만들기 위해서 마크업 랭귀지의 태그를 정의하다 보니 이러저러한 태그가 필요했을 것이다. 문서의 제목을 표현하는 태그, 문서의 본문을 표현하는 태그, 문서에 이미지를 넣는 태그, 여기는 문서의 어떤 영역이다라는 것을 알여주는 태그, 그냥 아무 의미 없는 태그 등등 그러다 보니 Semantic한 태그와 Non-Semantic한 태그가 탄생했을 것이다.
Semantic Tag → Semantic Web 그리고 이미지
태그들은 Semantic Tag와 Non-Semantic Tag로 구분해 볼 수 있다.
<div id="button"> 버튼 </div> 는 Non-Semantic한 Tag이고
<button> 버튼 </button> 는 Semantic한 Tag이다.
Semantic Tag
HTML을 만들 때 제목 h1(Heading1)이나 이미지 img(Image)와 같이 딱 보면 어떤 역할을 하는지 알 수 있는 태그들이 있다.
이와 같이 컴퓨터/사람이 보았을 때 얘가 무슨 역할을 하는지 알 수 있는 태그를 Semantic Tag라고 하다.
Non-Semantic Tag
반면 얘가 정확히 뭘 하는지는 모르겠지만 아무튼 필요해서 구현된 태그도 있을 것이다. 대표적으로 div와 span이 있다.
당연히 이런 태그들을 명확한 이유 없이 남발하면 인간(개발자)이나 기계(검색엔진) 모두에게 가독성이 떨어질 것이다.
div
개인적으로 공부할 때 그 단어의 사전적 정의(사전적 정의 자체가 중요한 것 같지는 않다.)와 어원을 찾아보면서 최초 창안자의 의도를 파악하는 것을 중요하게 생각한다. 그래서 찾아 봤는데...
div는 division의 약자이다. 그럴듯 하다. 그냥 분할된 어떤 공간이라는 뜻으로 읽힌다. 잘 지은 이름 같다.
span
그런데 span은 어원을 제대로 아는 사람이 없는 것 같다... 스택오버플로우에서 찾은 답변을 보면 w3.org의 HTML 4.0 문서에도 span이 무엇의 약어인지는 안나온다고 한다... 그냥 어떤 브라우저에서 span이란 걸 지원했는데 그 브라우저가 인수되면서 표준이 된 것 같다고 한다.
결과적으로 span은 그 이름부터도 극도로 Non-Semantic하다! 이게 더 잘 지은 이름인건가???
Semantic Web
위키백과의 정의: 시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.
내가 내린 정의: Semantic Tag를 잘 활용하여서 컴퓨터나 사람 입장에서 잘 읽히는 웹
HTML 문서에 이미지를 넣는 두 가지 방법
HTML 문서에 이미지를 넣는 방법은 크게 두 가지가 있다. 하나는 Semantic한 img 태그를 사용하는 방법이고, 다른 하나는 div와 CSS(background-image 속성)을 이용한 Non-Semantic한 방법이다.
img 태그를 이용한 Semantic한 방법
- img라는 Semantic한 태그를 활용하니 사람(개발자)이나 기계(검색엔진 등) 입장에서 잘 읽힌다.
- 사람(개발자) 입장에서는 HTML 코드의 가독성이 좋다.
div 태그와 CSS(background-image 속성)를 이용한 Non-Semantic한 방법
- 사람(개발자)이나 기계(검색엔진) 양자 모두에서 가독성이 떨어진다.
- 대신 CSS를 활용하여 이미지를 화려하게 꾸밀 수 있다.
- 개발자가 아닌 사용자 입장에서 화면이 예쁘게 보여지는 것이 가장 중요한 경우 활용 가치가 있다고 생각한다.
결론
- HTML에는 Semantic Tag와 Non-Semantic Tag가 존재한다.
- Semantic Tag는 태그가 어떤 녀석인지 쉽게 알 수 있다.
- Non-Semantic Tag는 태그가 어떤 녀석인지 쉽게 알 수 없다.
- 이미지를 HTML 문서에 넣는 방식은 두 가지가 있다.
- img 태그로 넣는 방식은 Semantic Tag를, 이용하는 방법이고,
- div 태그에 background-image 속성을 이용해 넣는 방식은 Non-Semantic Tag를 이용하는 방법이다.
- img 태그로 넣는 방식(Semantic Tag를 이용)
- 장점
- SEO(search engine optimization, 검색엔진 최적화)에 유리하다. → 검색에 잘 걸려서 사이트의 가치를 높일 수 있다.
- 개발자가 코드를 이애하기 쉽다. → img 태그 안에 뭐가 있으면 상식선에선 이미지가 있을 것이라고 추론할 수 있다.
- div 태그에 background-image 속성을 이용해 넣는 방식 대비 속도가 빠르다. → 브라우저가 이미지를 로드하기 위해서 CSS를 해석할 필요가 없다.
- 단점
- background-image 속성을 사용할 때만큼 예쁘게 만들기는 불편하다.
- 장점
- div 태그에 background-image 속성을 이용해 넣는 방식
- 장점
- CSS를 활용하여 예쁘게 만들 수 있다.
- 단점
- SEO(search engine optimization, 검색엔진 최적화)에 불리하다. → 검색 엔진의 봇이 이 이미지가 어떤 의미를 가지고 있는지 식별해내지 못할 가능성이 높다.
- 개발자 입장에서 가독성이 떨어진다. → div에 CSS 속성으로 이미지가 로드되므로 정확히 어떤 이미지가 로드되는지는 CSS를 확인해야 한다.
- 장점
