html 고급 문서 만들기 1 - img 태그로 이미지 삽입하기
네 안녕하세요, 이번 포스팅에서는 이미지를 삽입하는 방법에 대하여 알아보도로 하겠습니다.
우리가 웹 화면을 보면 이미지들이 심심찮게 삽입이 되어있는 것을 볼 수 있습니다.
그러한 이미지도 html 태그로 넣을 수 있는 방법이 존재합니다.
이번 포스팅에서는 웹을 꾸밀 때 그림을 넣는 방법에 대하여 알아보고자 합니다.
그럼 지금부터 알아보도록 하겠습니다
1. 이미지 삽입하기 : img 태그 이용
img 태그를 이용하면 이미지를 삽입할 수 있습니다.
img 태그를 이용하여 삽입이 가능한 이미지 형식은 bmp, png, jpg(jpeg), animated - gif 등이 있습니다.
거의 현존하는 모든 형태의 이미지 파일은 다 삽입이 가능하다고 생각하시면 됩니다.
그리고 이미지 파일은 html 페이지가 만들어져 있는 폴더와 같은 위치에 있거나,
이미지 파일이 들어있는 폴더가 html 페이지를 만들어놓은 폴더와 같이 있어야 이미지가 보이니 주의하세요.
이런 식으로 한 폴더 내에 존재해야 하며,
해당 폴더 내에 다른 폴더를 만들어 저장을 해뒀다면,
이미지의 주소를 이미지 파일이 있는 폴더로 지정을 하여 나타내야 합니다.
보통 img 태그는 이런 식으로 사용합니다.
<img src="이미지 파일의 url" alt="문자열" width="이미지의 폭" height="이미지의 높이">src는 이미지 파일의 위치를 알려주는 url을 삽입하는 부분이기 때문에 필수적으로 들어가야 하는 것이고,
alt는 이미지가 부재하거나 파일이 손상이 되었을 때 원래 이미지가 무엇인지 설명을 하기 위해서 보통 달곤 합니다.
일종의 대체 문구라고 생각하시면 됩니다.
그리고 width와 height는 쉽게 말해서 가로와 세로라고 생각하시면 됩니다.
단위는 보통 픽셀을 사용합니다.
그럼 간단한 예제 코드를 통하여 어떻게 쓰는지 같이 볼까요?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>이미지 삽입</title>
</head>
<body>
<h3>이미지 삽입</h3>
<hr>
<p> 엘비스 프레슬리의 사진입니다.</p>
<img src="media/Elvis1.jpg" width="150" height="200" alt="Elvis">
<img src="media/kitae.jpg" width="80" height="100" alt="황기태사진없음">
<img src="https://t1.kakaocdn.net/kakaocorp/kakaocorp/admin/service/
453a624d017900001.png" alt="사진 주소 변경됨" width="100" height="100">
</body>
</html>이렇게 여러 가지 경우가 있습니다.
이 경우들에 대해서는 결과 화면을 통해서 설명을 하는 것이 더 이해가 쉬울 것 같아 결과 화면을 먼저 보여주겠습니다.
첫 번째 엘비스 프레슬리의 사진은 직접 저장한 이미지를 불러온 경우이고,
두 번째의 경우는 사진이 존재하지 않기 때문에 이미지 부재 아이콘이 뜸과 동시에
이미지를 대체하는 문자열인 '황기태 사진 없음'이 뜬 겁니다.
그리고 마지막 경우는 카카오톡 이미지를 링크를 통해서 끌어다 온 경우입니다.
이런 식으로 사진이 저장이 되어있지 않아도 끌어서 올 수 있습니다.
여기까지 이미지 파일을 삽입하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 리스트를 만드는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 고급 문서 만들기 3 - table 태그로 표 만들기 (0) | 2023.03.01 |
|---|---|
| html 고급 문서 만들기 2 - ol, ul, dl 태그로 리스트 만들기 (0) | 2023.03.01 |
| html 기본 문서 만들기 10 - 블록 태그와 인라인 태그 이용하기 (0) | 2023.03.01 |
| html 기본 문서 만들기 9 - 텍스트 꾸미기 (0) | 2023.03.01 |
| html 기본 문서 만들기 8 - pre 태그를 이용하여 개발자의 포맷 그대로 출력하기 (0) | 2023.03.01 |
댓글