본문 바로가기
Programming Language/HTML

[HTML] <img> 태그란? (image)

by 떠농 2022. 12. 7.
반응형

1. <img>태그란 무엇인가?

- <img> 는 image(이미지)의 약자로, 이미지를 삽입할 때 사용한다.

- <img> 는 닫는 태그 없이 사용이 가능하다.

 

2. <img>태그 속성

- src : 이미지 경로 주소

- alt : 이미지를 가져오기 실패했을 시 보여줄 텍스트

- width : 이미지 가로 길이

- height : 이미지 세로 길이

- title : 이미지 위 마우스 커서 올릴 시 보여지는 설명

 

3. <img>태그 사용 예시

1) 단순히 경로 주소를 통해 이미지만 넣었을 때 / <img src=" " >
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>img 태그에 대해 알아보자</title>
</head>
<body>
    <img src="noodle.jpg">
</body>
</html>
 cs
2) 이미지 가져오기를 실패했을 시 보여줄 텍스트_noodle1이라는 이미지는 폴더 내에 없습니다. / <img src=" " alt= " " >

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>img 태그에 대해 알아보자</title>
</head>
<body>
    <img src="noodle1.jpg" alt="짬뽕 이미지 입니다.">
</body>
</html>
 cs
3) 이미지 사이즈 조절_더 작게 조절 / <img src=" " alt=" " width=" " height=" " >
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>img 태그에 대해 알아보자</title>
</head>
<body>
    <img src="noodle.jpg" alt="짬뽕 이미지입니다."
        width="30%" height="12%">
</body>
</html>
 cs
4) 이미지 위로 마우스 커서 올릴 시 보여지는 설명 / <img src =" " alt=" " width=" " height=" " title=" " >
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>img 태그에 대해 알아보자</title>
</head>
<body>
    <img src="noodle.jpg" alt="짬뽕 이미지입니다."
        width="30%" height="12%" title="먹고싶쥬?">
</body>
</html>
 cs

 

반응형
저작자표시

'Programming Language > HTML' 카테고리의 다른 글

[HTML] link 태그의 속성_rel, type, href  (0) 2023.09.20
[HTML] 이미지에 링크 삽입하기(이미지 태그에 링크 삽입하기)  (1) 2022.12.07
[HTML] <a>태그란? (anchor)  (0) 2022.12.05
[HTML] <h> 태그란? (heading)  (0) 2022.01.11
[HTML] <p> 태그란? (paragraph)  (0) 2022.01.11

관련글

댓글

티스토리툴바