HTML 이미지(Image)
이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미합니다.
오늘날 웹 페이지에는 이러한 이미지가 매우 중요한 요소의 하나로 자리 잡고 있습니다.
이미지의 삽입
HTML 문서에 이미지를 삽입할 때는 <img>태그를 사용합니다.
<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 다음과 같은 문법으로 사용됩니다.
문법
<img src="이미지주소" alt="대체문자열">src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다.
alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다.
예제
<img src="/img_html5_logo.png" alt="이미지가 없나봐요..">
이미지의 크기(width, height) 설정
HTML에서는 style 속성을 사용하여 이미지의 크기를 설정할 수 있습니다.
또한, width 속성과 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수도 있습니다.
위의 두 가지 방법 모두 HTML5 표준에는 적합한 방법이지만, 나중에 배우게 될 CSS를 이용한 내부 스타일 시트나 외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지하려면 style 속성을 사용하는 것이 좋습니다.
예제
<style>
img {
width:100%;
border: 1px solid black;
}
</style>
...
<img src="/examples/images/img_flag.png" alt="html size" width="320" height="214">
<img src="/examples/images/img_flag.png" alt="style size" style="width:320px; height:214px">
이미지의 테두리(border) 설정
border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있습니다.
예제
<img src="/examples/images/img_flag.png" alt="이미지 테두리"
style="width:320px; height:214px; border: 3px solid black">
이미지에 링크(link) 설정
이미지에 <a>태그를 이용하여 링크를 설정할 수 있습니다.
예제
<a href="/html/intro" target="_blank">
<img src="/examples/images/img_flag.png" alt="flag" style="width:320px; height:214px">
</a>https://www.tcpschool.com/html/html_basic_images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>레드향 이미지 테스트</h1>
<img src = "images/orange2_2024-07-02.jpg" alt="레드향", width="750", height="450">
<p>width="50%, height="50%"로 지정한 이미지</p>
<br>
<hr>
<img src = "images/orange1_2024-07-02.jpg" alt="레드향", width="750", height="450">
<p>width="50%, height="50%"로 지정한 이미지</p>
<br>
<hr>
<img src = "images/orange2_2024-07-02.jpg" alt="레드향", width="50%", height="50%">
<p>width="50%, height="50%"로 지정한 이미지</p>
<br>
<hr>
<img src = "images/orange1_2024-07-02.jpg" alt="레드향", width="50%", height="50%">
<p>width="50%, height="50%"로 지정한 이미지</p>
<br>
<hr>
<img src = "images/orange2_2024-07-02.jpg" alt="레드향", width="150">
<p>width="150"으로 지정한 이미지</p>
<br>
<hr>
<img src = "images/orange1_2024-07-02.jpg" alt="레드향", width="150">
<p>width="150"으로 지정한 이미지</p>
<br>
<hr>
<h1>웹 문서에 PDF 파일 삽입하기</h1>
<object width="900" height="800" data="sql.pdf"></object>
<br>
<hr>
<h1>웹 문서에 mp3 파일 삽입하기</h1>
<embed src="spring.mp3">
<br>
<hr>
<h1>플레이어 표시 없이 배경 음악 넣기</h1>
<audio src="spring.mp3" autoplay loop></audio>
<br>
<hr>
<h1>비디오 자동 재생하기</h1>
<video src="salad.mp4" width="700" autoplay muted loop></video>
<br>
<hr>
<h1>텍스트 링크</h1>
<a href="http://www.naver.com">네이버 이동</a>
<a href="http://www.naver.com" target="_blank">네이버 이동(target)</a>
<br>
<hr>
<h1>이미지 링크</h1>
<a href="http://www.naver.com" target="_blank">네이버 이동(target)
<img src = "images/naver.png" alt="naver" width="30%", height="30%">
</a>
</body>
</html>'HTML' 카테고리의 다른 글
| HTML(iframe)_2024-07-03 (2) | 2024.07.03 |
|---|---|
| HTML(블록과 인라인)_2024-07-03 (2) | 2024.07.03 |
| HTML(연습문제)_2024-07-03 (0) | 2024.07.03 |
| HTML(테이블)_2024-07-01 (0) | 2024.07.01 |
| HTML(VS Code 확장 프로그램)_2024-07-01 (0) | 2024.07.01 |
