아무개의 취미생활
HTML을 작성하다가 이미지를 띄우는 경우가 많습니다. 이럴 때 사용하는 태그가 <img> 태그입니다. 이번에는 <img> 태그 사용방법에 대해 알아보고 예제를 통해 확인해 보겠습니다.
HTML 제목 및 문단 태그와 특수문자 입력에 대해 알아보기
HTML 제목 및 문단 태그와 특수문자 입력에 대해 알아보기
일반적으로 태그는 여는 태그와 닫는 태그가 함께 쓰입니다. 그리고, 태그를 사용하여 텍스트, 이미지, 멀티미디어 콘텐츠를 HTML 문서로 나타내는 것을 마크업(Markup)한다고 합니다. 이 이유로 하
mr-johndoe.tistory.com
1. <img> 태그
<img> 태그는 자신의 컴퓨터 하드에 저장되어 있는 이미지 파일을 HTML 문서에 띄울 때 사용하며 닫힘 태그가 없습니다. 사용 방법은 다음과 같습니다.
<img src = 파일명>
파일명에는 이미지로 올리고자 하는 파일명을 확장자 포함하여 큰따옴표 안에 입력합니다. 그리고, HTML 문서와 같은 디렉터리에 이미지 파일이 저장되어 있으면 파일명만 작성하여도 무방하지만 그렇지 않으면 파일이 위치하고 있는 경로를 포함하여 입력하여야 합니다.
src는 이미지 태그의 속성으로 이외에도 여러 속성들이 있습니다. 다음 표에 이 속성들을 정리해 보았습니다.
| 속 성 | 설 명 |
| alt | 이미지를 대체하는 텍스트 내용을 입력하는 것으로 웹브라우저에 이미지가 뜨지 못하는 경우 이미지 대신 입력한 텍스트가 출력됨 |
| src | 이미지 경로 및 파일명 지정 |
| height | 이미지 높이 지정 |
| width | 이미지 너비 지정 |
| sizes | 각각의 페이지 레이아웃 크기별 이미지 크기 지정 |
| srcset | sizes 속성과 함께 사용 반응형 웹, 또는 다양한 해상도의 이미지를 표시해야 하는 경우, 해상도별 이미지 경로를 세트로 표시하여 조건에 맞춰 표시되도록 함 |
| usermap | 이미지 맵 ID 지정 |
| id | 이미지 고유 ID 지정 |
2. 웹페이지에서 사용할 수 있는 이미지 형식
웹페이지에 이미지 태그를 이용하여 이미지를 띄울 때 사용할 수 있는 파일 형식은 jpg, gif, png, svg입니다. webp 형식의 파일은 구글에서 더 빠른 웹을 위해 권장하고 있지만 구형 웹 브라우저 등에서는 제대로 지원이 되지 않아 사용이 제한적입니다.
많이 사용되는 그림파일 형식은 jpg와 png입니다.
jpg 파일은 손실 압축 방식으로 투명 배경이 불가능하고 압축율이 높으면 손실도 많아져 이미지가 뭉개지거나 흐릿해 보이는 문제가 발생할 수 있지만, 파일 크기가 작아 이미지의 압축률을 적절하게 조정하여 사용한다면 인터넷이나 모바일에 가장 적합한 이미지 형식입니다.
png(Portable Network Graphics) 파일은 투명 배경 이미지 제작이 가능하며 색상도 256 색상까지 반투명 효과 색상을 지정할 수 있습니다. gif 파일은 단순히 256 색상을 사용할 수 있지만, png 파일은 24비트 트루 컬러와 8비트 알파채널을 지원하므로 웹을 구성하는데 gif 파일보다는 png 파일을 사용하는 것을 추천드립니다.
svg 파일은 웹표준에서 지원하는 유일한 벡터 이미지 형식입니다. 웹 디자인 용도의 아이콘, 동적인 UI를 만들 때 주로 사용되며 특히 웹 애니메이션을 만드는 용도로 많이 사용됩니다.
벡터 이미지여서 작은 용량으로도 다양한 해상도에 맞는 애니메이션 효과를 줄 수 있어 동영상을 사용할 것 이상으로 동적인 느낌을 줄 수 있습니다.
3. 예제로 확인하기
Visual Studio Code를 실행하고 코드 창에 다음과 같이 입력합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="C:\image\aloe-vera.jpg"><br>
<img src="C:\image\aloe-vera.jpg" width="500" height="500"><br>
<img src="C:\image\aloe-vera.jpg" width="700"><br>
</body>
</html>
<img src="C:\image\aloe-vera.jpg">는 C드라이브의 image 디렉터리에 있는 aloe-vera.jpg 파일을 웹 브라우저에 표시하라는 명령입니다. 여러분들은 큰따옴표(" ") 안에 본인의 컴퓨터에 있는 그림 파일의 경로 및 파일명을 입력하셔야 합니다.
<img src="C:\image\aloe-vera.jpg" width="500" height="500">는 그림파일을 표시할 때 크기를 가로 세로 각각 500픽셀로 표시하라는 명령입니다. 하지만 이런 방식으로 크기를 조절하게 되면 원래 이미지가 찌그러지는 등 원하지 않는 모습으로 표시될 수 있습니다.
<img src="C:\image\aloe-vera.jpg" width="700">은 그림파일을 표시할 때 가로를 700 픽셀 크기로 표시하라는 명령으로 세로의 크기는 원래 크기에서 변경된 가로 크기의 비율만큼 세로의 크기도 변경되므로 이미지가 변형되지 않고 크기만 줄어 표시됩니다.
'Web Programming > HTML & CSS' 카테고리의 다른 글
| HTML 제목 및 문단 태그와 특수문자 입력에 대해 알아보기 (0) | 2021.11.24 |
|---|---|
| font - 구글 웹폰트 사이트에 올라온 폰트 사용하는 방법 (0) | 2021.04.14 |
| mediaquery (0) | 2021.04.13 |
| animation (0) | 2021.04.12 |
| transition (0) | 2021.04.06 |
