RSS icon

CSS 의 개발과 브라우저 현황

이제겨우 브라우저들이 CSS2 와 2.1 을 조금씩 신경써서 지켜가고 있는 가운데 몇몇 브라우저들에서는 몇가지 CSS3 를 해석하고 있습니다. 제생각에는 WebKit 이 가장만이 지원하는거 같더군요. 꽤 오래되긴 했지만 (신기하게 아무도 언급을 안하는) Multi Column 은 불여우에서 1.5버전부터 지원되고 있는 기능이 있구요, 이미 오래전에 CSS2, CSS2.1 에 권고되어 나온 선택자들, first-child, adjacent, attribute, and child selectors 등도 IE 도 지원한다고 발표가 됬습니다.

Multi Column 다단계 피라미드가 아닌 다단락기능
MULTI COLUMN 이야기 해 보겠습니다. CSS3 권고안으로써 인쇄물에서 쉽게 볼수 있는 단락기능입니다. 글이 나뉘는 것이죠. 단, 현재 불여우에서만 지원이 되고 있습니다. 사용은 다음과 같습니다.

호스팅에서 6월29일 새벽 서버점검

일모리네를 호스팅 해주시고 있는 8con 에서 6월29일 0시부터 6시까지 서버점검이 있습니다. 수요일 저녁11시 59분이 지나면 섭점검이 이루어지게 되겠네요. 미리 알려드립니다. …

새창띄우기 접근성 넘버투

예전에 새창띄우기에 관한 포스팅을 올렸을때 많은 분들이 다양한 의견을 남겨 주셨었습니다. 못읽어보셨다면 꼭 여러의견을 읽어보시고 다른 생각들 나누어 주시면 감사하겠습니다.

사용자의 측면에서 사용자에게 선택권이 주어지기 위해선 target=”_blank” 가 없어져야 하는데, 반대를 보면 선택권의 자유때문에 새창을 선호 하는 이들에게 불편함이 올수 있습니다. 물론 자유와 불편함의 선택이라면 자유이지만 불편함 또한 해소할수 있다면 더 좋겠죠. 유저에게 최대한 선택권을 주는한에서 여러 이득을 얻을수 있는 방법이라고 생각합니다.

2006년에도 붉은악마의 외침

오늘있었던 2006 독일 월드컵 G조 3번째 경기 한국과 프랑스전. 애국가 후에 들려오는 아리랑부터 시작하여 마지막 심판의 휘슬이 울릴 때까지 붉은악마들은 내 심장을 …

웹표준의 오해 토론 #2

제 이전글에 이어 버즈삼구님께서 긴 포스팅으로 덧글을 다시 남기셔서 짧은 덧글로는 힘들거 같네요. ^^;;
(대한민국 토고를 이겼으니 프랑스도 잡기를 기원하며… 불가능 이겠지만서도. 공은 둥근데다 이번엔 가장둥근 공이니.. ^^)

현석님께서 지적하셨지만 일단 첫 인용부터 약간은 변역을 잘못하신거 같아서 제가 다시하겠습니다.
Using markup improperly — not according to specification — hinders accessibility. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup rather than structural markup to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices (refer to the description of difference between content, structure, and presentation).

즉, 테이블 레이아웃은 디자인의 쉽고 어려움과는 전혀 상관없이 프로그램에서 데이터를 알기가 힘들고, PC 이외의 다른 기기에서 렌더(HTML을 실제 이미지로 변환하는 것)의 어려움이 있다는 것입니다. 즉, 코드의 확장성을 염두에 둔 가이드라인이라는 것입니다. XHTML로 디자인을 하면 코드 변경없이 모바일에서도 서비스가 된다고 생각하면 쉽습니다. Google은 모바일용 웹사이트에서 XHTML을 지원하고 있습니다.

번역하자면 이렇습니다.
“마크업을 상황에 맞게 해라 - 스펙에 꼭 맞추어서 하는것이 아닌 - 접근성을 떨어뜨린다. (왜냐면) 보여주기 위한 (presentation effect) 마크업을 할때엔 (테이블로 레이아웃을 짜는것) 특별히 제작된 소프트웨어로(예로 스크린리더) 웹서핑을 하는 이들에게 불편함을 줄수 있기 때문이다. 더 나아가서 Structural(구조적인) 마크업 보다 ‘보여주는 마크업’ 으로 구조할때에 타 기기들과 호환성이 떨어지기 때문이다.”

덧글의 질을 높이자

몇가지 변화된 부분들이 있습니다. 일단 덧글에 대한 토론을 내어놓은 후에 꾸준히 고민중입니다. 여러 의견들도 있었구요, 아무튼 이에대한 하나의 결과입니다. 덧글을 달때에 본문을 쉽게 인용할수 있는기능, 이전 덧글을 쉽게 인용할수 있는 기능들을 즉각 이곳에 적용시켜 놓았습니다.

이미지 메뉴를 더 가치있게

