재미있는 이미지 태그.....

페이지 정보

김재원 작성일05-01-16 22:41 조회1,763회 댓글4건

본문

재미있는 이미지 태그

인터넷에 접속하면서 게시판에 글을 올리면서 사진올리는것이 태그중에 제일먼저 사용하고 가장 재미있고 쉬운것이 바로 이미지태그 이지요.그런데 이미지 태그도 여러 종류가 있어요. 중고등학교시절에 수학을 잘 하기위해서 수학공식을 외워 두지 않겠습니까?이 이미지 태그도 공식을 알아두시면 참 편리하고 재미있습니다. 바로아래의 첫번째 것이 제일 많이 사용하는 이미지 태그인데요 공식은 이렇습니다.

<img src= http://kjw8396.com.ne.kr/image/model.jpg>

붉은색이 바로 사진이 저장되어 있는 사진 주소입니다.이 붉은색을 지우고 다른 사진주소를 넣으면 이미지 태그가 됩니다.

그런데 이 사진 주소를 어떻게 아느냐 이것 아니겠습니까? 이렇게 합니다.아래의 사진위에다가 지금 마우스를 올려놓고 마우스 오른쪽 버튼을 누르면 적은 창이 한개 뜹니다.그창 맨 아래줄에 보면 "속성" 아니면 "등록정보"이렇게 된 글씨를 마우스 왼쪽버튼으로 클릭하면 방금 떴던 창은 사라지고 새로운 창이 왼쪽위로 다시 뜨면서 세번째 줄에 보면 "주소(URL)" 이렇게 있고 옆으로 http://kjw8396.com.ne.kr/image/model.jpg 이렇게 된것을 마우스 왼쪽 버튼으로 jpg 옆에 g 자 부터 꾹 눌러서 http 의 h 자 까지 긁으면 검게 됩니다.이것을 드래그라 해요.그다음 검게된 글자위에 다시 마우스를 올려놓고 마우스 우측 버튼을 클릭하면 조그마한 창이 뜨면서 거기에 "복사"라고 된부분을 마우스 좌측으로 클릭하면 검게된 영문 사진 주소가 복사가 됩니다.그러면 글올리려는 게시판으로 와서 게시판 글쓰기를 하고 또 거기 게시판에 보면 "일반텍스트" "HTML"이렇게 되어있어요.HTML로 해놓고 위의 이미지 태그 공식의 <img src=사진주소>이렇게 하면 사진이 뜹니다. 붙여넣기 하는것은 하시죠? img src=여기다가 클릭하고 마우스 우측을 클릭하면 적은 창이 뜹니다.거기 창에 붙여넣기를 크릭하면 주소가 쏙 들어갑니다.참 재미있어요.

원본 이미지 가로 width=250 세로 height=290

다음은 사진 크기 조절하는 방법입니다. 이미지 태그 공식....

<img src=http://kjw8396.com.ne.kr/image/model.jpg width=550 height=250>

사진주소 jpg 옆에다 한칸 띄우고 width=숫자 height=숫자 이렇게 정해주면 마음대로 사진이 옆으로나 위로나 정사각형 직사각형 큰사진 적게 적은사진 적게 취향대로 마른사람 살찌게 살찐사람 마르게 재미있게 됩니다.

가로늘리고 세로줄인 이미지 가로 width=550 세로 height=250

<img src=http://kjw8396.com.ne.kr/image/model.jpg width=550 height=250>

이미지 태그에서 <꺽쇠괄호 하는것 잊어버리면 않되지요>

가로늘리고 세로줄인 이미지 가로 width=750 세로 height=250

<img src=http://kjw8396.com.ne.kr/image/model.jpg width=750 height=250>

가로늘리고 세로줄인 이미지 가로 width=900 세로 height=150

<img src=http://kjw8396.com.ne.kr/image/model.jpg width=900 height=150>

width=250 height=650 width=150 height=650 width=100 height=650

좌측; <img src=http://kjw8396.com.ne.kr/image/model.jpg width=250 height=650>

중간;<img src=http://kjw8396.com.ne.kr/image/model.jpg width=150 height=650>

우측;<img src=http://kjw8396.com.ne.kr/image/model.jpg width=100 height=650>

이미지 태그 하이퍼링크

하이퍼링크 이미지태그.....

