분류 전체보기229 CSS 링크스타일 롤오버 CSS 롤오버 옛날 부터 잘알려진 롤오버효과 링크에 마우스를 가져갔을떄 변화이다.텍스트와배경색을 이용한 간단한것부터 이미지를 이용하는 것까지 알아보자 텍스트 와 배경색이용 롤오버는 마우스를 올렸을때다 따라서 당연히a:hover이사용된다.먼저 간단한예로 텍스트와 배경이미지 변화를보자 a{ background:#fcc; color:#0f0;} a:hover{background:#0F0; color:#fcc;} 위그림과 같이 마우스에 올렸을떄 변화이다 배경이미지이용 a:link, a:visited{ display:block; width:140px; heigth:30px; /*이미지크기에 맞추기위해 가로세로 지정*/ background: url(image.gif) no- reapeat 0 0;} a:hover{.. 2009. 9. 6. CSS 링크 유형별 스타일 지정(css3) CSS 링크 유형별 스타일 지정 유형별 스타일 지정에 대한 설명은 속성선택자(포스팅참고)가 사용되는 만큼 IE6등 몇몇 브라우저에 적용안된다. 명심하고 보자 유형별로 스타일을 지정해준다 이말은 각각 링크가 나올때마다 변경하기 귀찮으니 유사한 경우 이렇게 해라고 처리해주는것이다.아래예를보자 #example a{ background:url(test.gif) } 이와같은 것을 여러번 변경하기 귀찮다. 클래스로 지정해서 비슷한경우를 처리해줘도 되지만 이것도 일일이 클래스 부여라는 문제가있다. 속성선택자를 이용해보자 a[href^="http:"]{ background:url(test.gif) }/*일반적으로 http:로 시작하는 외부링크일때 배경이미지를 test.gif로 잡아준다.*/ a[href^="http:/.. 2009. 9. 6. CSS 링크 스타일 기초 CSS 링크 스타일 링크 효과(?) 는 홈페이지를 한번이라도 접해본 분이라면 알거라고 본다. 한창 나모나 기타 고전 유틸리티 쓰던시절에 CSS를 쓰지않았더라도 링크만은 거의 들어갔으니까. 일단 간단한 예제부터 보자 a:link{ text-decoration:none; color:#f33;}/*방문하지 않았을때 */ a:visited{text-decoration:none;color:#f33;}/*방문했을떄*/ a:hover{text-decoration:none;color:#c00;}/*마우스가 위로 올라갔을떄*/ a:active{text-decoration:none;color:#c00;}/*링크가 화성화 즉 클릭했을떄*/ 위의 CSS는 한번쯤은 봐왔을 것이다. 정확히 말하면 유사 클래스(:link, :vi.. 2009. 9. 6. CSS 브라우저에 따른 이미지 선택 !important CSS 브라우저에 따른 이미지 선택 익스플로어(IE6)에서는 알파값의 png-24가지원되지않는다 이에 따른 해결 방법으로 일단 적용되는 브라우저는 png파일로 아니면 gif로 하는방법이다. 이떄 사용하는것이 !important 예시는다음과 같다. #test{ background: url(주소/mask.png) !important; background: url(주소/mask.gif); 2009. 9. 5. IE6.x PNG-24 투명값 해결 익스플로어6(IE6)에서 PNG-24 투명값 해결하기 iepngfix 출처http://www.twinhelix.com/css/iepngfix/ 일단 위에서 다운받고 아래순서대로 하자 1.파일 iepngfix.htc 과 blank.gif 를 폴더에 넣는다 2.주의할 점으로는 위의 폴더를 반드시 기억할것 그위치에 따라 iepngfix.htc파일을 열어 경로를 수정해줘야 한다 ex) var blankImg = '/images/blank.gif'; 3.사용방법은 다음과같다 간단해서 좋지만 역시문제점...몇몇 부분에서 포지션이 지정안되고 z-index사용이 불가능하다. DD_belatedPNG 출처DD_belatedPNG 1.출처에서 다운로드 2.DD_belatedPNG.js를 적당한 폴더에 넣는다 3. 아래태그.. 2009. 9. 5. 플래시10과 sIFR 문제 현재 플래시10의 사용으로 sIFR 2.07 번전은 플래시cs4에서 편집이 불가능한것으로 보인다. 파일을 열면 unexpected file format으로 뜬다 다른버전을 이용할 것을 권한다. 2009. 9. 5. CSS 이미지 대채 sIFR sIFR (Scalable Inman Flash Replacement) flash, script, html, css를 사용하여 사용자의 PC에서 설치 되어있지 않은 디자인 폰트를 웹상에 출력 시킬수 있는 기법을 말합니다. 현재 sIFR은 2.0.7 까지 release된 상태이고 네이버 모두의 블로그를 비롯하여 많은 사이트에서 관련 기법을 사용중입니다. http://www.mikeindustries.com/blog/sifr/ 사용예 : http://section.blog.naver.com/sub/PostListByDirectory.nhn?option.directoryAlias=movie sIFR의 장점 sIFR 은 특정 태그와 class 이름을 기준으로 적용이 가능하며 시스템 폰트에서 제공하지 않는 디자인.. 2009. 9. 4. CSS 이미지 대치 기법 이미지 대치(image replacement) html에서 명확성을 위해서 가능한 이미지대신에 텍스트를 사용하는것이좋다.하지만 웹디자인너들이 선택할수 있는 폰트의 제약이 있고 css를 사용해서 특정스타일만 지정할 수 있기에 텍스트만으로 처리하기에 불가능한 경우가 있다. 로고를 보여준다던지..할때 그 예를 들수있다. 이를위해 이미지를 넣는 대신에 이미지대치기법을 사용한다. 호고를 단순히 이미지만으로 넣을경우 검색엔진에 텍스트는 무시될 수 있다. 따라서 텍스트는 검색되고 원하고자하는 이미지를 넣을때 사용되는것이 이방법이다.그방법들을 보자 FIR 방법 토드 파너가 만든 FIR(Fahrner Image Replacement) 방법이다. 이미지 대치 h2{ background: url(image.gif) no-r.. 2009. 9. 4. CSS 배경이미지 배경이미지 지정 배경이미지지정은 아주쉽다 예제를 보자 body{ background: url(image.gif); } 위의 CSS는 배경을 image.gif 파일로 지정한경우이다. 이외 상세히 지정할때 속성값들을 자세히보면 다음과 같다 url() 백그라운드로 잡을 이미지이름,위치 #FFF 색깔 repeat 그림의 반복 배치, repeat-x(가로보 그림을 반복배치), repeat-y(세로로 그림 반복배치), no-repeat(박복없이배치) 배치한 그림의 위치 left,centerright.... 적용된예를보자 #id{ background:transparent url(http://cfs.tistory.com/www/resource/images/login_bg.gif) repeat scroll 0 0 } 티.. 2009. 9. 4. jQuery 알아보는 간단한 예제 jQuery 맛보기 일반적인 자바스크립트 방법,그리고 분리된 모습,jQuery소스를 보면서 비교해보자 일반적으로 내부에 포함된 스크립트 클릭하면 사라짐 클릭하면 사라짐 클릭하면 사라짐 이와같은 방법은 초창기 자바스크립트가 사용되고 마구남발되었을떄 사용되던것이며(물론지금도 어쩔수 없이 사용되기도하지만) 스크립트와 html의 뒤섞여 많이 사용이반복되고 다른 코드들이있다면 혼란스러워진다 이제 분리한예제를보자 스크립트와 html분리 클릭하면 사라짐 클릭하면 사라짐 클릭하면 사라짐 분리는되었으나 onload속성을 추가하여 바인딩되는시점을 지정했다.하지만 onload시점은 모든 소스들이 load되는 시점으로 이렇게 할경우 시간이 지연될 수 있다. jQuery 클릭하면 사라짐 클릭하면 사라짐 클릭하면 사라짐 무척단순.. 2009. 9. 3. 이전 1 ··· 16 17 18 19 20 21 22 23 다음
