WEBPI's Markup && Css Developer

.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 식으로 띄우고 사용을 하니까 걸리지 않더군요 정확한 이유는 모르겠네요 대부분은 띄워서 사용을 해놨던데 왜 이걸 이제야 알았는지...

Alen Grakalic이 자신이 가장 많이 사용하는 Class 이름 10개(My Top 10 Most Used CSS Class Names)를 소개하고 있습니다. Class 이름은 요소(Element)가 어떻게 보이든지 어느 자리에 위치하는지보다위치하는지보다 무엇으로 표현되는지(어떤 의미로 사용되는지)가 중요하다는 것을 강조하면서 자신의 Class 이름들이 도움이도움이 되기를 바란다고 쓰고 있습니다. class="fixedfixed " 자신의 모든 스타일 스트에서 사용되고 있고, 요소요소 안에 요소가 간격이 벌어지는 버그를 해결하기 위해 사용한다고 합니다. class="alt" (대체텍스트로 오해될 수 있는데) Alen Grakalic은 특정한 방법으로 스타일된 그룹그룹 요소들 중 차이를 가지는 요소를..

CSS 를 쓰는데에 대한 절대적인 방법은 없습니다. 그리고 그것이 문제가 되는것도 아닙니다. 하지만 그래도 어떠한 일관된 방식으로나 어떠한 규칙을 정해서 쓴다면 한마디로 구조적인 CSS 를 쓸수 있다면 여러모로 플러스가 되지 않을까 생각이 듭니다. 예전에 후니님께서도 이러한 고민을 하셨듯이 내가 만들지 않은 CSS를 수정하는 것이 생각보다 쉽지 않다. 머랄까.. Xhtml는 공개된 원론적인 부분에 따라 구조화되어 가는 것에 비해서 CSS는 개발자의 개성을 많이 따르는 것 같다. -후니 꽤나 많은 스타일로, 입맛에 맞는대로, 적혀지는게 css 이겠지만 이 안에서 조금이나마 개선된 방법을 사용하면 좋겠다 싶어서 나누고자 합니다. 첫번째 전체적인 틀을 잡기 일단 커다란 그림을 보면, css 는 기본태그값설정,..