관리 메뉴

키스세븐

기초태그 - 이미지를 삽입하는 태그 활용하기 "img태그" 본문

홈피와 블로그

기초태그 - 이미지를 삽입하는 태그 활용하기 "img태그"

키스 키스세븐 2015. 1. 22. 04:00
공유하기 링크
필요하면 공유하세요 ^^
이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.
[기초태그 - 이미지를 삽입하는 태그 활용하기 "img태그"] 




태그로 이미지를 삽입하는 기본태그 

요즘은 홈페이지를 만들 때 홈페이지 저작도구 프로그램을 사용하기 때문에 아이콘을 눌러서 이미지를 삽입합니다. 블로그에 글을 쓸 때도 마찬가지이고 게시판에 글을 쓸 때도 마찬가지입니다. 



그래서 초보자들도 인터넷을 쉽게 활용할 수 있는 세상이 되었는데, 원래는 일일이 이미지태그로 이미지를 삽입하는 것이 기본방식입니다. 
그러므로 아직도 홈페이지를 정밀하게 제작한다든지 블로그 글에 정밀하게 이미지를 삽입할 때는 태그를 이용해서 사진과 그림을 삽입하고 있습니다. 또한, 글쓰기 에디터를 지원하지 않는 게시판등에서는 태그(html)을 직접 입력하여 이미지를 삽입합니다

기본 태그는 아래와 같습니다.
 <img src="주소" alt="그림설명" />
위의 태그를 기본으로 기억해 놓는 것이 좋습니다. 좀 더 정밀한 표현은 여기에 옵션(STYLE태그)를 추가하여 표현합니다. 
 




좀 더 다양하게 이미지태그를 사용하는 방법 
 
좀 더 다양한 표현을 위해서는 추가값을 더하여 여러가지 설정을 할 수도 있습니다. 
아래는 여러가지 예제입니다. 
 <img ID="스타일" src="주소" alt="그림설명" />
             CSS스타일에서 설정한 값으로 이미지모양을 꾸밀 때 

 <img style="스타일값" src="주소" alt="그림설명" />
             직접 스타일을 설정하면서 모양을 바꿀 때(이상 두개는 CSS를 배워서 씁니다.)

 <img src="주소" width="가로길이" height="세로길이" alt="그림설명" />
             이미지의 가로와 세로의 크기를 지정거나 바꿀 때 

 <img src="주소" align="위치" alt="그림설명" />
             표나 글자에 대해서 이미지의 위치를 중간이나 위쪽 등등으로 배치할 때 
             top, bottom, left, right, middle 위/아래/좌/우/중간 등의 옵션을 줍니다.

 <img src="주소" border="숫자" alt="그림설명" />
             이미지바깥쪽에 테두리를 줄 때(0이면 테두리 없음) 

 <img src="주소" vspace="숫자" hspace="숫자" alt="그림설명" />
             이미지의 위/아래 여백과 좌/우 여백을 줘서 공간을 띄울 때
 




따라하며 연습해 보기 
 
예제로 연습을 해 봅시다. 
브라우저로 웹페이지를 엽니다. 블로그는 마우스사용 금지를 설정한 곳이 많으니 일반 사이트에서 해 보는 것이 좋습니다. 

우선 이미지 위에 마우스포인터를 놓고 마우스 오른쪽버튼을 클릭면 뜨는 메뉴의 "속성"에서 주소(URL) 부분을 복사하여 준비합시다. 이 드래그하여 복사하기를 선택하면 이미지의 주소를 컴퓨터가 기억하고 있게 됩니다. 


위의 태그에서 SRC="주소"의 주소라는 부분을 지우고 복사한 것을 붙여넣기를 합니다.
 


위의 기본태그만을 이용하여 주소를 붙여 넣었다면 아래와 비슷한 코드가 만들어질 것입니다. 
<img src="http://www.kiss7.kr/img/sample.jpg" alt="그림설명" />
 
이때 이미지나 사진의 크기를 가로 150, 세로 130으로 하고 테두리 1을 주고 싶다면 이렇게 합니다.
<img src="http://www.kiss7.kr/img/sample.jpg" width="150" height="130" border="1" alt="눈모양의 이미지" />
width : 가로의 길이를 말합니다. 
height : 세로의 길이를 말합니다. 
border : 테두리 굵기를 말합니다. 
alt : 이미지의 설명을 말합니다. 이미지의 설명부분은 이미지 위에 마우스를 올려두면 보이게 됩니다. 또는 검색엔진이 이미지에 대한 설명이라고 생각하고 긁어 갑니다.  
 
그런데 이미지 옆에 글자가 딱 붙어서 예쁘지 않다면 여백을 만들 수도 있습니다. align를 사용하면 이미지의 위치도 지정할 수 있습니다. 
<img src="http://www.kiss7.kr/img/sample.jpg" width="150" height="130" border="1" hspace="5xp" vspace="5px" align="center" alt="눈모양의 이미지" />
hspace : 이미지의 좌우 여백 
vspace : 이미지의 상하여백 
align : 가운데, 오른쪽, 왼쪽 등의 정렬을 뜻합니다. 





참고사항 

웹표준을 지키기 위해서는, 이미지를 삽입하는 기본 태그인 <img src="주소" alt="그림설명" /> 이외의 width, height, border, hspace, vspace, align등은 img의 속성에서 사용하는 것보다는 CSS를 이용해서 효과를 주라는 권고사항이 있으니 CSS를 배우는 것이 더욱 좋겠습니다. 

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)



★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^
(로그인 필요없음)


키스세븐지식은 키스세븐과 그룹 사이트입니다.

아래로 더 내려 가 보세요!

혹시 읽을만한 것이 또 있을지도 모르잖아요? ^^

이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.
http://kiss7.tistory.com

Tag
, , , , , , , , ,
공유하기 링크
필요하면 공유하세요 ^^
0 Comments
댓글쓰기 폼