demun(대문블로그)

퍼블리셔/css2011. 2. 21. 06:00

이미지를 처리하는 기법으로는 여러가지 방법이 있는데 하나 하나 짚어보겠습니다. 우선 저장할때 처리하는 방법을 먼지 짚어보겠습니다. 이미지는 용량문제로 .gif 파일을 주로 이용합니다. 이미지 파일을 크기를 떠나서 선명도가 좋기로는 아래와 같습니다. .gif < .jpg < .png 하지만 선명도가 좋으면 좋을수록 용량이 커지는 단점이 있지요. 그래서 .gif 파일을 많이 이용합니다. 또 한가지 투명한 PNG 파일은 ie6 에서 배경이 회색으로 보인다는 단점이 있습니다. 이또한 해결하는 방법으로는 자바스크립트를 이용하곤 합니다. 마찬가지로 투명한 PNG 파일이 ie6 에서 배경이 회색으로 보이는것을 방지하기위해 자바스크립트를 포함하면 그만큼 무거워지는것은 당연한 일이지요. 참고링크 IE6 에서 투명배경을 ..

퍼블리셔/css2011. 2. 21. 06:00

조각난 이미지를 병합된 하나의 이미지로 만드는것이 Image Sprite라고 했습니다. 마찬가지로 hover 효과를 다른 이미지가 필요한데요. 이것도 같이 병합해서 하나의 이미지 안에 넣고 사용하는겁니다. 전에 이야기한 타이틀 부분에 대해서 이야기 하겠습니다. 이전글을 안보신분은 보시고 이걸 보시면 더욱 좋습니다. 같은 예제를 사용합니다. =>http://demun.tistory.com/1896 너비가 730이고 높이가 100 인 이미지가 있다고 가정합니다. 우선 html 코드부터 보시죠. [#\#_title_##] css 설정은 아래와 같습니다. #title h1 a{ width:730px; height:100px; background:url(images/button.png) no-repeat 0 0;..

퍼블리셔/css2011. 2. 21. 06:00

이미지를 처리하는 방법의 결론은 좀더 빠르고 , 가벼운 이미지를 사용하는것입니다. 거기에 접근하는데에 무리가 없어야 한다는 점이죠. 또한 .png 확장자를 이용할때는 ie 6 때문에 투명배경을 사용하지않고 배경색을 입혀서 사용합니다. 배경색을 사용하지 않았을때 ie6 에서 보여지는 것을 예제로 보겠습니다. 아래 이미지중 위의것은 이미지를 만들때 배경색을 입혀서 만든것이고 , 아래것은 배경을 투명하게 해서 만든것입니다. 그리고 ie 6 으로 본것입니다. 물론 다른 브라우져는 똑같이 보여집니다. 이는 많이 사용하는 둥근 버튼의 경우에도 적용됩니다. 한가지 예로 제 블로그에 사용되는 이미지에는 모두 배경색이 적용된다음 그 위에 이미지가 그려진 것입니다. 위의 3자가 만들어진 것을 포토샵으로 보시면 도움이 되실..