[HTML] Tag : img, figure, picture

문득, 내가 태그를 잘 사용하고 있는가 라는 생각이 자주 든다.

처음 일을 시작할 때는 일단 만들기 급급해서 의미가 무엇인지, 왜 써야 하는지도 모르고

정말 주먹구구식으로 태그를 썼고,

이제야 반성한다.(사실 반성은 맨날 함)

---

# 목차

1. 오늘의 태그 그리고 회고(?)
2. 태그별 구성
   a. 'img' 태그
   b. 'figure' 태그
   c. 'picture' 태그
3. 태그별 차이
4. 태그의 사용
   a. 'img' 태그
   b. 'figure' 태그
   c. 'picture' 태그
5. 마무리

---

 

 

 

 

 

# 오늘의 태그 그리고 회고(?)

언제 써야 하지 하고 자주 고민하는 태그로

이미지의 관련된 태그가 있다.

<img>, <figure>, <picture>

 

태그별 한 줄 회고(?)를 해보자면

- 주로 'img' 태그를 단독으로 사용했고,

- 간혹 'figure' 태그도 사용했지만, 시멘틱 하게 사용하진 못한 것 같다.

- 'picture' 태그는 아직 사용해 본 적이 없다.

 

 

 

 

 

# 태그별 구성

- 'img' 태그

<img src="" alt="" width="" height="" style="">

 

 

 

- 'figure' 태그

<figure>
     <img src="img.jpg" alt="sample-figure" style="width:100%">
     <figcaption>sample figure img.</figcaption>
</figure>

 

 

 

- 'picture' 태그

<picture>
     <source media="(min-width:1024px)" srcset="img_red.jpg">
     <source media="(min-width:760px)" srcset="img_black.jpg">
     <img src="img.jpg" alt="sample-picture" style="width:auto;">
</picture>

 

 

 

태그를 주르륵 나열해 보니,

한 가지 공통점이 보인다.

모든 태그에 <img> 태그가 들어가 있다 는 점!

 

 

 

 

 

# 태그별 차이

태그의 구성을 살펴보니, 공통점으로 모든 태그에 <img> 태그가 들어가 있다 는 점이었다.

그렇담 여기서 크게 그룹을 나눠 보자면 img & picture, figure로 나눌 수 있겠다.

<img>는 모든 태그에서 사용되는 이미지 자체를 제공하는 태그로 볼 수 있고,

<picture>, <figure>는 이런 img태그를 사용하여 제공하고자 하는 방법으로 볼 수 있겠다.

물론 좀 더 포괄적으로 생각하면, <img> 태그 역시 제공하고자 하는 방법으로도 해석할 수 있을 것 같다.

 

 

 

 

 

# 태그의 사용

- 'img' 태그

<img> 태그는 기본적으로 몇 가지 Attr(attribute)을 가지고 있다.

필자가 가장 자주 사용하는 것들을 나열하자면 src, alt, width, height, style 이 있다.

물론 이보다 더 많은 Attr이 있으니, 다른 Attr이 궁금할 땐 W3C에 가보자!

<img src="" alt="" width="" height="" style="">

Attribute	설명	예시
src	이미지의 경로를 작성.	상대경로 >> src="../img/sample.jpg" 절대경로 >> src="https://www.test.com/img/sample.jpg"
alt	이미지의 대체텍스트를 작성.	alt="베이지색 종이위에 바나나 우유 모양의 뱃지가 올려져있다."
width	넓이값을 지정.	숫자만 단독으로 넣으면 기본 px값으로 세팅된다. width="1200" / width="auto,px,%,rem,em,vw,vh..." height="1200" / height="auto,px,%,rem,em,vw,vh..."
height	높이값을 지정.
style	inline style을 지정. (inline style은 분리된css보다 우선순위로 적용한다.단 important처리가 없다는 가정하에)	style="display:block;width:100px;height:50px;"

 

# 'img' 태그 참고 자료

https://www.w3schools.com/tags/tag_img.asp

HTML img tag

 

 

 

 

- 'figure' 태그

<figure> 태그를 접하게 된 계기는 접근성 작업을 하면서였던 거 같다. 이미지의 대한 설명글 즉 대체 텍스트로서의 기능을 이 태그에서는 육안으로도 보이게 하기 때문에, 디자인적인 요소를 최대한 녹여서 사용했었다.

