html 화면에 이미지를 표시할 떄 img 태그를 사용한다. img 태그의 src 속성으로 이미지를 지정하고 alt 속성을 이용하여 이미지를 설명한다. 정상적인 경우라면 이미지가 화면에 표시되고 텍스트는 표시되지 않는다. 만약 어떠한 이유로 이미지가 표시되지 않는 경우 alt 태그에 입력한 텍스트가 화면에 표시된다.
html img 태그 사용 화면에 이미지 표시
using html image tag
웹페이지를 만들 때 텍스트로만 만들어도 충분한 컨텐츠를 제작할 수 있지만, 글로만 표시하는 것은 한계가 있다.
백줄의 글보다 한장이 사진이 더 유용한 경우가 있는데, 이 때 웹페이지에 이미지를 표현하는 것이 가장 바람직할 수 있다.
웹페이지에서 이미지를 표시하고자 한다면 html 의 img 태그를 사용하여 이미지를 화면에 표시할 수 있다.
이미지 태그를 사용할 때 필요한 속성은 2가지이며 이미지 주소를 나타내는 src 속성과 이미지에 대한 간략한 설명을 표시할 alt 속성을 사용하면 된다.
화면에 이미지 표시
html을 이용하여 웹페이지에 이미지를 표시할 때는 img 태그를 사용한다.
img 태그를 사용할 때 src 속성을 이용하여 이미지 주소를 설정하면 이미지 주소가 표시가 된다.
alt 속성을 이용하면 이미지에 대한 간단한 설명을 입력하고 표시할 수 있다.
다만, alt의 경우 대체텍스트라 하여 이미지가 표시되지 않는 경우에 화면에 나타난다.
이미지가 정상적으로 표시되지 않는 경우 아래와 같이 깨진 이미지 모양과 함께 alt 속성에 입력된 대체텍스트가 표시된다.
아래는 이미지 태그를 사용하는 구문을 보여준다.
<img src="이미지주소" alt="대체텍스트" />img 이미지 태그
위의 태그 내용으로 화면에 이미지를 표현하는 html 예제를 만들어 본다.
이미지를 대충 3가지 준비하여 이미지태그를 사용해 본다.
이미지 태그를 사용할 때 필요한 속성인 src 와 alt 속성을 같이 사용하고 이미지가 표시되지 않는 상황까지 고려해 본다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<img src="황금장군.png" alt="1호선 황금장군">
<img src="붉은혜성.png" alt="1호선 붉은혜성">
<img src="태양만세.png" alt="1호선 태양만세">
</div>
</body>
<!-- // -->
</html>
<!-- // -->코드를 보면 이미지 3가지를 이용하여 화면에 이미지를 표시해 주고 있다.
img 태그를 이용하여 이미지를 표시하도록 하고 있고, src 속성으로 화면에 표시할 이미지를 지정한다. 그리고, 어떠한 이유로 이미지가 나타나지 않을 경우 대체텍스트가 나타날 alt 속성을 사용한다.
결과 화면을 보자.
별다른 문제가 없다면 이미지는 잘 나올 것이다.
만약, 위의 이미지가 나타내는 상황에서 어떠한 이유로 이미지가 나타나지 않을 경우 alt 태그에 작성한 대체텍스트가 표시될 것이다.
이미지 주소를 강제로 수정하여 이미지가 나타나지 않도록 한 경우를 보자.
이미지는 나오지 않지만 이미지를 설명하는 대체텍스트가 화면에 나타남을 볼 수 있다.
'programming > web' 카테고리의 다른 글
| html img 태그 이미지 경로 지정 방법 Specifies img src path (0) | 2022.05.30 |
|---|---|
| html 이미지 크기 조절 하기 changing image size in html (0) | 2022.05.27 |
| html 링크 태그 북마크 처럼 사용하기 using a link tag bookmark (0) | 2022.05.19 |
| html 링크 태그 버튼 모양 스타일 적용하기 using html link tag button style (0) | 2022.05.14 |
| html 링크태그 색깔 종류 using html hyper link tag colors (0) | 2022.05.10 |
댓글