이미지 태그는 html5에서 웹페이지에 이미지나 그림을 나타내 준다. 마크업언어는 img 이며 기본적으로 src 속성을 사용하여 이미지주소를 지정해 주어야 한다. 이미지의 화면 크기를 지정하기 위해 width height 속성을 사용할 수 있다. alt 속성을 사용하면 이미지설명을 추가할 수 있고, 이미지가 나오지 않는 상황이 된다면 이미지설명글이 대체문자열로 나타날 것이다.
html5 img 태그 사용 웹페이지 이미지 표시
using img tag
웹페이지에서 이미지를 화면에 나타내기 이미지 태그를 사용한다.
이미지 태그는 img 마크업을 사용한다.
이 태그를 사용하여 웹페이지에 화려한 이미지를 넣을 수 있다.
이미지를 화면에 표시
이미지를 웹페이지에 표시하려면 img 이미지 태그를 사용한다.
img 태그를 사용할 때 필수로 사용되는 속성이 src 이다.
src 속성은 이미지주소를 말한다.
이 외 이미지의 크기를 표현하는 width와 height 이미지의 설명을 작성하는 alt 속성이 있다.
width, height, alt 속성은 생략이 가능하다.
<img src="이미지주소" width="이미지 가로크기" height="이미지 세로크기" alt="이미지설명"/>샘플코드
이미지를 하나 넣어보자.
이미지는 인터넷에 있는 것을 아무거나 선택하여 표시할 것이다.
img 태그만 살펴보도록 하자
위에서 제시한 속성을 모두 사용하였다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<!-- 제목 -->
<div>
<img alt="컬링"
width="400" height="200"
src="https://image.news1.kr/system/photos/2018/2/18/2971208/article.jpg/dims/optimize">
</div>
</body>
<!-- // -->
</html>
<!-- // -->이미지는 언론사의 것을 사용했다.
img 태그를 보자.
alt 속성으로 이미지설명을 작성하였다.
alt 속성은 이미지가 나오지 않는 경우가 발생한다면 대체문자를 나타내는 속성이기도 하다.
width, height 로 이미지의 크기를 지정해 주었다.
src 를 사용해 이미지 주소를 설정했다.
결과화면을 보자.
width, height 를 지정하지 않는다면 이미지는 원래의 크기인 원본의 크기에 맞게 나올 것이다.
만약, 이미지가 깨졌다고 가정하고 이미지가 나오지 않는다면 문자가 alt 속성에 작성한 글자가 나타날 것이다.
'programming > web' 카테고리의 다른 글
| html5 태그 요소 특징 html elements (0) | 2022.02.22 |
|---|---|
| html5 기본 태그로 웹문서 템플릿 만들기 making html5 document (0) | 2022.02.17 |
| html5 링크 a 사용 웹페이지 연결 및 이동 (0) | 2022.02.12 |
| html5 문단 태그 p 사용 컨텐츠 내용 표시 paragraphs tag (0) | 2022.02.10 |
| html5 제목 표시 태그 사용 heading tag (0) | 2022.02.07 |
댓글