안녕하세요.
HTML 3단계 이미지 삽입 시간이 왔습니다.
저번 시간에는 입문태그를 알아봤는데요 혹시나 잊지는 않으셨겠죠?~^^;
오늘도 화이팅하며, 부담없이 봐주시면 됩니다.~
자 그럼 HTML 3단계 이미지 삽입편 시작해볼께요~
▣ HTML 이미지 삽입
HTML문법에서 이미지를 삽입하기 위해서는 <img> 태그에 대해서 알아야 됩니다.
<img> 태그는 1단계, 2단계에서 배운 태그와 사용법이 약간 다릅니다.
즉, <img></img> 이런식으로는 사용할 수 없다는 말입니다.
어라?~ 매우 당황하셨죠? 그럼 태크마다 적용방법이 다 다른가???
네 맞습니다. 맞고요. 해당 태크의 속성마다 코딩 방법이 약간씩 다르답니다. 그에 따라 태크마다 속성들을 다 배워서 그에 맞는 코딩을 해주셔야 정상적으로 태크를 사용하실 수 있습니다.ㅎ
자 그럼 <img>태크의 기본 사용법을 알려드릴께요.
<img>태그의 경우 기본 문법은 다음과 같아요.
<img src="이미지.jpg">
src가 더 추가된거 보이시죠? src안에는 삽입하고자 하는 이미지의 경로 즉 이미지 파일이 저장되어있는 위치를 지정해주는겁니다. 그래야 이미지 위치를 찾아서 해당 이미지 파일을 불러온다는 뜻입니다.
그럼 바로 실습을 해봅시다!!!
예문 코드를 한번 살펴볼께요.
<!DOCTYPE HTML>
<html>
<head>
<title>타이틀 제목</title>
</head>
<body>
<img src="soccerball.png">
</body>
</html>
지난번에 만드신 "C:\Web"폴더에 "index.html"의 파일을 수정하시거나 다른 파일명으로 추가 하시면 됩니다.
저는 index.html 파일을 수정해서 바로 테스트 해볼께요.

여기서 해당 이미지 파일의 경우 "C:\Web"폴더에 저장하셔야됩니다. 즉, 위의 그림 처럼 index.html 파일과 동일 폴더에 이미지 파일이 있어야 해당 이미지 파일이 정상적으로 보여집니다.

보시는 바와같이 이미지 파일이 정상적으로 나타나네요. 어떠신가요? 참 쉽죠~
지금까지 이미지 삽입하는 방법을 알아봤는데요. 여기서 이렇게 끝내면 뭔가 모르게 참 아쉽죠?~
그래서 준비했습니다.ㅎㅎㅎ
여기서 의문점이 한가지 드시지 않나요???
잘 따라해서 이미지 삽입까지 했는데 이미지 크기가 너무 크네요.......
본 이미지 파일을 건드리지 않고 HTML에서 글자 크기를 키우고 작게 한것처럼 이미지도 보여주는 부분을 작게하거나 크게 나타낼 수 없는가??? 라는 의문점이 드시지 않나요?ㅋㅋㅋ
당연히 하실 수 있습니다.
<img> 태크의 속성을 지정하면 되는게 팁입니다!!
과연 어떤 속성을 지정해야되는지 하는가 인데요.
2가지 속성을 추가 입력해 주면 됩니다. 한번 알아볼까요???
1. width
가로 크기를 조절할때 사용합니다. 적용 방법은 다음과 같습니다.
<img src="soccerball.png" width="사이즈">
2. height
세로 크기를 조절할때 사용합니다. 적용방법은 다음과 같습니다.
<img src="soccerball.png" height="사이즈">
가로(width)와 세로(height)를 이용하여 이미지 크기를 줄여봅시다. 해당소스를 다음과 같이 수정하시면 됩니다.
수정 전 : <img src="soccerball.png">
수정 후 : <img src="soccerball.png" width="300" height="300">

보시는 바와 같이 크게 보이던 축구공이 어느샌가 작게 보여지네요.
참 쉽죠?~~ ㅎㅎㅎ 여기서 사용했던 width와 height는 여러곳에서 사용되니 기억해 두시면 편리하겠죠?~
그리고 반복해서 연습하셔야 된다는 건 필수인거 아시죠?ㅎㅎㅎ
다음시간에는 "링크(하이퍼링크)" 적용하는 방법을 포스팅해볼껀데요. 응원과 기대 많이 해주세요. 감사합니다.
'TIP > HTML CSS' 카테고리의 다른 글
HTML 6단계 - 프레임(frame) 2탄 (0) | 2020.12.07 |
---|---|
HTML 5단계 - 프레임(frame) 1탄 (0) | 2020.12.07 |
HTML 4단계 - 링크 (0) | 2020.12.06 |
HTML 2단계 - 입문 태그 (0) | 2020.12.05 |
HTML 1단계 - HTML이란? (0) | 2020.12.05 |
댓글