티스토리 뷰

오늘 알아볼 img 태그는 실제 블로그에 포스팅 하실때
사용하는 태그중에 하나입니다.^^


흔히 이미지 등록 이라는 메뉴를 통해 자동등록을 하실텐데요~
에디터 기능에 존재하는 "이미지등록" 기능을 사용하여 이미지를 본문에 넣을때에..
자동적으로 img 태그를 통해 등록이 되는 태그이기도 합니다.


한번 지난 강좌에서 본문에 사용했던 이미지를 img 태그를 통해 가져와 보겠습니다.

 

 

 

 

 

짜잔.....위 이미지는

위와 같이 img 태그를 사용해서 가져온 것인데, img 태그의 형식을 살펴보면....

 

 

요렇게 된다는 것이지요...^^ img 태그 내 에서 이미지의 넓이나 높이를 변경함으로써 사이즈의 조정또한 가능합니다.


이미지의 넓이,높이, 그리고 테두리를 넣어보겠습니다.

 

이미지의 넓이를 200, 높이를 102로 넣어주고 border 값을 추가했더니.. 위같이 이미지 사이즈는 작아지고,
이미지에 테두리가 생겼네요..^^ border="0"이라고 넣어주게 되면 테두리는 보이지 않게 되겠죠?^^


이미지와 함께 내용을 입력해 보겠습니다.

 

 


내용을 입력하고, 테두리 값을 넣었더니 위와 같이 출력되는 것을 확인 할 수 있습니다.
어라? 그런데 못 보던 것이 하나 추가 되었습니다. 바로 hspace 라는 것인데....
위 이미지를 보시면 이미지와 내용 사이에 간격이 벌어져 있는것 보이시나요?


vspace
는 이미지의 양쪽 가로에 얼만큼 여백을 줄것인지 넣어줄 수 있는 부분입니다.^^
헌데, 내용이 이미지에 딱 맞에 들어가지 않는 느낌이네요....흠...
요럴땐 어떻게 해야 할까요? 바로 float:left라는 것을 사용하시면 됩니다.


 

위 처럼 태그와 내용을 입력하고, style="float:left" 라고 추가로 입력한 부분이 보시시죠?
저렇게 입력한 후 결과물을 확인해 보면... 짜잔~~~~
아래와 같이 이미지 옆에 내용이 딱 맞춰 출력되는 것을 확인할 수 있겠습니다..^^

 

 


오늘도 후다닥 강좌를 마무리하고, 다음 강좌는 더 알찬것으로 준비해 보도록 하겠습니다.^^
모두 즐거운 한주, 문제없이 스타트~ 하시길 바랍니다.^^

댓글
댓글쓰기 폼
Total
587,690
Today
2
Yesterday
21
링크
«   2019/05   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
글 보관함