TAG 03 - 링크와 이미지관련 태그

HTML(Hyper Text Markup Language)

 

---

 

 

- 웹페이지에서 가장 중요한 부분인 링크 태그와 이미지 삽입 태그에 대하여 공부해 봅시다.

- HTML은 텍스트로 이루어진 문서이기 때문에 어떠한 미디어 파일도 포함하지 않습니다. 하여 모든 미디어 파일들은 각자의 태그를 이용해 소스의 위치를 지정해주어야 웹문서에 표시가 됩니다.

<a>, <img>, <figure>, <figcaption> 태그 살펴보기

 

 

OVERVIEW

Tag	Description	Meaning
<a>	클릭하여 다른 웹페이지로 이동하게 해주는 태그이며, 필수 속성으로는 href 가 있다.
<img>	이미지파일을 웹문서에 넣을때 사용하는 태그이며, 필수 속성으로는 src와 alt가 있다.
<figure>	이미지, 표, 그래프 등 다양한 정보를 담고있는  미디어들을 묶어서 그룹 잡을 수 있는 태그이다.
<figcaption>	<figure>태그와 함께 사용되며, 반드시 첫번째 또는 마지막 child 요소로만 들어갈 수 있다. 독립적으로는 사용할 수 없다.
<picture>	반응형 이미지를 표현하기에 적절한 태그이며, 마지막으로 <img>태그를 내부에 반드시 적어주어야 한다.

 

A. <a> 링크

<!-- href는 필수 속성 -->
<a href="index.html">HOME</a>
<a href="http://www.google.com" target="_blank" title="새창">구글 홈으로 이동</a>

 

 

B. <img> 이미지

<!-- src , alt는 필수 속성 -->
<img src="./images/bird.jpg" alt="파랑새">
<img src="../images/logo.png" alt="LOGO">

 

 

 

C. <figure>, <figcaption> 

<figure>
	<img src="./images/room-1.jpg" alt="회의실">
    <img src="./images/room-2.jpg" alt="휴게공간">
    <img src="./images/room-3.jpg" alt="탕비실">
    <figcaption>1층 내부사진</figcaption>
</figure>

 

D. <picture>

- 이 태그의 좋은 점은 아래의 이미지 3개를 모두 다운받아서 상황에 따라 보여주는 것이 아니라, 현재 보고있는 해상도에 속한 이미지 파일만 다운받는 것이다. 

- 내부에 <source> 태그를 써야하며, 마지막으로 기본이미지로 <img> 태그를 넣어준다.

<picture>
    <source srcset="pc.png" media="(min-width:1240px)">
    <source srcset="tablet.png" media="(min-width:960px)">
    <source srcset="mobile.png" media="(min-width:600px)">
    <img src="sm.png" alt="태그를 지원하지 않는 브라우저에서 표시될 기본 이미지">
</picture>

 

---

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.

 

 

Reference 

 

이미지 갤러리 따라 만들어보기 

W3Schools.com