HTML 기초강좌, 이미지 삽입태그 및 이미지크기 조절태그

HTML 기초강좌, 이미지 삽입태그 및 이미지크기 조절태그

HTML 기초강좌! 이번 강좌에서는 태그를 이용해서 이미지를 삽입하는 방법과

이미지의 크기를 조절하는 태그 그리고 마우스를 가져다 댔을 때 이미지의 설명을 보여주는 

태그들에 대해서 살펴보도록 하겠습니다. 아주 흔하게 많이 쓰이는 태그니까 꼭 ~ 끝까지 두눈 크게 뜨고 봅시다!

오늘은 3종류의 예시를 가지고 이미지 삽입 태그에 대해서 살펴보도록 하겠습니다.

우선 가장 기초가 되는! 단순히 이미지만 삽입하는 태그를 살펴보겠습니다.

<IMG SRC=" ">

이미지 삽입 태그의 기초는 img src=" " 바로 이 태그입니다.

어떤 이미지든지 큰 따옴표 안에만 들어가면 표시가 되게 되는것이죠.

위의 태그를 적용하면 아래처럼 이미지가 표시됩니다. 

단순히 이미지를 가져오는 게 바로 img src 소스입니다.

홈페이지에서 이미지를 가져오고자 할 때에는 img src="image/picture.jpg"

이런식으로 디렉토리 순서에 따라서 이미지를 불러올 수 있습니다.

alt / title 태그

alt 태그와 title 태그는 이미지를 수식해주는 역할을 합니다. 

<img src=" " 이 소스 뒤에 괄호를 닫기 전에 alt를 넣어주시면 이미지를 볼 수 없는 경우에 

이미지를 설명해줄 수 있는 태그입니다. 겉으로는 표기가 안되는 태그이지만 

소스를 넣을 때 해당 이미지를 설명해주기 때문에 구분하기가 쉽죠

그리고 title 태그 역시 괄호를 닫기 전에 넣어주는데요. 이미지에 마우스를 가져다 댔을 때

그 이미지의 설명이 뜰 수 있도록 해주는 태그입니다.

예시를 볼까요?

화면을 보시면 제가 title 태그 안에 적어줬던 내용이 말풍선으로 떠있죠?

마우스를 가져다 대면 저런식으로 이미지의 설명이 뜹니다.

이미지의 설명을 적기에는 화면의 구성이 애매할 때 저런식으로 소스를 활용하면 되겠죠?

'

weigh, height 태그

이번에는 이미지의 크기를 조절하는 방법에 대해서 살펴보겠습니다.

이미지 크기는 weigh, height 두 개의 태그를 이용해서 조절할 수 있는데요.

<img src=" " 이 뒤에 괄호를 닫기 전에 가로세로를 지정해주시면 됩니다.

저는 400x224 크기로 이미지를 지정해줬더니 아래에 결과물을 한번 볼까요?

요렇게! 이미지가 작아졌습니다. 

이미지를 포토샵이나 크기조절 프로그램으로 줄이기는 좀 귀찮잖아요?

하지만! 요렇게 태그를 이용하면 간단하게 이미지 크기를 줄일 수 있게 되었습니다.

생각보다 아주 간단하죠?

자 ~ 이렇게 이미지를 삽입하는 태그! 이미지 설명하는 태그! 이미지 크기 조절하는 태그까지

모두 살펴봤습니다. 다음 포스팅에서는 이미지를 정렬하는 태그들에 대해서 살펴보겠습니다.

다음 포스팅에서 만나요~~

---