해당 포스팅은 http://cocosoft.kr/367 - 블로그 이미지 로딩 빠르게하기(페이지속도) CSS Sprite Image 2016.02.28 00:10 by COCOSOFT COCO Media
에서 더자세히 확인 가능합니다. 이내용은 오래전 내용입니다.
마우스 오버 효과를 통해 블로그 및 웹사이트의 메인화면 및 로고, 메뉴, 카테고리 버튼 등 쉽게 적용할수 있는 방법을 알아보겠습니다.이미지를 마우스 오버 효과를 주는 방법에는 두가지가 있습니다.
첫번째 방법은, 두개의 이미지를 사용하는 방법으로써, 마우스 오버시 다른이미지를 불러와서 보여주는 방법입니다. 이방법은 이미지를 불러오는데 걸리는 시간차가 생겨버리기 때문에 이강좌에서는 두번째 방법을 통해서 마우스오버효과를 주는 것을 배워보겠습니다.
1. 이미지 만들기.
이미지를 만들때 중요한 점은 기본표시될 지점과 마우스를 올렸을때 표실될 이미지의 가로 길이가 동일해야합니다.!! 달라도 영역설정을 통해 맞출수있지만, 정확하게 수정작업에 시간이 들므로, 동일하게 만들어줍니다.
파일을 저장한후 html/css 파일 업로드를 해줍니다. 저는 파일명을 mlogo.gif 로 저장해주었습니다.
2. style.css 편집하기.
블로그 관리- html/css편집에서 style.css 부분을 편집해줍니다. header 주석을 검색해서 있으면 그곳에 붙혀 넣기 해주시면되고 굳히 모르겠다면 젤윗쪽에 붙혀넣기 해주면 됩니다.
자신이 원하는 주석명을 통일시켜주면됩니다. 저는 mlogo로 지정했으면 동일하게 설정하겠습니다.
css편집.txt3. html 편집에서 원하는 부분에 이미지 집어넣기.
css편집이 끝났으면 이제 원하는 곳에 이미지를 붙혀넣기를 해줍니다. 위 소스를 원하는 곳에 붙혀넣기 해주시면 이미지가 나타나게 됩니다.
onclick="window.open(this.href) 는 새창에 주소를 여는것입니다.
현재창에 주소를 열려면 target="_self" 로 바꾸어 주시면 됩니다.
4. 완성 이미지.
위와같은 마우스 오버 효과 내기 위해선 html/css를 편집해야하지만 매우 간단하고 천천히 따라한다면 누구나 쉽게 효과를 낼수있습니다. 위강좌는 티스토리 블로그를 대상으로 하였습니다.