W3C 에서 권고하는 디자인(프레젠테이션)과 문서(컨텐츠)의 분리는 많은 이득을 가지고 옵니다. 물론 반론도 있지만요 ^^;; 분리로 인해 디자인은 더욱 자유로울수 있으며 훨신 높은 유연성을 가질수 있게됩니다. 문서 또한 문서대로 의미에 맞는 태그안에 분류하여 의미를 부여하고 문서에 충실할수 잇는 효과를 불러올수 있습니다. 지난번 CSS 옷벗는날(css naked day) 에 각자의 블로그 스타일시트를 꺼 놓아서 문서와 디자인의 분리를 명확히 보여주었던 일도 있었죠. 하지만 이러한 장점들 앞에도 장애물이 있습니다. 이미지가 대부분 사용되는 메뉴 혹은 네비게이션 부분입니다.

문제는 이렇습니다. 이미지로 텍스트를 대체하면 접근성에 문제가 되니 이미지를 포기해야 하고 텍스트를 쓰자니 글꼴이 받쳐주질 않아 이러지 저러지도 못하고 메뉴 이미지에 title 넣는 정도로 만족을 하는 경우가 많습니다. 혹은 이미지 맵을 사용하는 경우도 많구요. 이런 애매한 경우를 간단한 CSS 로 손을 보면 접근성에 어긋나지 않도록 어느정도 커버가 가능하니 한번 살펴보겠습니다. 예제는 제 블로그 메뉴를 보아도 되고 맨밑에 링크를 첨부해 놓았습니다.

웹표준의 오해 토론

이정환님의 정리를 버즈삼구님께서 반론하신다고 적으신 일부 부분을 발췌했습니다.

웹표준을 지켜야 하는 이유는 여러가지 브라우져에 제대로 혹은 잘 보이게 하는 가장 편리한 방법이기 때문이지 그 이상도 아닙니다. 그리고, 테이블도 엄연한 표준이지만, 레이아웃을 테이블로 잡는 것은 웹표준이 아니라는 말은 어패가 있습니다.

실제 CSS를 이용한 레이아웃은 테이블에 비해서 수정이 쉽다고 하지만, 아주 간단한 레이아웃이 아닌 약간만 복잡한 레이아웃을 CSS만으로 적용하려 하면 테이블에 비해서 아주 많은 노력이 있어야 합니다. 테이블이 매우 직관적인데 비해서 CSS는 코드 자체만으로 디자인이 머리에 그려지질 않기 때문에 수정이 쉽지도 않습니다. 또한, 테이블에 비해서 CSS는 브라우져마다 약간씩 적용되는 바가 틀리기 때문에(padding이나 margin 등) CSS 핵이라는 전혀 필요없는 코드가 들어가야 합니다.

긴글중 아주 짧은 두 문단이지만 여러가지 사실이 아닌 부분들이 많아 키보드를 잡았습니다. 덧글로 달기엔 많을꺼 같았습니다.

블로그, 1% 가 부족하다

6월9일이 이고 해서 코멘트 부분의 디자인도 고치고 사이드바 부분에 있는 최근 코멘트들도 내용을 보여주는 형식으로 바꾸었습니다. 대충대충 만들어 놓았던 부분들을 조금은 신경을 써서 건드려 보았네요. 그리고 고치는 겸에 코멘트 부분에 Ajax 를써서 코멘트를 submit 하자마자 출력되도록 하려 했는데 약간 시간이 걸리길래 다음에 하려고 미루어 놓았습니다.

음.. 블로그에서는 네트워킹이 생명이라고들 합니다. 중추를 맡고 있는것이 FEED 부분도 있겠지만 코멘트와 트랙백또한 중요한 부분을 담당합니다. 서로가 덧글로 의견을 나누며 포스팅의 풍부함을 채워주죠. 가끔은 포스팅보다는 덧글에서 더 많은 정보를 얻기도 합니다. 하지만 이러한 멋진 기능에도 불구하고 포럼이라는 툴에서 이루어지는 깊은 나눔이 있기에는 1%가 부족한듯 보입니다. 이 1%가 채워진다면 정말 더할나위 없는 툴일텐데 말입니다.

잘못된 한글표기 나이키 셔츠

이번에 뉴욕에 잠시 다녀왔습니다. 뉴욕 5번가에 생긴 새로운 애플스토어도 보고 MoMa(Museum of Modern Art) 도 가보고 즐거운 시간을 보냈습니다. 애플매장이 유리로 되어있어서 그 작은 공간에 얼마나 들어갈까 했더니만 지하에 상점이 있더군요. 유리로된 정사각형 조형안으로 들어가면 유리로된 계단이 있어서 지하에 커다란 매장을 연결합니다. 사람들이 꽉꽉 차있더군요. 모든 최신 상품들을 둘러보며 침을 흘리고 왔습니다. 맥북프로!! ㅡㅜ

(사진참 뭐하게 나왔네요 ㅡㅡ;; 클릭해 보세요. 뒤 유리로된 정육면체건물이 애플상점입니다)

Page 1 of 212»