찬명님의 글에서도 알 수 있듯 IE6에서는 CSS multiple selector도 적용되지 않는데다가 child selector도 적용되지 않습니다. 아래와 같이 a와 b라는 ID를 갖는 디비전이 같은 클래스명을 갖는 하위요소를 포함하고 있다고 칩시다. <div id="a"> <div class="content">…</div> </div> <div id="b"> <div class="content">…</div> </div> 그런데 문제는 각각 다른 사람 – 혹은 같은 사람이더라도… – 이 작업한 a와 b가 부모, 자식간이 [...]

우리는 자신의 전자 시종에게 억압당하고 있다. 이 책을 우리의 해방을 위해 바친다. 사내의 동료들(웹 클라이언트 개발자들)과 Humane Interface (인간 중심 인터페이스)를 읽기 시작했습니다. 인간-기계 사이의 인터페이스는 무엇보다 인간이 사용하기 편해야한다.라고 이야기하는 이 책은 우리가 일상적으로 사용하고 있는 기계들에 대하여 알고 있는 불편한 점이나 혹은 익숙해져 불편한지 조차 모르는 것들을 끄집어내고 인간중심으로 바꾸어가는 방법과 그러기 위해 [...]

파이어폭스 3의 공개가 6월 17일로 확정되고 다운로드 수 기네스에 도전하고 있다. 주소 표시줄 자동완성 기능, 페이지 줌 기능 등 막강한 사용자 편의 기능으로 무장하고 있는 파이어폭스 3이지만, CSS 지원 향상은 사파리, 오페라와 비교해보았을 때 조금 부족한 느낌이 강하게 들었다. 그런데 파이어폭스 3.1은 그런 실망감을 꽤 삭혀줄 것 같다. 파이어폭스 3.1의 CSS 지원 2008년 안에 출시될 [...]

현 시대의 CSS로는 마크업의 무결성을 보장하면서 원하는 표현을 충분히 할 수 없다. 그 대표적인 예가 폰트와 배경이미지이다. 그 중에서도 폰트와 같은 경우는 기본 텍스트만으로는 원하는 결과물을 얻기가 힘들다. 이럴 때 우리가 가장 많이 사용하는 방식이 <img> 태그 혹은 이미지 대치법(Image Replacement)이다. 정보를 꾸며주기 위한 <img> 태그 <img> 태그는 사전적으로는 정보를 지닌 – 의미 있는 – [...]

지난 번에 Multiple Backgrounds에 대해 알아보았는데 이에 이어 오늘은 Web Fonts에 대해 써보겠습니다. Web Fonts 간략한 배경 웹 폰트는 상당히 오래된 기술입니다. 브라우저 전쟁 시절 IE와 넷스케이프가 각자의 독자적인 기술로 사용했고 IE에는 그 때의 웹 폰트가 아직도 남아있습니다. 그런 과정에서 MS는 웹 폰트에 대한 표준 제정을 제안했고 현재 CSS3의 한 부분이 되었습니다. 진행상황 오페라의 CTO인 [...]

CSS의 세로 중앙 정렬은 display: table-cell;이라는 간단한 방법으로 해결할 수 있습니다만, 글을 쓰는 현재 가장 많이 사용되는 브라우저인 IE가 이것을 지원하지 않기 때문에 항상 까다로운 문제였습니다. (IE8 – 베타 (8.0.6001) 버전 – 은 지원하는 것 같지만 아직 버그가 있는 듯 합니다.) 많은 꼼수가 있지만 사용에 많은 제약이 있었죠. 그런데 yomotsu라는 일본인이 간단하면서도 명쾌한 아이디어를 내놓았습니다. [...]

웹 퍼블리셔 일을 하면서 가장 짜증나고 마음 아픈 작업이 디자인을 위해 의미 없는 마크업을 넣는 것과 텍스트를 대체한 이미지를 자르고 <img> 태그를 붙이는 일입니다. 어느 웹 퍼블리셔든지 시맨틱한 마크업을 만들고 싶은 마음이 간절하지만 앞서 언급한 문제들로 인해 마크업은 복잡해지고 지저분해집니다. 이미 W3C는 이 문제를 해결할 표준을 만들었는데 그것이 Multiple Backgrounds와 Web Fonts입니다. Multiple Backgrounds 라운딩된 [...]

