[HTML 태그] 이미지 요소
목차
1. <img>
2. src 속성
3. alt 속성
5. 상대경로와 절대경로
6. 이미지 파일 형식
<img>
<img>태그는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그이다.
<img src="이미지 경로" alt="이미지 대체 텍스트">
src 속성
<img>태그의 필수 속성으로 이미지의 경로를 나타내는 속성이다.
alt 속성
이미지의 대체 텍스트를 나타내는 속성이다.
대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성이다.
흔히 엑박이라고 하는, 이미지 경로를 찾지 못했거나 서버에 문제가 생겨 이미지를 가져오지 못할 때 엑스박스 옆에 글로 나타난다.
src 속성과 마찬가지로 <img>태그의 필수 속성이다.
width, height 속성
이미지의 가로/세로 크기를 나타내는 속성이다.
값의 단위는 따로 입력하지 않아도 되며, 값을 입력하면 자동으로 픽셀 단위로 계산된다.
width, height은 선택적인 속성이지만 이미지의 크기가 고정적이라면 width, height 속성을 선언하는 것이 성능적인 측면에서는 더 좋다.
width, height 속성이 없으면 이미지의 원본 크기대로 노출된다.
둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경된다.
반면 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경된다.
실습
https://namu.wiki/jump/r7U8LwNllbhNNO%2FhPI4BiBt%2BnC4%2BFk9GWdmquaMn3P0aIeV3xdbz5NisqjZmFZn9
파일:페구리.jpg - 나무위키
이미지의 자세한 설명을 적어 주세요.
namu.wiki
나무위키의 페페 이미지를 가져와 브라우저에 표시해본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>image</title>
</head>
<body>
<img src="https://w.namu.la/s/94faaa31eaffb0b3a410a66de2ec6f1cfe67e0f399d25a13620b98c67cc74bf941604a9c999eb6650c4102830132f87a9b3db8b02862fbb0f2f36068b857af9bd4a13448f4a6181918a05d16cb06ae5ee087080076af662345042dea594c3061c69f7981737616757775e6ef50e667a2" alt="페페따봉">
</body>
</html>src 속성으로 해당 링크의 이미지 주소를 선언해주고 alt 속성으로 '페페따봉'을 입력한다.
페페 이미지가 잘 나오는 것을 볼 수 있다.
이번에는 width 속성과 height 속성을 사용해서 이미지의 크기를 변경해본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>image</title>
</head>
<body>
<img src="https://w.namu.la/s/94faaa31eaffb0b3a410a66de2ec6f1cfe67e0f399d25a13620b98c67cc74bf941604a9c999eb6650c4102830132f87a9b3db8b02862fbb0f2f36068b857af9bd4a13448f4a6181918a05d16cb06ae5ee087080076af662345042dea594c3061c69f7981737616757775e6ef50e667a2" alt="페페따봉" width="100">
</body>
</html>width 속성을 100으로 선언한다.
이미지 비율에 맞게 height도 같이 수정된 것을 볼 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>image</title>
</head>
<body>
<img src="https://w.namu.la/s/94faaa31eaffb0b3a410a66de2ec6f1cfe67e0f399d25a13620b98c67cc74bf941604a9c999eb6650c4102830132f87a9b3db8b02862fbb0f2f36068b857af9bd4a13448f4a6181918a05d16cb06ae5ee087080076af662345042dea594c3061c69f7981737616757775e6ef50e667a2" alt="페페따봉" height="150">
</body>
</html>
height도 동일하게 동작한다.
이번에는 width 속성과 height 속성을 둘 다 선언한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>image</title>
</head>
<body>
<img src="https://w.namu.la/s/94faaa31eaffb0b3a410a66de2ec6f1cfe67e0f399d25a13620b98c67cc74bf941604a9c999eb6650c4102830132f87a9b3db8b02862fbb0f2f36068b857af9bd4a13448f4a6181918a05d16cb06ae5ee087080076af662345042dea594c3061c69f7981737616757775e6ef50e667a2" alt="페페따봉" width="150" height="50">
</body>
</html>
페페 이미지가 150x50으로 찌그러진 것을 볼 수 있다.
상대경로와 절대경로
src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있다.
상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고,
절대경로는 실제 그 이미지가 위치한 곳의 전체 경로이다.
위 실습에서 페페 이미지의 링크가 절대경로라고 생각하면 된다.
만약 컴퓨터에 페페 이미지(pepe.png)가 images 폴더에 저장되어 있다면 아래와 같이 상대경로로 표현할 수 있다.
<img src='./images/pepe.png' alt='페페'>
이미지 파일 형식
gif : 제한적인 색을 사용하고(256bit) 용량이 적으며 투명 이미지와 애니메이션을 지원
jpg : 사진이나 일반적인 그림에 쓰이며 높은 압출률과 자연스러운 색상 표현을 지원(투명 이미지는 지원하지 않음)
png : 이미지 손실이 적으며 투명과 반투명을 모두 지원
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| [HTML 태그] 폼 요소 (0) | 2022.12.09 |
|---|---|
| [HTML 태그] 테이블 요소 (0) | 2022.12.08 |
| [HTML 태그] 리스트 요소 (0) | 2022.12.07 |
| [HTML 태그] 의미가 없는 컨테이너 요소 (0) | 2022.12.07 |
| [HTML 태그] 앵커 요소 (0) | 2022.12.07 |
