WEBPI's Markup && Css Developer

/***** 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 박스에는 여러가지가 있습니다. (라디오,체크박스,텍스트박스등) 여기에서 라디오 박스와 체크박스는 IE와 타브라우저에서 외곽여백의 차이가 있습니다. 이런경우를 잘모르는 웹디자이너 같은 경우 무조건 자기디자인 데로 해달라고 요구하곤하죠.. 그것도 익스에만 맞춰달라면서...참피곤한 경우죠. 물론 디자이너 입장에서는 그게 정답이고, 퍼블리셔 입장에서 맞춰주는것도 해야할일중에 하나일수는 있습니다. 그래서 협업이 중요한거 같습니다. 여튼 이럴때 해결방법입니다. 먼저 소스를 살펴보겠습니다. 테스트 위와 같은 소스를 출력하면 다음과 같습니다. 익스와 파폭,사파리는 기본적으로 4px 이라는 외곽여백이 존재하며, 오페라는 3px 여백이 있었습니다. 세로여백은 top 라인에서 익스는 2px, 파폭과 사파리는 3p..

이 글은 서버사이드 개발자님들께서 웹퍼블리셔로부터 받은 HTML문서를 작업하는데 있어서 최소한으로 알아주셨으면 하는 내용을 정리한 것입니다. 일부분 상세히 적지 않고(버전별 요소와 속성의 사용 유무 등) 최대한 쉽게 작성하는데 목적을 두었기 때문에 실 작업시에는 웹퍼블리셔와의 커뮤니케이션과 좀 더 정확한 스펙 문서를 참고해 주시기를 부탁드리겠습니다. 웹표준화와 관련하여 웹퍼블리셔는 정확한 Doctype 선언으로부터 마크업을 시작한다. 그리고그리고 올바른 마크업(well-formed) 검증(validate)으로 작업을 마치게 된다. 하지만 많은 경우 사이트가 오픈했을오픈했을 때 validate를 통과가 어렵다. 이는 서버사이드 개발자들이 웹퍼블리셔로부터 받은 (X)HTML(X)HTML 문서를 수정(개발을 ..

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