-
img 태그 - src, width, height, title, alt 속성HTML 2024. 12. 3. 11:22
img 태그는
누구나 짐작할 수 있다시피, 영단어 image 의 약자입니다.
<html> <head> <title>2024-12-02-月</title> </head> <body> <img src="home.jpg"> </body> </html>
이런 식으로 이미지 를 추가할 때 사용할 수 있습니다.
이미지가 너무 크면 크기를 조절할 수 있습니다.
<html> <head> <title>2024-12-02-月</title> </head> <body> <img src="home.jpg" width="200"> </body> </html>
크기 조절은 가로 (width) 를 조절하거나, 세로(height)를 조절하거나, 둘다 조절 할 수 있습니다.
하나만 조절하는 경우, 비율에 맞춰 알아서 다른 하나도 조절 됩니다.img 크기 조절 방식 설명 width="값" img의 가로 길이 설정 height="값" img의 세로 길이 설정 a 태그에서와 마찬가지로
img 태그에서도 title 속성으로 툴팁(tool-tip)을 추가할 수 있습니다.<html> <head> <title>2024-12-02-月</title> </head> <body> <img src="home.jpg" width="200" title="이미 집이지만, 한층 더 격렬하게 집에 가고 싶다."> </body> </html>
a 태그 속성과 중복되니, 설명 대신
a 태그에 대해 작성한 글 링크를 남기겠습니다.
https://free-weave.tistory.com/54"a" 태그 - href 속성, target 속성, title 속성
a 태그는 영단어 anchor에서 온 태그입니다.anchor는 배를 고정시키는 닻이라는 의미로, (배에서 항구에 정박하거나 섬에 정박할 때 무거운 닻을 땅에 박아서 배를 묶어두곤 했죠)html에서는 이 화면
free-weave.tistory.com
마지막으로
alt 속성에 대해 이야기해보겠습니다.
alt는 alternative text (이미지를 대체하는 텍스트) 의 약자입니다.
<html> <head> <title>2024-12-02-月</title> </head> <body> <img src="home2.jpg" alt="경로에 이미지가 없거나, 시각 장애인용 이미지 설명"> </body> </html>
주로 위와 같이
경로에 이미지가 없거나
시각 장애인용 이미지 설명이 필요할 때 작성됩니다.
오늘은 여기까지 하겠습니다. 이상입니다.'HTML' 카테고리의 다른 글
스타일 요소 - 글자 가운데 정렬하기 (0) 2024.12.06 "button" 태그 - type 속성, onclick 속성 (0) 2024.12.02 "a" 태그 - href 속성, target 속성, title 속성 (0) 2024.12.01 html 기본 구조 (0) 2024.11.29 태그 (0) 2024.11.27