HTML 이미지란?
HTML에서 이미지는 웹페이지의 시각적 요소를 풍부하게 만들어주는 중요한 구성 요소입니다.
이미지는 정보를 전달하고 사용자 경험을 향상시키는 데 큰 역할을 합니다. HTML에서는 이미지를 추가하기 위해 <img> 태그를 사용하며, src 속성으로 이미지 파일의 주소나 경로를 지정합니다.
이미지 태그 사용법
이미지를 추가할 때는 다음과 같은 형식을 사용합니다.
<img src="이미지주소" alt="이미지 설명">
- src 속성: 이미지 파일의 URL이나 경로를 지정합니다.
- alt 속성: 이미지를 설명하는 텍스트로, 이미지가 로드되지 않을 때 대신 표시됩니다. 이는 접근성에도 중요한 요소입니다.
이미지 사용 예시
1. 예시 1: 인터넷에서 가져온 이미지
인터넷에 있는 이미지를 사용할 때는 해당 이미지의 URL을 src 속성에 입력합니다.
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Yun_Dong-ju.jpg" alt="윤동주">
위 이미지는 윤동주 시인의 사진으로, Public domain 라이선스를 따릅니다.
2. 예시 2: 같은 폴더에 있는 이미지 사용하기
이미지 파일이 HTML 파일과 같은 폴더에 있을 경우, 파일 이름만 입력하면 됩니다.
<img src="yun-dong-ju.jpg" alt="윤동주">
3. 예시 3: 서브 폴더에 있는 이미지 사용하기
이미지가 서브 폴더(예: images 폴더) 안에 있을 경우, 경로를 포함하여 입력해야 합니다.
<img src="images/yun-dong-ju.jpg" alt="윤동주">이미지 태그의 특징
1. 단일 태그
<img> 태그는 닫는 태그가 필요 없는 단일 태그입니다. 즉, </img>와 같은 태그가 없습니다.
2. 비율 유지
이미지는 보통 원래 비율을 유지하지만, CSS를 사용하여 크기를 조정할 수 있습니다. 예를 들어, width나 height 속성을 사용하여 이미지 크기를 설정할 수 있습니다.
<img src="yun-dong-ju.jpg" alt="윤동주" width="300" height="400">
3. 접근성
alt 속성을 통해 이미지를 설명하면, 스크린 리더를 사용하는 사용자나 이미지 로드가 실패한 경우에도 정보를 전달할 수 있습니다.
이미지 사용 시 유의할 점
- 이미지 크기 최적화
웹에서 사용하는 이미지는 적절한 크기로 최적화해야 합니다. 너무 큰 이미지는 페이지 로딩 속도를 느리게 할 수 있습니다. - 저작권 확인
인터넷에서 가져온 이미지는 저작권이 있을 수 있으므로, 반드시 사용 가능한 라이선스를 확인해야 합니다. Public domain이나 Creative Commons 라이선스를 가진 이미지를 사용하는 것이 좋습니다. - SEO 고려하기
이미지의 alt 속성에 키워드를 포함하면 검색 엔진 최적화(SEO)에 도움이 됩니다. 사용자에게도 더 나은 정보 전달이 가능합니다.
예시로 보는 이미지 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 태그 예시</title>
</head>
<body>
<h1>HTML 이미지 태그 사용법</h1>
<p>인터넷에서 가져온 이미지:</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Yun_Dong-ju.jpg" alt="윤동주">
<p>같은 폴더에 있는 이미지:</p>
<img src="yun-dong-ju.jpg" alt="윤동주">
<p>서브 폴더에 있는 이미지:</p>
<img src="images/yun-dong-ju.jpg" alt="윤동주">
</body>
</html>
HTML에서 이미지 태그는 웹페이지에 시각적 요소를 추가하고 사용자 경험을 풍부하게 만드는 데 필수적입니다. <img> 태그와 src 속성을 사용하여 다양한 이미지를 손쉽게 추가할 수 있습니다.
이미지를 적절히 활용하여 더 매력적이고 정보를 전달하는 웹페이지를 만들어 보세요!
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > HTML' 카테고리의 다른 글
| VS Code에서 HTML 기본 코드 자동 완성하는 방법 (1) | 2024.09.23 |
|---|---|
| HTML 영역 나누기 - <div>와 <span> 태그 활용하기 (1) | 2024.09.23 |
| HTML 링크(Tag) - 웹페이지 간의 연결을 만드는 방법 (0) | 2024.09.23 |
| HTML 줄 바꿈(Break Line) 태그 - 텍스트를 깔끔하게 나누는 방법 (0) | 2024.09.23 |
| HTML 단락 태그 (Paragraph Tag) - 웹페이지에서 내용을 정리하는 방법 (0) | 2024.09.23 |
