반응형
img 태그는 이미지를 표시할 때 사용하는 태그입니다.
단일 태그로써 닫는 태그가 필요없습니다.
1. 기본 문법
<img scr = “표시할 이미지 파일” alt = “이미지 설명” />
scr 속성은 표시할 이미지의 경로와 파일명을 입력 받음.
alt 속성은 이미지 로딩이 실패할 경우 이미지를 대체할 속성.
2. 이미지 크기 조절하기
<img scr = “표시할 이미지 파일” alt = “이미지 설명” width = ”너비 값” height=”높이값” />
width와 height를 이용하여 이미지 크기 지정
너비값과 높이값은 px 단위
3. 코드 예시
<!DOCTYPE html>
<html>
<head>
<meta chartset="UTF-8">
<title>이미지 태그</title>
</head>
<body>
<h1>이미지 태그 사용</h1>
<p>img 태그를 이용하여 이미지를 나타낸다.</p>
<img src="images\nayeon.jpg" alt="나연 사진" width="300"/>
<p>내가 좋아하는 나연 사진입니다.</p>
</body>
</html>
4. 코드 설명
<img src="images\nayeon.jpg" alt="나연 사진" width="300"/>
html 프로젝트 폴더에 이미지 폴더를 만들고 거기에 nayeon.jpg 파일을 넣는다.
img src에 nayeon.jpg가 속해있는 폴더인 images\nayeon.jpg 를 기입해 준다.
nayeon.jpg 이 로딩이 되지 않았을 경우 alt 속성을 이용하여
“나연 사진”이라는 문구가 뜨게 설정해 준다.
너비를 300px로 지정해 준다. 높이는 비율에 맞게 자동으로 조절된다.
5. 코드 결과
반응형
'html' 카테고리의 다른 글
| id, class 태그 (0) | 2022.07.25 |
|---|---|
| 컨테이너 태그 - div, span 태그 (0) | 2022.07.25 |
| 블록 태그와 인라인 태그 (0) | 2022.07.18 |
| 텍스트 태그 (0) | 2022.07.15 |
| HTML 기본 문법 (0) | 2022.07.14 |
