웹페이지에 이미지를 생성하는 방법은 크게 두가지로 구분할 수있다.
HTML<img>tag를 활용하는 방법과 CSS에서divtag에background-imageattribute 추가하는 방식이다.
두 방식의 특징과 차이점에 대해 검토하기에 앞서 Semantic HTML 과 그와 관련된 HTML tag에 대해 살펴보겠다.
Semantic HTML
1. 의미
웹페이지를 구성할 때, 우리는 non-semantic HTML and Semantic HTML을 혼합하여 사용한다. Semantic은 “relating to meaning” 즉, "의미와 관련한 문서"을 말한다. 따라서 HTML의 Semantic element는 태그안의 content에 대한 정보를 제공한다.
Semantic HTML를 사용하기 위해서는 의미에 기반한 HTML 요소를 고르게된다. 예를들어
<div> 와 <span> 는 semantic 요소가 아니다. 이들은 태그속 콘텐츠에대한 맥락을 제공하지 않는다.
반면 <header>는 태그 내의 정보에 대한 맥락을 제공하므로 Semantic 요소에 해당한다.
2. 장점
-
Accessibility(접근성): 모바일 디바이스를 사용하거나 시각장애우들의 웹페이지에 대한 접근성을 높인다.
화면리더기와 브라우저가 코드를 더 잘 분석하고 이해하는데 도움이 되기 때문이다. -
SEO(Search Engine Optimization; 검색최적화)
-
다른 개발자들이 해당 코드를 분석할 때 가독성을 높임.
3. Semantic elements
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
자료출처: https://www.w3schools.com/html/html5_semantic_elements.asp
https://www.codecademy.com/courses/learn-html/lessons/semantic-html/exercises/introduction-to-semantic-html
이미지 생성
1.<img> tag
<img alt="안보이지롱" src=".image/1.jpg">
<img alt="안보이지롱" src= url(imageURL)>
- alt: 이미지가 안 보일 경우(이미지 주소가 잘못되거나 없는 경우 등) ("")안의 문구가 나타나게한다.
- src: 이미지의 위치 또는 URL주소
2. <div>tag에
background-image attribute(속성) 추가
- 태그의 크기(이미지가 나타나는 공간):
가로크기= 화면전체,
세로크기= 태그안에 담겨져있는 content(내용)의 세로크기만큼
- div tag의 크기보다 배경이미지가 클 경우 배경이미지가 잘려서 보일 수 있다.
이때Backgound-size: 100%;로 배경이미지크기를 설정한다면, 배경이미지는 div의 범위에 맞게 출력된다.
- CSS에서
<div>의 width와 height를 고정한다면
그 크기만큼 고정된 영역을 차지하게 되기 때문에
<div>의 내용이 사라져도 배경이미지는 존재하게 된다.
tag로 CSS를 추가하면 동시에 적용되기 때문에,
각각의 tag(예를들면div class="ah"또는img class="wow")에 class를 부여.
차이점?
- 내가 생각하는 차이점
우선,<img>tag는 HTML에서 사용되고
<div>에background-imageattribute는 CSS상 사용되는 이미지 생성 방법이다.
두번째로, 크기가 결정되는 방식이라고 생각한다.
background-imageattribute의 크기는background-size에 의해서 결정되는데 이때 값을 '100%'로 정할 경우 tag의 width와 height와 동일한 크기로 출력된다.
하지만 '%'가 아닌 px로 tag와 attribute 각각의 크기를 정의할 때,background-imageattribute의 크기가 CSS에 정의된<div>의 크기(width, height)가 클 경우 화면에 이미지가 잘려나오게 된다.
2. 이외의 차이점 및 특징
출처: https://buildawesomewebsites.com/html-img-vs-css-background-image/
1) 대용량 이미지를 파일을 추가할 때 브라우저가 CSS파일을 분석하고, 이미지를 불러오는데 오래걸린다. 또한 이미지에 대한 정보를 가지고 있지 않다. 따라서
HTML <img> tag는 접근성과 and SEO를 고려해야 할 때 주로 사용된다.
2) 하나의 이미지 파일 또는 다루기 쉬운 작은 용량의 이미지 파일은 CSS로 다루는것이 효율적이다.
특히 Background image는 background-color, background-repeat, background-attachment, background-position, and background-blend-mode등을 통해 더 세밀한 제어를 할 수 있게 한다.
