▒요약
그림 주소 알아내기
인터넷 페이지들은 거의 대부분이 그림으로 되어있지요.
웹 페이지에 그림을 뜨게하려면, html 문서에 그림을 불러오는 태그를 쓰면된답니다.
그림을 일정 장소에 저장해 놓고 그림 불러오는 태그로 그 주소를 호출하면
그림이 뜨게 되는 것이지요. 그림마다 모두 주소가있습니다.^^
원하는 그림 위에 마우스를 올려놓고 오른쪽 버튼을 누르면 주르륵~ 메뉴가 뜨지요?
그 메뉴들 젤 아래 "등록정보" 가있습니다. (윈도우XP인 경우는 "속성")
등록정보를 누르시면 "주소(URL)" 이 있고 "http://!~~~#~$@#~~@$^%#^^%*~~" 이런 주소가있죠?
그게 바로 그 그림이 저장되어있는 주소입니다 ^^*
무지하게 자주쓰는 것이니 꼭 익혀두세요.
예) 조 위에 만화 두번째 페이지 주소는
http://www.herjaherja.com/image/contents/hj_21_01.jpg
▒요약
<img src="그림주소">
자, 그림을 불러와 볼까요?
<img src="그림주소"> 태그는 그림을 불러오는 태그입니다.
앞서 배운, "그림주소"를 넣어주면 됩니다.
<소스>
<html>
<body>
<img src="그림주소">
</body>
</html>
그림주소 예제;
1.다음 로고
<img src="https://t1.daumcdn.net/daumtop_deco/icon/image.hanmail.net/hanmail/top/0303/logo2.gif">
2.네이버 로고
<img src="http://wstatic.naver.com/w3/lg.gif">
3.허자허자 배너
<img src="http://www.herjaherja.com/image/etc/banner_01.gif">
▒요약
그림 크기조절
그림을 불러 문서를 만들다가 그림이 너무 크거나 작아서 문제가 된적 없으세요? ^^
그림의 사이즈를 맘대로 조절할 수 있다면 이런 문제가 없겠죠?
자 사이즈를 내맘대로!
<img src="그림주소"> 그림불러오기 기본 태그안에
width="숫자" height="숫자" 를 끼어넣어, 숫자를 바꿔주면 됩니다.
<소스>
<html>
<body>
<img src="http://wstatic.naver.com/w3/lg.gif" width="105" height="25"><br>
<img src="http://wstatic.naver.com/w3/lg.gif" width="211" height="50"><br>
<img src="http://wstatic.naver.com/w3/lg.gif" width="422" height="100"><br>
</body>
</html>
▒요약
그림 위치조절, 그림과 글자 위치조절
1.그림 위치조절
그림을 왼쪽으로 오른쪽으로 혹은 가운데로....위치를 정하면,
페이지 타이틀로도 쓸 수 있고 심볼로 쓸 수 있고 참 좋겠죠?
<div align="위치"> </div>
태그를 사용하여
위치를 바꿔 정렬을 조절합니다.
위치 : align= left / right / center
left : 왼쪽으로 그림 정렬
right : 오른쪽으로 그림 정렬
center : 가운데로 그림 정렬
2.그림과 글자 위치조절
그림과 글자를 함께 쓸 때 그림과 글자의 정렬을 조절해보세요.
<img src="그림주소"> 그림불러오기 기본 태그안에 align="위치"를 끼어넣어
<img src="그림주소" align="위치">
태그를 사용하여
위치를 바꿔 정렬을 조절합니다.
위치 : align= top / middle / bottom / right / left
top : 그림 위에 글자를 위치
middle : 그림 중간에 글자를 위치
bottom : 그림 아래에 글자를 위치
right : 글자 오른쪽에 그림을 위치
left : 글자 왼쪽에 그림을 위치
■ 소스 ■
1.그림 위치조절<br>
<div align="left"><img src="http://wstatic.naver.com/w3/lg.gif"></div>
<br>
<div align="right"><img src="http://wstatic.naver.com/w3/lg.gif" ></div>
<br>
<div align="center"><img src="http://wstatic.naver.com/w3/lg.gif" ></div>
<br>
<br>
<br>
2.그림과 글자 위치조절<br>
<br><img src="http://www.herjaherja.com/image/etc/alignimg.jpg" align=top> 그림 위에 글자를 위치<br>
<br><img src="http://www.herjaherja.com/image/etc/alignimg.jpg" align=middle> 그림 중간에 글자를 위치<br>
<br><img src="http://www.herjaherja.com/image/etc/alignimg.jpg" align=bottom> 그림 아래에 글자를 위치<br>
<br><img src="http://www.herjaherja.com/image/etc/alignimg.jpg" align=right> 글자 오른쪽에 그림을 위치<br><br><br><br><br><br><br><br>
<br><img src="http://www.herjaherja.com/image/etc/alignimg.jpg" align=left> 글자 왼쪽에 그림을 위치<br>
▒요약
그림 테두리 만들기
1.그림 테두리
얇은 테두리~ 두꺼운 액자같은 테두리~ 그림에 테두리를 만들어보죠 ^^
<img src="그림주소"> 안에
border="숫자" 태그를 끼어넣어 그림의 테두리를 나타나게합니다.(숫자가 커질수록 굵기가 두꺼워집니다.)
<img src="그림주소" border="숫자">
2.그림테두리 색깔넣기
<img src="그림주소" border="숫자"> 안에
style="border-color:색깔" 태그를 끼어넣어 테두리의 색깔을 바꿉니다.(색상표에서 다양한 색상을 찾아, 넣어보세요)
<img src="그림주소" border="숫자" style="border-color:색깔">
■ 소스 ■
<html>
<body>
<font size=2>
<br><b>1.그림 테두리 조절</b>
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" border="5">
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" border="10">
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" border="30">
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" border="200">
<br><b>2.그림 테두리 색깔 조절</b>
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" border="30" style="border-color:#00FFFF">
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" border="30" style="border-color:#FFCE00">
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" border="30" style="border-color:#FF9CFF">
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" border="30" style="border-color:#F7941D">
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" border="30" style="border-color:#A67C52">
</font>
</body>
</html>
▒요약
그림 여백 만들기
그림 주위에 여백을 만듭니다.
그림과 글사이의 간격, 그림과 그림사이의 간격을 두어 깔끔한 편집을 해보아요
1.좌우 여백 만들기
<img src="그림주소"> 안에
hspace="숫자" 태그를 끼어넣어 그림의 양옆에 여백을 줍니다.(숫자가 커질수록 간격이 커집니다.)
<img src="그림주소" hspace="숫자">
2.상하 여백 만들기
<img src="그림주소" > 안에
vspace="숫자" 태그를 끼어넣어 그림의 위아래에 여백을 줍니다.(숫자가 커질수록 간격이 커집니다.)
<img src="그림주소" vspace="숫자">
■ 소스 ■
<html>
<body>
<font size=2>
<br><b>1.좌우 여백 조절</b>
<br>
<br>
영희야 놀자 철수야 놀자 바둑아 놀자
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" align=middle>
영희야 놀자 철수야 놀자 바둑아 놀자
<br>
<br>
영희야 놀자 철수야 놀자 바둑아 놀자
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" align=middle hspace="20">
영희야 놀자 철수야 놀자 바둑아 놀자
<br>
<br>
영희야 놀자 철수야 놀자 바둑아 놀자
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" align=middle hspace="80">
영희야 놀자 철수야 놀자 바둑아 놀자
<br>
<br>
<br><b>2.상하 여백 조절</b>
<br>
<br>
영희야 놀자 철수야 놀자 바둑아 놀자<br>
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" >
<br> 영희야 놀자 철수야 놀자 바둑아 놀자
<br>
<br>
<br>
<br>
<br>
영희야 놀자 철수야 놀자 바둑아 놀자<br>
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" vspace="20">
<br> 영희야 놀자 철수야 놀자 바둑아 놀자
<br>
<br>
<img src="http://www.herjaherja.com/image/etc/alignimg.jpg" vspace="80">
<br> 영희야 놀자 철수야 놀자 바둑아 놀자
<br>
</font>
</body>
</html>
'컴퓨터 즐기기 > 컴퓨터활용과 태그' 카테고리의 다른 글
| Table에 관하여 #2 ...... [2008/07/29] (0) | 2009.05.14 |
|---|---|
| Table 에관하여 1신 ...... [2008/07/09] (0) | 2009.05.10 |
| 만화로 배우는 태그④ - 문장, 문서 꾸미기 ......[2008/05/14] (0) | 2009.04.21 |
| 만화로 배우는 태그③ - 글자꾸미기 ..... [2008/04/26] (0) | 2009.04.11 |
| 만화로 배우는 태그② - 태그의 이해 ..... [2008/04/17] (0) | 2009.04.08 |