당연히 이미지도 들어간다
앞선 포스팅에서 HTML의 역할이 웹문서의 구역을 나누는 것임을 알아보았다. 또한 의도적으로 나눈 구역에 <p>태그를 이용하여 문단을 적을 수 있음도 확인헀다. 글로만 이루어진 문서라면 이것으로 충분할 것이다. 하지만 모든 웹문서가 글자로만 이루어지지는 않는다. 갖가지 귀여운 이모티콘과 읽는 이로 하여금 집중할 수 밖에 없도록 만드는 센스있는 사진은 필수다. 하물며 이 포스팅을 남기는 근본적인 목표인, "출간물"이라면 어떨까?
내용 중간에 들어갈 삽화는 물론, 책의 기본 구성인 표지에서 이미지는 필수불가결한 요소다. 전자책의 한 가지 형태인 ePUB은 HTML로 만들어진다고 하던데 그렇다면 HTML에서 이미지도 다룰 수 있지 않을까? 결론부터 말하자면 대답은 그렇다, 이다. HTML로 이미지 역시 다룰 수 있다.
그래서 이미지는 어떻게 화면에 띄울 수 있나요?
이미지를 브라우저 화면에 띄우기 위해 <img> 태그를 사용한다. 통상 여는 태그와 닫는 태그로 이루어진 다른 태그들과는 달리, <img>태그는 닫는 태그를 사용하지 않는다. 또한, 태그 안(즉, 꺽쇠 '<>' 안)에 출력될 이미지의 속성을 명시해야한다는 특이점이 있다.
작성 방법은 아래와 같다.
<img src="이미지 파일이름.확장자 or 이미지 파일이 있는 경로" width="가로길이" height="세로길이">
아래 문서는 내 태블릿 내 Download 폴더 안에 있는 이미지를 브라우저에 띄워본 HTML문서이다.
<!DOCTYPE html>
<head>
<title>
이미지 태그 테스트
</title>
</head>
<body>
<div style="border:1px solid #000000; width:300px; height:300px;">
<img src="/storage/emulated/0/Download/palm_novel_logo.jpeg" width="300px" height="300px">
</div>
</body>
신경써야할 점은 향후 이미지의 위치나 배열을 조정할 수 있도록 <div>태그를 이용해 영역을 할당한 다음 그 안에 <img>태그를 넣어주면 사용이 용이하다는 점이다.
위 처럼 출력된다.
'HTML' 카테고리의 다른 글
| [HTML] 본격적인 문서 작업을 위한 HTML tag (0) | 2021.03.22 |
|---|---|
| [HTML] padding을 입은 div 사이엔 간격(margin)이 필요해 (0) | 2021.03.19 |
| [HTML] 결국, HTML은 웹문서의 구조를 정의하는 방법론 (0) | 2021.03.06 |
| [HTML] HTML 문서의 기본 구조를 파헤쳐보자(2) (0) | 2021.03.01 |
| [HTML] HTML 문서의 기본 구조를 파헤쳐보자(1) (0) | 2021.02.22 |
댓글