<figure> 태그의 구성을 보면 다음과 같다.

<figure>
	<img src="" alt="">
	<figcaption></figcaption>
</figure>

 

<figure> 태그를 사용 시 주의할 점이 있다면,

우리가 화면을 구성할때 <figure>가 빠지더라도 화면의 내용 흐름이 끊기는 일이 발생하는 것을 지양해야 한다.

즉, <figure>는 독립적인 요소로서 구성에 들어가 있어도 혹은 빠지게 되더라도 흐름에 영향을 주는 일이 생겨선 안된다는 의미로 해석할 수 있을 것 같다.

 

MDN이나 W3C에서도 동일한 내용을 명시해주고 있는데,

이점이 잘 이해가 안된다면 아래 첨부된 '애플' 링크에 들어가 소스를 들여다보자.

우선 ①전체적인 콘텐츠를 스캠 하듯이 한번 훑어보고, 그다음에 ②HTML구조를 살펴보면

독립되데 흐름에 영향을 주지 않아야 한다는 말이 무엇인지 이해하는데 도움이 될 것이다.

https://www.apple.com/kr/retail/business/

중소기업

 

 

그리고 <figure> 태그는 위 명시한것처럼 <img>태그와 함께 사용이 가능한데,

<figure>태그 자체가 독립적이지만 활용법이 다양한 태그이기 때문에 다른 형식들로도 이용이 가능하다.

이미지를 불러와 캡션을 달아 줄 수 도 있지만,

 

사용하는 형식에 따라 다른 모습으로도 활용이 가능하다.

MDN에서 제공하는 다른 활용방식도 체크해 보자.

 

# 'figure'태그 참고 자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/figure

<figure> - HTML: Hypertext Markup Language | MDN

 

 

 

 

- 'picture' 태그

<picture> 태그 현재까지 업무에 적용해서 써본 적은 없었다.

이미지를 브라우저 리사이징이나 디바이스 변경 같은 사항으로 인해 변경해 줘야 한다면,

<picture> 태그를 이용하여 html에서 해소할 수 있는 부분을 사용하기보단, 다른 형식으로 더 사용했었다.

1. 자바스크립트를 이용한 이미지 변경.
2. img태그를 두 개 넣어 두고 사이즈 별로 show/ hide처리.
3. backgroud로 적용해 Media Query로 변경. 

 

상황에 따라 위와 같은 방식들을 병행해 사용하며, picture 태그를 대신했었다.

 

그럼 <picture> 태그는 어떻게 사용할 수 있을까?

<picture>
	<source srcset="" media="" />
  	<img src="" alt="" />
</picture>

 

위 구문을 풀어보자면,

① <source> 태그에서 미디어 사이즈(media) 별로 불러올 이미지(srcset)를 지정하고

② 혹시 모를 이미지 누락을 대비해 fullback 요소로 <img> 태그를 맨 마지막에 배치해 놓는다.

③ <picture>

태그로 감싸준다.

 

지정해 놓은 미디어 사이즈 별로 해당하는 이미지를 불러오는 점이,

CSS에서 Media Query로 불러오는 모습과 굉장히 흡사하다.

 

그렇담 'picture'태그의 기능을 대체할 수 있는 요소가 있다는 건데,

이 태그를 사용해야 하는 이유가 있을까?

 

이 포스팅을 하면서 알게 된 점은 '속도'였다.

해당 속도의 대한 이점은 테스트를 통해 더 체크해 추후에 보고 글로 남겨놔야겠다.

(속단하고 싶지 않다!)

 

# 'picture'태그 참고 자료

상품 이미지 영역에 픽쳐태그 사용 중이다.

https://www.samsung.com/sec/

Samsung 대한민국 | 모바일 | TV | 가전 | IT

 

 

 

 

 

# 마무리

갑작히 궁금증이 생겨서 잠깐만 좀 찾아볼까 했던 일이,

너무 커져버려서, 한참을 찾게 된 것 같다.

그동안 알고 있던 아주 단순한 태그하나가 이렇게 무한하게 질문에 꼬리를 잇는 점이 가장 재밌었던 것 같다.

거기다 파생되어 연결되는 요소도 계속 나오는데, 앎이란 참 끝이 없는 거 같다.

다음엔 또 어떤 궁금한 걸 써볼까나.