Html 강좌 8 이미지 관련 태그 정리
안녕하세요 엘빈입니다.
저번 포스팅에서는 표 관련 태그들에 대해서 알아보았는데요.
이번 포스팅에서는 웹 사이트 꾸미기의 핵심이라 할 수 있는 이미지 관련 태그들에 대해서 알아보겠습니다.
텍스트로만 웹화면을 표시한다면 밋밋한 맛이 클 것입니다.
텍스트에 각종 효과를 준다고 해도 사람들은 글보다 시청각 자료에 대해서 좀 더 잘 이해하죠.
웹에서 자주 사용하는 이미지 형식은 무엇이 있을까요??
대부분 사용되는 파일 형식은 GIF(움직이는 이미지를 표시할 때 주로 사용), JPG(다양한 색상과 명암을 표현할 수 있음), PNG(투명 배경 등 네트워크 용으로 적합함)가 있습니다.
최근 구글에서 WEBP를 개발하였습니다.
화면에 표시할 때 기존보다 적은 용량으로 사진을 보여줄 수 있게 되었습니다.
이처럼 웹개발에 이미지를 표시하는 것은 점차 중요해지고 있습니다.
HTML 문서 역시 이미지 삽입을 위한 태그를 제공하고 있습니다.
# 이미지 삽입을 위한 <img> 태그
1. 저장된 파일을 표시
Img 태그는 실제 이미지 삽입을 위한 태그입니다.
Src 속성을 통해 이미지 경로를 설정해주면 화면에 표시되는 방식입니다.
다음과 같은 코드를 작성해봅시다.
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset = "utf-8">
6 <title>첫 홈페이지 만들기 프로젝트</title>
7 </head>
8
9 <body>
10 <img src="./minions2.jpg">
11 <p>귀여운 미니언즈 입니다</p>
12 </body>
13 </html>
( 사진은 html 파일과 같은 폴더에 넣었다는 가정하여 경로를 설정하였습니다)
Src 속성 값으로 ./minions2.jpg로 설정하였습니다.
"./"의 뜻은 현재 폴더의 뜻을 가지고 있습니다.
뒤의 단어는 사진의 이름과 파일 형식이 jpg 라는 것을 표시합니다.
정확한 경로와 파일 이름을 작성해야 웹상에 표시됩니다.
만약 웹문서 표기시 경로상 파일을 찾는데 실패하면 x박스로 이미지가 표시됩니다.
2. 웹상의 파일을 표시
실제 사진을 저장하지 않고 웹상에 존재하는 이미지를 자신의 웹사이트에 가져올 수 있습니다.
바로 웹상 이미지 링크를 이용하는 방법입니다.
웹 상의 이미지 오른쪽 클릭 후 이미지 주소 복사를 클릭해줍시다.
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset = "utf-8">
6 <title>첫 홈페이지 만들기 프로젝트</title>
7 </head>
8
9 <body>
10 <img src="https://tistory4.daumcdn.net/tistory/3069048/attach/6335b4b3c3914217985d4266fa856114">
11 <p>귀여운 미니언즈 입니다</p>
12 </body>
13 </html>
해당 코드 처럼 src 속성 값으로 ctrl + v 붙여넣기를 해주시면 이미지 링크가 나오는 것을 볼 수 있습니다.
화면상에는 어떻게 표시될까요?
주소를 복사한 이전 웹페이지와 동일하게 화면에 표시됩니다.
3.이미지 설명해주는 alt 속성
Alt 속성은 이미지가 표시되지 않을 경우 설명을 더해주는 기능을 합니다.
다음과 같은 코드를 작성해봅시다.
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset = "utf-8">
6 <title>첫 홈페이지 만들기 프로젝트</title>
7 </head>
8
9 <body>
10 <img src="" alt="미니언즈 짱짱맨">
11 <p>귀여운 미니언즈 입니다</p>
12 </body>
13 </html
다음과 같이 이미지가 표시되지 않아 텍스트로 대체된 것을 알 수 있습니다.
4. 이미지 크기 설정 width,height 설정
이미지 가로 크기 설정을 위해 width를 세로 설정을 위해 height 속성을 사용합니다.
다음과 같이 코드를 작성해 봅시다. 해당 코드에서는 정사각형 크기로 이미지를 설정하였습니다.
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset = "utf-8">
6 <title>첫 홈페이지 만들기 프로젝트</title>
7 </head>
8
9 <body>
10 <img src="./minions2.jpg" width="300" height="300">
11 <p>귀여운 미니언즈 입니다</p>
12 </body>
13 </html>
5.이미지에 대한 부가적인 설명 : <figure>,<figcaption> 태그
이미지 뿐만 아니라 그에 대한 부가적인 설명이 필요할 경우 figure, figcaption 태그를 img 태그와 같이 사용합니다.
예제 코드는 다음과 같습니다.
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset = "utf-8">
6 <title>첫 홈페이지 만들기 프로젝트</title>
7 </head>
8
9 <body>
10 <figure>
11 <figcaption>정말로 귀여운 미니언즈</figcaption>
12 <img src="./minions2.jpg" width="300" height="300">
13 </figure>
14 </body>
15 </html>
위 사진처럼 사진 위쪽에 이미지에 대한 설명이 추가된 것을 알 수 있습니다.
Figcaption 태그를 아래에 작성하면 이미지에 대한 부가 설명도 아래에 달립니다.
지금까지 이미지 관련 태그들에 대해서 알아보았습니다.
이미지는 웹문서 디자인을 위해 자주 사용하는 태그입니다.
기본적인 속성들에 대해서 잘 숙지하시기 바립니다.
포스팅 읽어주셔서 감사합니다.
'개발 > HTML_CSS' 카테고리의 다른 글
| HTML 강좌 form 구조에 대해서 (0) | 2020.01.13 |
|---|---|
| HTML 강좌 9 링크 관련 태그(a,map,area) (0) | 2020.01.12 |
| html 강좌 7 표(테이블) 관련 태그 정리, 간단하게 만들자 (0) | 2020.01.11 |
| html 강좌 6 목록 관련 태그 정리 (0) | 2020.01.10 |
| html 강좌 5 텍스트 관련 태그 정리 (0) | 2020.01.09 |
