이미지 크기 조절하기

아래 이미지를 보십시요.  크지요?

배경을 줄여봅니다. 반으로 줄여보자구요

이것을 background width="300" height="224"로 줄여보겠습니다.

이렇게 줄었습니다
에게게? 그림은 전부사라지고 볼품이 없네요.
원래 이미지를 줄이거나 늘이면은 오른쪽과 밑에부터 줄어듭니다.
왼쪽 상단끝이 기본점, 0이기때문입니다. 왜거기가 기본점이냐고요?
설명하자면 저나 배우는사람도 골이 아픔니다
그냥 그러러니 하고 넘어가자고요. 
단 왼쪽 상단이 X와Y점이 시작되는 점이라는거는 확실히 알아두자고요.
앞으로 무엇을 배우든지 많이 나옵니다. 갑자기 X와Y가 왜나오냐고요?
글쎄 골치 아프다고요...
약속을 그렇게 한것으로 아시고요, 다음으로 넘어가자고요.
레이어...이럴때 쓰이는것이 레이어 태그입니다.
포토?이나 후레쉬를 접한분은 생소한 단어가 아닙니다.
어?? 태그에도 레이러가 있나? 하실겁니다.
허지만 접하지 못한분은 그냥 그런게 있구나 하고 넘어가자고요.
한마디로 레이어를 설명하자면 만화영화를 만들때 여러개의 
그림을 연속적으로 보여집니다.
그때 한장의그림 이라고 생각하시면 됩니다.
바로 이것을 응용하는겁입니다.
background 는 img 를 사용해서 그대로 줄이고 올라오는 글을 레이어로 만드는것이지요.
백문이 불여일견...  보는것이 빠르겠군요.

어때요?? 이미지는 원하는대로 줄어들었죠? 그러면서 내가 쓰고싶은 글들은 이렇게 잘 올라가고있죠? 이게 바로 레이어를 이용해 이미지를 마음대로 줄일수 있는거지요..

자 설명으로 들어가자고요.
아래 소스를 잘보세요.
(table width="300" height="227" bgcolor="#000000" cellpadding="0" cellspacing="0" border="10")
(tr)
(td)
(marquee direction="up"scrollamount="1.0" scrolldelay="100"
id="layer1" style="position:absolute; z-index:0; margin-left:50;")
(span style="font:bold 12px/150%; color:white; FILTER:shadow(color=#660000, Direction=135); height:100px;")
어때요??

이미지는 원하는대로

줄어들었죠/

그러면서

내가 쓰고싶은

글들은

이렇게

잘 올라가고있죠?

이게 바로

레이어를 이용해

이미지를

마음대로

줄일수 있는거지요..

(/span)(/marquee)
(font color=#000000)(img src="http://www.dkbnews.com/img/2004/07/dkb020news.jpg" width="300" height="227")(/font)
(/td)(/tr)(/table)

(background="url")이안보이죠?
그리고 밑에(img=" url)이 추가되었죠?
바로 (background="url")

대신파란글씨의 레이러를 삽입하면 됩니다. 
z-index:0은 기본수치 입니다. 
margin-left:50; 은 왼쪽에서 글이 50px 만큼 떨어지라는 뜻이고요.
연습해서 응용해 보세요.
그리고 이미지 줄이는 수치는 적당히 맞추셔야 합니다.
자이제 적은 이미지를 크게 늘여 봅시다.
 





수치가 width="400" height="300"인 이미지 입니다.

이것을 background width="550" height="413"으로 늘여보겠습니다.






보시는 바와같이 엉망진창이죠. 이럴때도 레이어를 쓰는것입니다.

줄일때와 마찬가지로 레이어소스를 삽입하고 이미지를 늘려주면 됩니다.


소스보기 입니다..


(table width="550" height="413" bgcolor="#000000" 
  cellpadding="0" cellspacing="0" border="10") 
  (tr)
  (td)
  (marquee direction="up" scrollamount="1.0" scrolldelay="100" 
id="layer1" style="position:absolute; z-index:1; margin:120 0 0 80;") 
  (span style="font:bold 12px/150%; color:white; FILTER:shadow(color=#660000, 
  Direction=135); height:100px;")

  어때요??


  이미지는 원하는대로


  늘어났죠?

 

  그러면서


  내가 쓰고싶은


  글들은


  이렇게 


  잘 올라가고있죠?

 

 이게 바로


  레이어를 이용해


  이미지를 


  마음대로 


  늘이고 줄일수 있는거지요.. 

  (/span)(/marquee)

  (img src="http://www.dkbnews.com/img/2004/07/dkb020news.jpg" 
  width="550" height="413") 

  (/td)(/tr)(/table) 


여기서는 설명할께없고요, 있다면은 margin:120 0 0 80 이건데요. 

위에 이미지 줄일때 쓰인 margin-left:50 과는다르죠?

약간 명령을 다르게 준겁니다,

120은 글의 세로의 위치를 지정해준거구요.(숫자를 고쳐 실행해보세요)

80은 글의 가로의 위치를 지정해 준겁니다. 가운데 0 은 별의미가 없는것 같아요.

여하튼 글의 위치를 내가 조정해 준다는 것만 아시면 됩니다


소스예제 결과 입니다


어때요??
이미지는 원하는대로
늘어났죠?

그러면서
내가 쓰고싶은
글들은
이렇게 
잘 올라가고있죠?

이게 바로
레이어를 이용해
이미지를 
마음대로 
늘일수 있는거지요.. 






원본의 사이즈와 비교해보세요.  상당히 커졌죠.


일반적인 방법으로 background 를 사용하면 배경 그림의 사이즈를 변경하지 못하지만
이렇게 이미지의 속성과 레이어를 이용하면 배경그림을 마음대로 제어 할수 있습니다.

한가지 주의 하실점은 
작은 이미지를 크게 하실때는 너무 크게 하면 이미지가 깨어 집니다.


여러분들께 행운이 함께 하시길 기원하면서.....^^*