[기초태그강좌] 이미지 삽입 태그

이미지의 경우 기본적으로 바로 올리는 것이 가장 좋습니다. 속칭 X박스를 방지하기 위해서지요~ 링크를 걸어서 이미지를 올릴 경우 원본이 사라지거나 링크 주소가 바뀔경우 X박스로 보여집니다. 

그래서 온라인상 이미지일 경우 <다른 이름으로 그림저장>또는 화면캡쳐 등을 활용하여 자신의 PC에 다운을 받았다가 다시 올리는 것을 권장합니다. 메일, 게시판의 경우 첨부기능이 있기 때문에 그것을 활용하면 됩니다. 그것이 정 안될 경우 아래 태그를 활용해서 링크를 걸어 봅시다. 

[이미지 링크 기본 태그]

<img src="이미지 주소"> 

쉽죠? 이미지 주소의 경우 필요한 이미지에 마우스를 위치하고 오른쪽클릭 속성으로 들어가보시면 확인 가능합니다. 몇가지 추가적인 태그를 살펴볼까요... 

  

[이미지 크기 정하기] 

<img src="이미지 주소" width="400" height="150">

▶ width 명령어가 가로, height 명령어가 세로크기를 의미합니다. 기본적으로 px로 설정되어 있기때문에 가로 400px, 세로 150px 크기로 보여집니다. (숫자 뒤에 px를 적어주셔도 됩니다) 참고로 크기는 퍼센트% 로 적어도 됩니다. (%로 지정하면 해당페이지 크기가 100%기준이 됩니다)

[이미지 위치 정렬하기]

<img src="이미지 주소" align="left">           좌측 정렬

<img src="이미지 주소" align="center">         중앙 정렬

<img src="이미지 주소" align="right">             우측 정렬

 

<img src="이미지 주소" valign="top">         상단 정렬

<img src="이미지 주소" valign="middle">     중간 정렬

<img src="이미지 주소" valign="bottom">     하단 정렬

[테두리 넣기] 

 

<img src="이미지 주소" border="7">

▶  border 명령어는 테두리 두께를 얘기합니다. "7" 이라는 두께의 테두리가 생성됩니다. 일반적으로는  border="0" 을 많이 적어주고 필요할 경우 수치를 적습니다.

 

[alt문자열 넣기] -  마우스가 이미지에 올라갔을때 뜨는 설명글입니다. 안적어주셔도 상관없습니다.

<img src="이미지 주소" alt="설명글">

▶ 그림에 마우스를 가져가면 "설명글" 이라는문자가 뜹니다. 



2009/09/28 - [IT강좌/태그-이정도는 알자] - [기초 태그강좌] HTML 문서의 기본 구조