블로그교육
<img> 태그는 웹에 이미지를 표시할때 사용하는 태그입니다.
사용법: <img src="이미지경로" border=0 width="넓이" height="높이">
- src는 웹에 표시할 이미지의 경로와 이름을 적어줍니다.
- width는 이미지폭을 지정하고 height는 이미지 높이를 지정하는데 생략가능
- border 는 이미지의 테두리를 표시할것인지를 적어주는 옵션입니다.
0을 적으면 테두리가 표시되지 않고, 1을 입력하면 테두리가 표시됩니다.
▣ 예제
예제1) <img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf"> 결과
예제2) <img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf" border=0 width=100 height=120>
결과
예제3) <img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf" border=0 width=200 align=center>
결과
align=center는 그림의 가운데에(세로) 글자가 써지도록 합니다.
예제4)
만약에 이미지 옆에 여러줄의 글을 쓰기 위해서는 style sheet(css)를 이용하는 방법과 table 태그를 이용하는 방법이 있습니다. style을 이용하는 방법으로 float 을 이용하면 됩니다.
<img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf" width=200 style="float:left;">
결과
style="float:left;" 를 적으면.. 이와 같이 이미지의 옆에 여러줄의 글을 입력할 수 있습니다.
이미지의 왼쪽에 글을 쓰기 위해서는 이미지를 오른쪽으로 보내면 됩니다. float:right라고 적어주면 되겠죠!
이미지와 글자사이를 띄어주기 위해서는 hspace=10px 과 같이 적어주면됩니다. 아래와 같이요~~
<img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf" width=200 style="float:left;" hspace=10>
|
2011.08.21 13:38
2011.08.21 20:00
2011.10.09 00:57
2011.10.20 21:27
2012.01.26 01:24
2012.02.02 12:37
2012.02.06 14:29
2012.02.27 06:54
2012.03.19 18:46
2012.06.09 19:13
2012.06.14 01:39
2012.07.19 10:40
2013.04.02 17:11
2013.05.08 01:58
2016.02.02 11:47
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
8 | 유튜브 동영상 자동 재생 소스코드 [3] | 넘착한놈 | 2015.04.03 | 16118 |
7 | 수평선 나누기 HR 태그 [6] [75] | 원추리 | 2013.02.21 | 6565 |
6 | A tag 링크넣기 [7] [122] | 원추리 | 2013.02.17 | 6459 |
5 |
input 태그, 마우스클릭시 글자 자동선택하기
[15] [111] ![]() | 블로그스쿨 | 2011.11.06 | 14754 |
» | 그림,사진을 표시할때 사용하는 <img> 태그 [15] [140] | 블로그스쿨 | 2011.08.21 | 16672 |
3 | [html] 줄바꿈태그 <br> [11] [116] | 블로그스쿨 | 2011.08.21 | 13364 |
2 | html 배우기 <font> 태그 - 글자크기, 글자색깔, 글꼴 [13] [219] | 블로그스쿨 | 2011.07.04 | 63494 |
1 |
HTML 의미와 HTML 태그 사용형식
[27] [155] ![]() | Kay | 2011.06.30 | 16701 |
서비스 링크
유용한 정보였슴다~