HTML 에 이미지 넣기
문서에 이미지 넣기 를 배워보도록 하겠습니다.
일단 기본 소스를 가져와야 겠죠..^^
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서에 이미지 넣기</title>
</head>
<body>
<h1>문서에 이미지 넣기</h1>
<p>이제 문서에 이미지를 넣도록 하겠습니다.</p>
</body>
</html>
그리고 오늘 할 내용을 먼저 영상으로 보겠습니다. ^^
p 태그 하단에 <img src="소스 경로"> 를 추가해주시면 이미지가 들어가게 됩니다.
소스 경로에 이미지의 절대경로 or 상대경로 를 알아야 합니다...
이부분은 구글 이나 네이버의 검색 기능을 이용해서 한번 알아보도록 하세요 ^^;;;
따라하며 배우는 것에 촛점을 맞추었기 때문에 자세한 사항은 검색엔진을 통해서 알아가는 것을 추천합니다.
<img src="img01.jpg"> <======== 이미지 상대경로로 입력한 예 입니다.
<img src="http://example.com/img01.jpg"> <====== 이미지의 절대경로로 입력한 예 입니다.
이미지 태그에는 속성이 많이 있는데요...다양한 기능들은 검색엔진을 통해서 알아보도록 해봅시다.
검색엔진에 "img 속성" 이렇게 검색 해보시면 다양한 기능들을 알아보실 수 있습니다.
여기서는 간략하게 alt 속성과 width 속성만 알아보도록 하겠습니다.
alt 속성은 이미지를 대체 하는 텍스트 입니다. 화면에서 이미지가 나오지 않게 되면 대체로 텍스트가 쓰여지게 되는거죠.. ( [ 그림 3 ] 참고 )
width 속성은 이미지의 가로 사이즈의 크기를 정해줄때 사용됩니다. 단위는 px(픽셀) 이며 자세한 사항은 검색엔진을 통하여 알아보시기 바랍니다. ^^
[ 그림 1 ]
[ 그림 1 ] 사진은 용인 한택식물원에 갔을 때 찍었던 사진 입니다.
이 사진을 웹 페이지에 적용 시키면 [ 그림 2 ] 와 같은 모습이 됩니다.
저는 이렇게 한번 소스코드를 적어보았습니다.
<img src="img01.jpg">
[ 그림 2 ]
이미지의 크기가 너무 커서 한 화면에 다 나오지 않습니다..
width 속성으로 크기를 줄여보겠습니다.
<img src="img01.jpg" width="300px">
[ 그림 3 ]
[ 그림 3 ]의 모습은 이미지를 가져오고 width 값이 300px 적용된 값입니다.
이미지가 나오지 않을 경우에는 alt 속성에 있는 값이 나오게 됩니다.
<img src="img01.jpg" width="300px" alt="용인 한택식물원">
[ 그림 4 ]
[ 그림 4 ] 부분은 그림이 나오지 않았을 경우 alt 속성이 적용된 모습입니다.
이제 전체 소스 코드 내용을 다시 한번 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서에 이미지 넣기</title>
</head>
<body>
<h1>문서에 이미지 넣기</h1>
<p>이제 문서에 이미지를 넣도록 하겠습니다.</p>
<img src="img01.jpg" width="300px" alt="용인 한택식물원">
</body>
</html>
HTML 문서의 기본 템플릿에서 이미지 태그 한줄 추가해 보았는데 무언가 확 달라진 느낌이죠 ^^ ~ 그렇다고 해주세요...
그럼 다음에 또 뵐게요..
'Program > HTML' 카테고리의 다른 글
| 따라하며 배우는 HTML - #6 ( HTML Style) (0) | 2018.10.07 |
|---|---|
| 따라하며 배우는 HTML - #5 ( a 태그 ) (0) | 2018.10.06 |
| 따라하며 배우는 HTML - #4 ( ul 태그 / ol 태그 ) (0) | 2018.10.06 |
| 따라하며 배우는 HTML - #3 ( 줄바꿈 / 엔티티코드 ) (0) | 2018.10.06 |
| 따라하며 배우는 HTML - #1 ( 기본 템플릿 ) (0) | 2018.10.06 |
