그림 (속성, 크기, 정렬, 하이퍼링크, 그림테두리)

<TABLE cellSpacing=4 borderColorDark=white cellPadding=0 width=595 align=center borderColorLight=#cccccc> <TBODY> <TR> <TD width=589 bgColor=silver height=32> 그림 (속성, 크기, 정렬, 하이퍼링크, 그림테두리)</TD></TR> <TR> <TD width=589 bgColor=#f7f7f7 height=52> 자, 멋진 그림을 자신의 홈피에다 넣고 싶다면 그림 넣는 법을 알아야 겠습니다! 물론, 매우 쉽습니다. 이건 누구나 따라할 수 있습니다. 크기 뿐만 아니라 별거 별거를 다 할 수 있습니다.</TD></TR> <TR> <TD width=589></TD></TR> <TR> <TD width=589 height=369> <IMG height=208 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fa5_1.gif" width=286 border=1>   원하는 곳에 마우스 커서를 올려 놓습니다. 그리고 한번만 왼쪽 마우스로 클릭하면  커서가 글로 이동 하지요? 저는 맨 앞에다가 커서를 올려 놓겠습니다. 그 다음은 그 곳에 오른쪽 마우스를 클릭해 보세요. <IMG height=37 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fnumber%2F1.gif" width=36 align=absMiddle border=0> 그림넣기를 클릭하세요. 또는 <IMG height=22 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fnamoicon%2F1.gif" width=22 align=absMiddle border=1> 이것을 클릭하시면 됩니다. 요 밑에 처럼 나오지요? 자 그럼 차근 차근 하나부터 열까지 알아봅시다. 머리 좋은 사람은 벌써 알았겠지만...</TD></TR> <TR> <TD width=589 height=390> <IMG height=375 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fa5_2.gif" width=499 border=0></TD></TR> <TR> <TD align=middle width=589 height=4808> <IMG height=37 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fnumber%2F1.gif" width=36 align=absMiddle border=0>그림경로 (써있드시 그림 주소를 말합니다.) 위에 있는  그림파일이 있는위치를 알려줘야 컴퓨터가 알아서 작동을 하니까요. 그림 주소는 두가지로 나뉠 수 있지요. ① 하나는 http 로 쓰는 인터넷 상에서의 주소,  (ex. http://yoonmi.net/yoonmi.gif) ② 하나는 자신의 컴퓨터 내에 있는 그림 주소입니다. (ex. c:\내문서\홈페이지\yoonmi.gif) 그림 파일 이름은 될 수 있으면 한글 보단 영어 소문자로 하시는게 좋습니다. 윈도우 5.0 이상에서는 한글 파일을 불러 들이지 못하도록 설정해 논곳이 많습니다. 물론, 고쳐주면 되지만, 대부분 사람들은 아직 모르고 있거든요 ^^ 여기서 중요한 점! 꼭 기억해두세요. (만약, 자신의 컴퓨터 내에 있는 그림파일을 삽입 했을 경우, 홈페이지를 인터넷 상으로 올릴 때에 그림파일도 같이 올려줘야 합니다.) 당연한거지만 당연히 초보자들에겐 생소한 말일지도 몰라요. 자자 그러면 긴말 않고 그림파일을 한번 찾아서 삽입해 보도록 하죠. 왼쪽 폴더 파일 <IMG height=25 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fa6_1.gif" width=29 align=absMiddle border=0>을 선택해주세요. 그러면 열기 선택 상자라 맡에처럼 나오게 됩니다.   <IMG height=311 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fa6.GIF" width=509 border=1>   이게 그림파일을 찾아서 선택후 열기 버튼을 눌러주시면 되죠^^ 자, 그럼 다시 앞으로 돌아와 볼까요? 2번을 체크해보죠.   <IMG height=375 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fa5_2.gif" width=499 border=0>   <IMG height=37 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fnumber%2F2.gif" width=36 align=absMiddle border=0>그림 설명  이 강좌는 다른 페이지에 상세히 설명 되어있습니다. [<A href="http://yoonmi.net/zboard/study/namo_1/a_6_1.htm" target=_blank>그림 설명 강좌 페이지 바로가기 클릭</A>]   <IMG height=37 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fnumber%2F3.gif" width=36 align=absMiddle border=0> 크기. 그림경로를 적으면 자동적으로 너비와 높이가 설정됩니다. 그림파일 크기를 조절 마음대로 조절 할 수 있습니다.      너비/높이 비율 유지는 너비와 높이를 따로따로 맘데로 변경 하다보면     그림이 가로만 길어지고 이상하게 되는 경우를 대비해 비율을 유지하는 겁니다. 원래 크기로는 말 그대로 변경한 그림 크기를 원래대로 복구!   <IMG height=37 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fnumber%2F4.gif" width=36 align=absMiddle border=0> 정렬     그림을 정렬하는 방식에 대한 소개입니다.   <IMG height=166 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fa21_2.gif" width=328 border=1>   저렇게 10가지의 종류가 있습니다. 각가에 대한 설명은 아래에 있습니다. <TABLE cellSpacing=3 cellPadding=3 width=331> <TBODY> <TR> <TD width=319 bgColor=#ece9d8> ▶ 기본값</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> ▶ 위</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 align=top border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> ▶ 중간</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 align=middle border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> ▶ 기준선</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 align=baseline border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> ▶ 아래</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 align=bottom border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> ▶ 왼쪽</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 align=left border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> ▶ 오른쪽</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 align=right border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> ▶ 글자 위</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 align=textTop border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> ▶ 줄 중간</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 align=absMiddle border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> ▶ 중 아래</TD></TR> <TR> <TD width=319 bgColor=#ece9d8> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 align=absBottom border=0>징글벨 징글벨 징글벨울려 우리썰매 빨리달려 종소리 울릴까? 징글벨 징글벨 징글벨 울려 우리썰매 빨리달려 종소리 울려!! 아~~싸!</TD></TR></TBODY></TABLE> 자, 다시 그림 속성으로 돌아가서 마지막까지 배워봅시다!   <IMG height=375 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fa5_2.gif" width=499 border=0> <IMG height=37 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fnumber%2F5.gif" width=36 align=absMiddle border=0> 테두리 두께 테두리두께는 그림에 테두리 두께를 두른 다는 것을 말합니다. 여기서 주의할 것은 하이퍼링크가 걸린 그림에 테두리를 두르면.... 일반적으로 Css(문서스타일)을 변경하지 않으면 보라색으로 변한다는 것이지요. 우선 테두리가 둘린 그림과 안둘린 그림을 봅시다. 차이점을 확실히 알 수 있을 겁니다. <TABLE cellSpacing=3 cellPadding=3 width=400> <TBODY> <TR> <TD width=123 bgColor=#ece9d8 height=23> ▶ 테두리 두께 0</TD> <TD width=123 bgColor=#ece9d8 height=23> ▶ 테두리 두께 1</TD> <TD width=123 bgColor=#ece9d8 height=23> ▶ 테두리 두께 4</TD></TR> <TR> <TD width=123 bgColor=#ece9d8 height=130> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 border=0></TD> <TD width=123 bgColor=#ece9d8 height=130> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 border=1></TD> <TD width=123 bgColor=#ece9d8 height=130> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 border=4></TD></TR></TBODY></TABLE> <IMG height=37 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fnumber%2F6.gif" width=36 align=absMiddle border=0> 하이퍼링크 만들기 이 전 강좌중  하이퍼 링크 만들기 가 있었습니다. [<A href="http://yoonmi.net/zboard/study/namo_1/a_2.htm" target=_blank>하이퍼링크 만들기 바로가기 클릭</A>] 그림을 클릭시 다른 페이지로 이동 시키는 것을 말하지요. 하이퍼링크 만들기 클릭을 하면 아래와 같이 나옵니다. (나모웹에디터 FX 이상만 이렇게 나옴, 나모 5.0, 4.0 등은 아래와 다릅니다. 설정은 비슷하니 프로그램 지정명칭들을 이용하여 사용하시면 됩니다.) 주소창에 링크걸 주소들을 링크해주시면 됩니다. 예를 들어 http://yoonmi.net 이라고 했다면 그 그림을 클릭할시에 yoonmi.net 으로 이동하겠죠. 아래 그림 둘은 예제 입니다. 오른쪽 그림이 하이퍼 링크가 yoonmi.net 으로 되어있습니다.(새창으로뜸) 저기서 책갈피와 대상프레임 등의 설명은 타겟종류 강의에서 설명합니다. [<A href="http://yoonmi.net/zboard/study/namo_1/b_11.htm" target=_blank>하이퍼 링크 타겟(대상프레임) 종류 알기 바로가기 클릭]</A> <TABLE cellSpacing=3 cellPadding=3 width=429> <TBODY> <TR> <TD width=208 bgColor=#ece9d8 height=23> ▶ 그림에 하이퍼링크 안 걸린것</TD> <TD width=200 bgColor=#ece9d8 height=23> ▶ 그림에 하이퍼링크 걸린것</TD></TR> <TR> <TD width=208 bgColor=#ece9d8 height=130> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 border=0></TD> <TD width=200 bgColor=#ece9d8 height=130> <A href="http://yoonmi.net/" target=_blank> <IMG height=104 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fdoticon%2F1.gif" width=80 border=0></A></TD></TR></TBODY></TABLE>   ** 보너스 팁 ** 간혹가다 강좌 중에 제가 그림을 선택한다~ ㄹ는 뜻이 있습니다. 개체를 클릭한다라는 뜻인데요. 그림파일을 나모웹에디터 편집상태에서 선택하게 되면 아래처럼 됩니다. <TABLE cellSpacing=0 cellPadding=0 width=336 align=center> <TBODY> <TR> <TD width=123 height=46> <TABLE borderColor=#f7cfe3 cellSpacing=0 borderColorDark=#f7cfe3 width=116 align=center borderColorLight=#f7cfe3 border=1> <TBODY> <TR> <TD width=110 height=40> <A href="mailto:sdvfsdv?subject=dvdvd"> <IMG height=30 alt=set07_email_whitebg.gif src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fset07_email_whitebg.gif" width=110 border=0></A></TD></TR></TBODY></TABLE></TD> <TD width=73 height=46> <IMG height=26 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fanired12_next.gif" width=29 border=0></TD> <TD width=140 height=46> <TABLE borderColor=#f7cfe3 cellSpacing=0 borderColorDark=#f7cfe3 width=132 align=center borderColorLight=#f7cfe3 border=1> <TBODY> <TR> <TD width=126 height=43> <IMG height=35 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fyoonmi.net%2Fzboard%2Fstudy%2Fnamo_1%2Fimages%2Fa7_1.gif" width=113 border=0></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>