WEBPI's Markup && Css Developer

css파일의 용량이 클경우 압축해주는 사이트이다 물론 원본은 보관을 잘 해놓도록... 드림위버가 있다면 소스 포메팅 적용으로 풀 수 있다~ http://www.csscompressor.com/

css3에 좋은 기능들이 추가되는군요 자세한 내용은 쏭군님 블로그로~ http://monoeyes.com/438

.ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } ps : 태그가 적용되지 않는다. 파이어폭스에서 지원하지 않는다. 파이어폭스 적용방법 : http://kais.tistory.com/96

/***** Selector Hacks ******/ /* IE 6 and below */ * html #uno { color: red } /* IE 7 and below */ *:first-child+html #dos { color: red } /* IE 7 and modern browsers */ html>body #tres { color: red } /* All IE versions, including IE8 Standards Mode */ #somediv { color: blue\9 } /* IE8 Standards-Mode */ #comediv { color /*\**/: blue\9 } /* Modern browsers (not IE 7) */ html>/**/body #cuatro { col..

reset.css를 사용하자. CSS의 단축shorthand표기법을 사용하자. 아이디와 클래스의 차이점을 알자. li태그를 활용하자. table은 잊고 div를 사용하자. CSS 디버깅툴을 활용하자. 불필요한 CSS선택자를 사용하지는 않았는지 살펴보자. !important를 바로 알자. 이미지 대치기법을 알자. CSS 포지셔닝을 이해하자. @import와 의 차이점을 알자. CSS로 폼을 디자인하자. 영감을 얻자. CSS로 라운드 코너를 만들어보자. 명료한 CSS코드를 유지하자. px과 em의 차이점을 알자. 브라우저간 CSS 호환성표를 확인하자. CSS로 레이아웃 잡기. 무료 CSS 에디터를 받자. 미디어타입을 이해하자. 1. reset.css를 사용하자. 인터넷 익스플로러나 파이어폭스와 같이 브라우저..

input[type="text"] { width:150px; height:18px; } 라디오나 체크에는 적용되지 않는다 but!!! 두둥... ie6은 씹힌다. 병맛 ie6... ie6은 따로 지정을 해줘야 한다 눈물좀 닦고 ㅜㅜ

썸네일 이미지를 가로 세로로 배열해 놓고, 마우스 오버시 이미지 테두리를 생성시켜주는 롤오버 효과를 한 두번쯤은 적용해 보았을 것이다. 많은 경우 기본 이미지와 롤오버 이미지(테두리 생성 이미지) 두개를 별도로 제작하여 스크립트로 처리하는 경우를 볼 수 있는데, 조금만 더 고민을 해 보면 CSS만을 이요해서 간단히 구현해 볼 수 있다. HTML Markup: view plaincopy to clipboardprint? Default CSS: view plaincopy to clipboardprint? /* Init */ ul { margin: 0; padding: 0; list-style: none; } ul li a { border: 0; } ul li a img { border: 0; } ul li,..

SS로 Layout을 잡을 때 inline element 사이에 block element를 넣고 싶을 때가 있습니다.하지만 div같은 block element를 사이에 넣는다면 새로 줄바꿈이 되어 element들이 포지셔닝하게 됩니다.기본적으로 inline element가 block element를 포함할 수 도 없습니다.그럴 때 inline-block display 속성을 사용한다면 원하는 방식으로 동작시킬 수 있을 것입니다.inline-block 속성은 매우 유용한 속성임에도 불구하고 자주 사용되지 않고 있습니다.IE7/FF2 등의 몇몇 브라우저에서 inline-block 속성이 구현되어 있지 않기 때문이죠.하지만 핵을 사용해서 구현하는 방법이 있네요. 아래는 관련 글입니다. http://blog.m..

ie6에서 png를 배경으로 쓸때 링크 클릭이 되지 않는 버그가 있습니다 해결법은 a태그에 position:relative를 주면 됩니다 단 배경이 되는 엘리먼트가 레이아웃을 가져야 하며 position이 absolute일경우 감싸는 div를 하나더 만들어 relative를 줘야 합니다~

이전에 IE6용 스타핵을 *html 로 사용을 했었는데 이건 css 벨리데이션에 걸리죠 어느날 * html 식으로 띄우고 사용을 하니까 걸리지 않더군요 정확한 이유는 모르겠네요 대부분은 띄워서 사용을 해놨던데 왜 이걸 이제야 알았는지...