WEBPI's Markup && Css Developer

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 는 기본태그값설정,..

이 버그는 border-collapse에 관한 버그인듯한데요 ------- 모질라 포럼 질문 내용---------------------------------- 111 1111 IE에서는 제대로 나오는데 FF3에서는 border-collapse를 먹은 table은 상단의 2px을 잡아 먹어버립니다. 즉 위치가 -2px이 되어버리더군요 FF3은 안써서 몰랐는데 아는분의 도움요청으로 테스트를 해본결과 이러한 버그가 발생했습니다. 해결방법은 table에 display: block;를 주는걸로 해결을 하셨다고 했는데 영찜찜해서요 --------------------------------------------------------------------- 해당 스크린샷입니다. 서정민's Website출처 : http..

IE6 : CSS Multi ‘id/class’ Bug IE6에서 발생하는 ‘다중 선택자 버그‘ 입니다. 하나의 아이디와 여러개의 클래스를 교차 조합하여 선택자를 만드는 경우 IE6는 첫 번째 선택자의 조합(#bold.red)만을 유효하게 처리하고 나머지 선택자 조합을 무시하는 버그 입니다. CSS #bold.red { font-weight:bold; color:red; } #bold.green { font-weight:bold; color:green; } /* IE6는 이 스타일을 처리하지 않음 */ #bold.blue { font-weight:bold; color:blue; } /* IE6는 이 스타일을 처리하지 않음 */ HTML #bold.red #bold.green #bold.blue Expec..

IE6에서 발생하는 ‘더블 마진 플롯 버그‘ 입니다. float된 요소에 float된 방향과 동일한 방향의 margin을 설정하는 경우 margin값이 두 배로 작용하는 버그 입니다. 이 버그는 float된 방향과 같은 방향으로 형제 엘리먼트가 존재하는 경우에는 발생하지 않습니다. CSS .a { float:left; height:100px; background:silver; padding:10px;} .b { float:left; margin-left:100px; width:100px; height:100px; background:red; } /* IE6는 왼쪽 마진을 200px으로 출력 */ HTML .b Expected Result ‘.b’ 요소의 왼쪽으로 100px의 margin이 발생한다. .b..

UI 개발자가 ‘웹 표준’ 방식으로 전환하게 되면 으레 ‘브라우저 호환성’까지 확보하는 작업을 병행하게 됩니다. 정해진 표준 명세에 따라서 코드를 작성하는 것은 쉬우나 ‘브라우저 호환성’을 확보하는 일은 그 반대로 정말 고된 작업입니다. 저는 여기서 적지않은 오해가 발생한다고 생각합니다. ‘웹 표준은 더 많은 자원을 필요로 한다’ 라고 말하는 거죠. 저는 이것이 ‘브라우저 호환성 유지 작업은 더 많은 자원을 필요로 한다’ 라는 사실의 잘못된 표현이라고 생각합니다. ‘웹 표준’과 ‘브라우저 호환성’은 서로 다른 개념인데 이 두 개념을 아무 구분없이 뭉뚱그려 사용함으로서 웹 표준에 대한 그릇된 인식이 형성되었다고 생각합니다. 웹 사이트를 개발함에 있어 ‘브라우저 호환성’은 목표이고 ‘웹 표준’은 방법론 입니..

체크박스

1. display block Element 를 정렬할때 display: inline; 이나 float를 사용한다고 알고계시는 퍼블리셔들이 몇명이있다. 하지만 display경우에는 말그대로 디스플레이될 상태를 설정하는것이다. 즉 ! inline 레벨로 할것이냐 block레벨로 할것이냐 아니면 숨길것이냐를 설정하는것이다. 예전에 어딘가에서 display: inline; 과 float:left;를 같은 용도로 정렬로 사용하는데 차이점을 묻는 글을 본적이 있다. block을 inline으로 하면 자연스럽게 인라인의 특징인 left정렬이 되는것이 당연하다. 예를 들어 span도 inline요소이다 이녀석을 aaaaaa 당연히 left정렬이 된다. 하지만 block요소들은 float로 설정하지않은이상은 떨어져서 ..

개체가 표현되는가를 반환하거나 설정한다. Script object.style.display=[sVal] HTML CSS cssSelector {display:sVal;} 인수 cssSelector : (스타일 선택자) display 속성을 가질수 있는 엘레멘트( ELEMENT)나 클라스(class) 이름 혹은 인식자(id)이다. sVal : (속성 문자열) display 스타일 속성은 개체가 표현되는가를 나타내는 문자열이다. block 개체가 블럭엘레멘트로 표현된다. none 개체가 디스플레이되지 않는다. inline 디폴트이며, 개체가 내용의 크기에따라 인라인 엘레멘트로 표현된다. inline-block 개체가 인라인으로 표현되지만, 개체의 내용은 블럭 엘레멘트로 표현된다. 인접 인라인 엘레멘트는 간격..

http://www.mezzoblue.com/zengarden/alldesigns/