위의 것은 적은 사진을 클릭하면 큰사진이 나타나는것인데 이것 역시 사진주소 한개만 하면 이렇게 신기한 것을 만들수 있어요. 역시 인터넷 사진올려진곳에 가서 사진위에다 마우스 올려놓고 아까처럼 마우스 우측 클릭하여.... 속성 - 주소(URL) - 마우스 좌측으로 사진주소 드래그 - 마우스로 복사 - 게시판에 와서 HTML로 하고 이미지 공식쓰고 ... 공식은 아래의 소스....

아래의 소스에다 붉은 부분을 지우고 사진주소 붙여넣고 올리면 위에처럼 아름다운 이미지 태그가 됩니다.

<A href="http://kjw8396.com.ne.kr/image/kjw2.jpg">

<IMG src="http://kjw8396.com.ne.kr/image/kjw2.jpg" width=120 height=80></A>

여기 보시면 사진 주소가 똑 같지요. 역시 붉은색 영문주소만 지우고 사용하시면 공식이 됩니다.

배경그림 띄우고 다시 그위에 이미지 넣기.....

위의 것은 배경그림을 띄우고 다시 그위에 그림을 또 얹어서 띄우는 아주 멎진 이미지 태그 입니다. 이런것은 이렇게 합니다.

</td></tr>

</table>

</P>

붉은 부분은 사진주소이고요 청색은 사진 사이즈입니다. 그리고 <P align=center> 분홍색 부분에 이곳의 center를 left로 바꾸면 사진이 좌측으로 오고 right로 바꾸면 사진은 오른쪽으로 옵니다.

이제 준비된것을 게시판에 한번 올려볼까요.우리게시판에는 태그가 아니더라도 이미지 올리는 기능을 이용하여 사진을 올릴수도 있습니다만,그렇게 하면 게시판에 직접 파일이 올라가게 되어 게시판 용량을 많이 차지하게 되어 홈페이지 용량을 차지하게 됩니다.

이미지 태그를 사용하여 사진을 올리면 용량을 거의 먹지않게 됩니다.

우선 태그 소스를 복사를 하시는데, 마우스로 복사를 하시지 마시고 컴퓨터 자판기로 복사를 하셔야 합니다. 자판기의 Ctrl+A 로 하시거나 복사할 부분을 마우스로 검게 드래그해 놓고 Ctrl+C 하면 복사가 됩니다.그다음 게시판 글쓰기를 열고 게시판 상단의 붉은색으로 그려놓은 HTML은 만지지 마시고 상단 우측에서 4번째 조그마하게 HTML 이라 써놓고 체크된곳 파란색으로 그려놓은 곳을 클릭합니다.

그러면 소스 편집판이 뜨지요 소스 편집판내에 <BODY> 와 </BODY>사이의 파란색으로 체크된 부분을 마우스로 클릭해놓고 컴퓨터 자판기의 Ctrl+V 하면 붙여넣기가 되어 방금 복사해온 소스가 모두 들어갑니다.

검은색 부분이 붙여넣기 하여 들어간 태그소스입니다.그러면 아래의 확인을 클릭하연 이미지 태그가 실행하여 뜨는것이 보입니다.

이렇게 실행된것이 보이면 상단이 비밀번호를 쓰고 이름쓰고 우측아래의 작성완료를 하면 글이 올라갑니다. 제가 오랫만에 처음 들어와서 이것을 몰라서 아무리 마우스로 복사하여 붙여넣기를 하여도 않되서 우리게시판에는 HTML이 올라가지 않는것으로 오해를 하였습니다. 반드시 자판기로 복사하고 붙여넣기를 하여야 합니다.그리고 상단 좌측의 HTML이라 쓰여진곳은 아무런 기능을 하지 않습니다. 반드시 우측에서 4번째 HTML 을 사용하여야 합니다.

댓글목록

김재원님의 댓글

	김재원
	작성일 05-01-16 22:43

겨울이면 눈이 오지 않기로 소문난 포항에서도 오늘 폭설로 많은 눈이 내려 교통이 두절되었습니다.종친님들 눈피해가 없으시도록 바라겠습니다.

김윤식님의 댓글

	김윤식
	작성일 05-01-17 00:12

대부님, 잘 배웠습니다. 감사합니다.
고양시에도 밤새 눈이 조금 내렸습니다.
폭설 피해 없으시길 빕니다.

솔내님의 댓글

	솔내
	작성일 05-01-17 17:14

이 훌륭한 솜씨를 크게 써 먹을 때가 와야 할텐데요... 대단하십니다.

김정중님의 댓글

	김정중
	작성일 05-01-18 05:19

포항 눈 소식 그리고 희한한 사진 변형 방법! 반갑습니다

열린마당