CSS Working Group의 블로그에 CSS의 박스 모델의 중앙 정렬 문제라는 글이 올랐습니다. Unfortunately, when we revised CSS level 2, we discovered that many browsers imposed a limit on what could be centered. In particular, centering something that was wider than its containing block didn’t work. The reason, probably, was that the browsers’ scrollbars were programmed [...]

지난 수요일 시작된 email standard project과 관련하여 국내 유명 웹메일 CSS 지원 테스트를 올렸었는데 그새 다음(daum)의 CSS 지원의 향상이 있었다. 지금 막 확인한 사항이지만 테스트 시 지원하지 않거나 불완전하였던 background-image와 list-type-image의 지원이 추가되었다. 메일 컨텐츠 중 어떤 태크나 ID 값에 “x-” 라는 prefix를 붙였었는데 그 대상을 크게 줄인 결과인 것 같다(확인한 바로는 meta 태그에만 붙이는 [...]

email standard project의 시작을 보고 생각난김에 우리나라 웹메일 업체들의 CSS 지원 정도를 저 곳과 같이 테스트 해보았다. 테스트는 Firefox 3 Beta 1에서 실시하였는데 야후 코리아의 웹메일은 이용 상 장애가 있어 Firefox 2.0.0.10을 사용하였다. 일단 스크린샷을 공개하고 테스트 결과에 대하여 정리하여 추후에 공개토록 하겠다. 관심 있는 이들과 함께 email standard project의 한국 분점을 만들어 보았으면 좋겠다는 [...]

자 이제 CSS를 입혀보자. 일단 전역설정이다. 이 작업은 브라우저마다의 차이를 극소화하고, 사용할 tag의 기본적인 속성을 부여하는 작업이다. 갖가지 태그의 padding과 margin을 0으로 지정! tag마다 기본적으로 padding과 margin값이 틀리다. 쉬운 디자인 작업을 위한 설정이기도 하다. 가로줄(hr tag)은 디자인에서 (대개) 불필요하므로 보이지 않도록 처리한다. hr tag를 생략할수도 있겠지만, 디자인이 배제된 페이지에서의 head, body, foot의 구분을 위한 용도로 [...]

자! 지난 글에서도 언급했듯 실제로 사이트에 있을만한 페이지를 한번 작성해보자! 일단 첫번째로는! 페이지의 재료가 필요하다. 로고라든지, 메뉴, 페이지의 내용, 카피라이트 등. 타이틀 멋져부러 뉴스 서브타이틀 div 레이아웃 첫번째 페이지! 메뉴 home 뉴스 방명록 링크 뉴스 박지성, 에인트호벤과 계약연장 합의 네덜란드 프로축구에서 활약하는 박지성(24.에인트호벤)이 소속팀에 3년 더 남을 전망이다. PSV 에인트호벤은 내년 시즌을 끝으로 계약이 만료되는 [...]

자! 이제 본격적인 공략…에 앞서 한가지만 더 짚고 넘어가자. 바로 html 문서의 형식을 결정하여 주는 DTD(Document Type Definitions)라는 녀석! W3C(World Wide Web Consortium)에서는 여러가지 버전별 html 표준 규약을 제공하고 있는데, DTD는 그 여러가지 버전중에 한가지 규약을 사용하겠다 하는 선언이다. 우리의 공략의 표준 규약으로 사용할 html의 버전은 XHTML 1.0으로 해당 DTD들은 XHTML1 DTDs에서 볼 수 있다. [...]

HTML 코딩, 우리는 여지껏 열심히 table tag(이하 table) 안에 또 table을, 또 table을 넣어가며 코딩을 해왔다. "td tag(이하 td)를 하나 안닫았다!" "table 10단 콤보에 들여쓰기를 하려니 온통 공백밖에 없다 OTL" 그렇게 table 중첩 코딩을 하면서 위와같은 문제를 많이 겪었으리라 싶다. 이제 저런 문제들을 좀 벗어나보자, 바로 div+css 레이아웃(이하 div 레이아웃)으로! 그냥 위와 같은 문제들만이라면 div [...]