이미지 넣기

 

안녕하세요 오늘은 이미지에관하여 알아 보겠습니다   1. <★img src=" 그림 주소"><★img src= 란 옆 주소의 그림을 여기에 나타내어라는 명령입니다   먼저 그림 가져 오는 법을 알아야 겠죠     이그림에 마우스를 가져가시고 마우스 오른쪽 버튼 을 클릭 합니다 창이 뜨면서 아래의 그림과 같은것이 보입니까?     제일 밑에 속성 (컴에 따라 등록 정보(R)로 나올수도 있습니다) 을 마우스 왼쪽 버튼 으로 다시 눌러 보세요 아래의 그림과 같이 중간 부분에     여기에서 주소 부분의 http://mysesang.com/buty/img/fantasia.jpg 을 드래그 해서 복사 하세요 그다음 <★img src=라고 타이핑 한후에"복사한 주소"를 붙이세요 끝에는 > 이괄호 빼먹지 마시고 다음 해상도라고 보이지죠. 이게 그림의 크기 입니다 400은 width 고 248 이 height 이죠 다시 주소 옆에다 크기를 넣어봅니다 <★img src="복사한 주소" width=400 height=248> 완성된 모양이 <★img src="http://mysesang.com/buty/img/fantasia.jpg" width=400 height=248> 이렇게 되었어요? 이걸 연습장에 저장하면 그림이 나옵니다. 실제로 한번 해보세요 참고; 드래그 복사 붙여 넣기에 대한 설명 복사 하고자 하는 부분에 마우스를 대고 왼쪽 버튼 누른채로 쭉 끌어 당기면 바탕색이 변하면서 블록이 설정 됩니다.이블록 위에서 마우스 오른족 버튼 누르면 창이 뜨죠. 그창에 복사를 누르면 됩니다. 다음 넣고자하는곳에 마우스 클릭한다음 다시 마우스 오른쪽 버튼을 클릭하면 붙여 넣기가 나와요. 이붙여넣기 클릭하면 조금전 복사 했던글이 붙여 집니다. 모르시는분은 컴할줄 아는 애들에게 물어보던지 그것도 안되면 주소를 하나 하나 타이핑 하는 수밖에 없어요^^

예제보기 <★img src="http://mysesang.com/buty/img/fantasia.jpg" width=400 height=248> 이렇게 하면 밑의 그림이 나옵니다

결과보기     인터넷 상의 모든 그림은 고유의 주소가 있읍니다. 이주소가 없으면 우리는 그림을 볼수가 없죠. 바꾸어 말하면 개인의 컴에 저장된 그림은 인터넷에 저장된 경로를 적어봐야 아무도 볼수 없읍니다. 그건 인터넷상의 주소가 아니기 때문이죠. 단지 첨부 파일로만 올릴수 있읍니다

이제 인터넷상의 모든 그림은 여러분의 것입니다. 갖고싶은 그림은 등록 정보보고 <★img src="주소">하여 연습장에 보관 하면 영원히 나의것이 되죠. 수십만장의 모든 그림이...^^ 신나지 않아요? 그럼 width 와 height 는 왜 필요한지 알아 보겠읍니다 일반적으로 그냥 주소만 넣어도 그림은 원래 크기로 나옵니다. width height 는 그림을 확대할대나 축소할때 필요한것입니다 2. 확대및 축소    width="원하는 크기의 픽셀수"    height="원하는 크기의 픽셀수"

1.5 배로 키워 볼까요 width와 height를 각각 1.5배의 수로 넣어 보세요 <★ img src="http://mysesang.com/buty/img/fantasia.jpg" width=600 height=356> 이렇게 하면 밑의 그림이 나옵니다

결과보기     화면이 좀 흐리죠. 크게 확대하면화면이 흐려 집니다. 그래서 많이 확대는 못하죠.

여러가지로 축소를 해보죠 넓이와 높이를width=265 height=164 로 줄입니다 <★ img src="http://mysesang.com/buty/img/fantasia.jpg" width=265 height=164> 이렇게 하면     이렇게 되죠 넓이와 높이를width=200 height=124 로 줄입니다 <★ img src="http://mysesang.com/buty/img/fantasia.jpg" width=200 height=124> 이렇게 하면 밑의 그림이 나옵니다     더줄여 보죠 넓이와 높이를width=100 height=62 로 줄입니다 <★ img src="http://mysesang.com/buty/img/fantasia.jpg" width=100 height=62> 이렇게 하면     이렇게 작게 나오죠 그림의 테두리도 넣어 볼까요. table에서 배운 border을 넣으면 되지요 <★img src="http://mysesang.com/buty/img/fantasia.jpg" width=200 height=124 border=3>   예쁜 테두리가 보이시죠 테두리를 더 넓게 넣어 봅시다 <★img src="http://mysesang.com/buty/img/fantasia.jpg" width=200 height=124 border=30>     마음데로 한번 바꿔 볼까요 넓이와 높이를width=150 height=250 으로 바꿔 봤어요 <★ img src="http://mysesang.com/buty/img/fantasia.jpg" width=150 height=250>   어??? 키가 커졌네요. 키가 작으신분은이렇게 하면 되죠^^ 이렇게 width 와 height의 수치를 바꾸면 여러분의 마음데로 그림을 확대하거나 축소할수도 있고 모양까지 바꿀수있어요 그림이 좀 평범해요, 그럼 특수 효과도 넣어보죠 style="filter:alpha(opacity=100, style=2, finishopacity=0)" 를 넣어보면 어떻게 될까요 <★img src="http://mysesang.com/buty/img/fantasia.jpg"style="filter:alpha(opacity=100, style=2, finishopacity=0)">이렇게 하여 결과를 봅시다 결과 보기     좀더 멋있나요^^? 그럼 다음까지 안녕히... 추신 혹시 메모장이 잘 안되는분이 계시나요? 메모장의 메뉴중에 보기가 없는 컴도 있어요. 컴이 좀 구형이면 메모장에 보기가 없습니다. 그런분은 이렇게 하세요. 지금 여기에다 마우스를 대시고 마우스 오른쪽 버튼을 클릭해보세요. 메뉴창이 뜰겁니다. 컴을 장시간 사용하였거나 모뎀을 사용하시는분은 메뉴창이 한참 있어야 뜨요. 잘 안뜨면 왼쪽 마우스 클릭한다음 다시 오른쪽 마우스 클릭하고 기다리세요. 메뉴창이 보입니까? 중간쯤 보면소스보기(V)라고 있어요. 이걸 클릭해보세요 그럼 이글의원본이 보입니다.메모장이죠. 여러분들이 작성한 메모장도 이렇게 해서 소스를 볼수 있어요. 다시 말하면 메뉴의 소스보기를 선택한것과 같은 결과가 나옵니다. 메뉴에 보기가 있어도 이렇게 마우스 오른쪽 버튼을 이용하면 훨씬 빠르고 편리하게 소스보기를 할수있죠. 이소스 보기에서 다시 문서 작성하여 파일의 저장을 선택 하시면 됩니다.

                              가져온 글입니다. <글을 제공하여 주신분 고맙습니다>

                              주소에서 별표<★>는 빼고서 합니다.

 

                           흐르는 곡 ---맑은 새소리와 평온한 멜로디_♬