HTML 문서에 이미지를 삽입하는 방법 2가지

1. HTML 문서에 이미지를 삽입하는 방법

 

1. <img src="경로"> HTML 태그를 삽입하는 방법

2. CSS의 backgound-image 속성으로 이미지를 삽입하는 방법

 

우리에게 주어진 선택지는 2가지, 그렇다면 어떤 방법을 언제 사용할지 선택하는 기준은 무엇일까 궁금했다.

 

일단 둘의 차이를 보자면,

1. HTML태그는 HTML문서에, CSS는 CSS문서에 담는다.

2. 웹브라우저는 HTML 태그는 태그에 담긴 내용(정보)은 정보로 인식하지만, CSS 문서는 정보로 인식하지 않는다.

 

일단 두 방법에서 가장 큰 차이는 사용 목적이다. 따라서 HTML의 역할은 이 웹문서가 어떤 구조로 어떤 정보를 담고있는 문서인지를 설명하는 것이고 CSS는 그 문서를 보기 좋게 다듬어주는 역할을 한다. 여기서 차이가 생긴다. 그래서 본래 HTML의 취지를 더욱 살리기 위해 HTML5에서 Semantic HTML이 도입되었다. 웹 페이지의 그리드를 짤때 보통 헤더영역, 아티클영역, 푸터영역 등을 기본으로 갖는데 html5 이전에는 div태그에 클래스를 지정하여 사용했다고 한다. 클래스 이름은 사람이 만들었겠지. 정해진 기준이 없으니 사람마다 각 영역 네이밍을 다르게 했기 때문에 코드로 소통하기 어려웠을 것이다. 여튼, HTML을 Semantic 하게 작성한다는 것은 이 정보를 누군가 찾기 편하도록 작성한다는 의미와 같다. 즉, SEO에 중요한 요소이다.

 

예를들어 이 글의 제목을 "Semantic Web"으로 하고 싶다고 하자. 저 단어를 제목으로 삼고 싶은 이유가 있을 것이다. 이 글이 어떤 정보를 담고있는지 핵심적으로 보여주는 키워드이기 때문일 것이다. 그래서, 나는 저 제목이 내 글 상단에 크게 표시되었으면 한다. 그때 그 글자를 크게 하는 방법도 역시 2가지다. <h1>태그를 작성하거나 CSS로 font-size를 키우는 것이다. 이 둘의 차이 역시 같다. h태그는 이 글의 "제목"을 작성할 때 사용하는 태그이다. 따라서 웹, SEO에서도 h1태그에 담긴 정보를 굉장히 중요한 정보로 다룬다. 나 혼자 이 문서를 볼 것이라면 상관 없지만, google, naver 등 대부분의 포털 사이트는 정보를 필요로 하는 사람에게 적절히 보여주는 것을 목적으로 SEO를 활용하고 있다. 이 문서에 있는 정보 중 가장 중요한 정보를 h1 태그에 담기 때문이다.

 

따라서, HTML을 사용할 것인지, CSS를 사용할 것인지는 작성자가 웹 문서에 담고자 하는 이미지(정보)가 이용자에게 전달 되어야 할 중요한 정보인지, 그리고 그 정보가 많은 사용자들이 원하는 정보여서 이 정보를 더욱 잘 노출 시키고 싶다면 즉, SEO를 고려한다면 CSS보다는 HTML 방법으로 사용하는 것이 좋지 않을까 생각한다.

 

2. Semantic Elements in HTML

 

아래 표는 Semantic 태그요소 목록의 간략한 의미이다. 아직까지는 주로 레이아웃을 주는 요소만 알고있지만 캡션을 달거나, 주소를 넣는 등의 상황에 의미론적인 태그를 사용할 수 있는지 확인하는 습관을 길러야겠다!

<article>	Defines independent, self-contained content
<aside>	Defines content aside from the page content
<details>	Defines additional details that the user can view or hide
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for a document or section
<header>	Specifies a header for a document or section
<main>	Specifies the main content of a document
<mark>	Defines marked/highlighted text
<nav>	Defines navigation links
<section>	Defines a section in a document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time

출처 : https://www.w3schools.com/html/html5_semantic_elements.asp