본문 바로가기
TIP/HTML CSS

HTML 3단계 - 이미지 삽입

by Rui 2020. 12. 6.
반응형

안녕하세요.

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">

 

HTML

보시는 바와 같이 크게 보이던 축구공이 어느샌가 작게 보여지네요.

참 쉽죠?~~ ㅎㅎㅎ 여기서 사용했던 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


이 포스팅은 쿠팡 파트너스 활동의 일환으로 이에 따른 일정액을 수수료를 제공받을 수도 있습니다



댓글