후니와 함께 만드는 CSS Reference

pt, px, em, % 비교표

웹디자인을 하면서 글꼴(폰트) 크기를 표현하는 방법에는 pt, px, em, % 가 있다. 나는 이미지 사용이나 기존 테이블 레이아웃을 할 때의 습관으로 px 를 주로 사용하는 편이다. 하지만 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있다. REEDdesign 사이트에 이들 수치에 대한 비교표가 있다.

CSS 포지셔닝 예제

CSS만으로 롤오버 이미지 만들기라는 지난 글에서 CSS의 Opacity(불투명도) 속성을 이용하여 롤오버 이미지를 만들었다. Opacity 속성은 IE, FF, NN의 3대 브라우저에서 제공하는 속성으로 W3C의 CSS2 기준에 없는, 즉 비표준 스타일 요소이다. 브라우저가 제대로 표현해주는 것에서 만족한다면 Opacity 는 훌륭한 CSS 속성이다. 하지만 웹표준에 관심이 있거나 이를 지키려 노력한다면, CSS 포지셔닝을 이용해서 Opacity를 표현할 수 있다. [...]

Planning Structural HTML

웹페이지를 볼 때, 가장 먼저 눈에 들어오는 것은 디자인이다. 물론 내용이 중요하지 않다는 것이 아니다. 다만 TV시청과 달리 사용자의 능동성을 요구하는 웹서핑에서, 전세계 수천만의 웹페이지 중에서 디자인적 관점에서 첫인상이 중요하다는 것이다. 때문에 웹페이지를 제작하는 사람들은 먼저 보여지는 것들, 이미지, 사진, 배경이미지, 색상, 여백, 배치, 글씨크기, 아이콘 등에 촛점을 맞추어 작업을 시작하게 된다. 하지만, 이런 작업 과정은 [...]

CSS Reboot에 참여하다.

CSS Reboot 프로젝트에 참여하게 됐다. 이 프로젝트는 2005년 5월 1일까지 웹디자이너나 웹개발자가 자신의 사이트를 CSS와 웹표준을 기반으로 자신의 홈페이지를 Reboot하자는 프로젝트로써 2003년을 제외하고 2000년부터 2005년까지 꾸준히 진행되었다. 내가 북마킹한 해외 유명 웹디자이너들의 대부분이 참여했지만, 불행히도 현재까지 참여한 한국인은 나혼자다. 나는 The May 1st Reboot와 같은 Full Flash Site에 대해서는 못마땅하게 생각하는 편이다. XHTML + CSS기반의 웹사이트에 [...]

800×600 해상도 모니터가 아직도?

미국에서 웹과 관련된 강의를 해주는 사이트인 W3Schools에서 접속통계를 확인해보니, 흥미로운 사실을 알 수 있다. 2005년 1월 기준으로 무려 29%의 방문자들이 해상도 800×600인 모니터를 통해서 W3School에 접근했다는 통계를 볼 수 있다. 브라우저 통계자료 상단에는 1024×768픽셀의 해상도가 유행이라고 설명하고 있지만, 하단에는 웹 개발자들에게 아직도 많은 사람들이 800×600픽셀의 해상도를 사용하고 있음을 다시 한번 알려주고 있다. 이 통계자료를 보면서 [...]

CSS의 한계는 없는가?

물론 있다. 엄청 많다. 특히 IE의 표준을 무시하는 처사때문에 더더욱 많게 느껴질 것이다. FF에서는 이미 지원하고 있는 CSS2의:after, :before, contents 요소라도 IE가 제대로 지원한다면 CSS 웹디자인은 훨씬 자유로워질 것이다. 현재 논의 중인 CSS3에서는 멀티 백그라운드 이미지도 지원한다고 한다. 상상만으로도 즐거울 뿐이다. 아무래도 몇년 뒤에는 지금보다 웹디자인이 훨씬 편해질 것 같다. 델리셔스(del.icio.us)를 통해서 How to Create a Photographic [...]

Dynamic Korea 서브메뉴 때려잡기

지난 자랑스런 대한민국~이라는 글에서 밝혔듯이 Dynaimc Korea의 홍보활동을 위하여 30억의 예산을 사용했다고 한다. (그 돈의 1/10만 있어도 세상 편하게 살아갈 수 있을텐데… 쩝) 하지만 Dynamic Korea 홈페이지의 경우, 굳이 HTML Validator를 사용하지 않고 소스보기만 하더라도 복잡하게 뒤엉킨 table 태그들과 쓸데없이 남용되고 심지어 문법까지 틀린 Javascript 를 사용함을 알 수 있다. 이는 웹페이지 로딩시간을 증가시키며, 웹브라우저-접근성 [...]

WP 테마 파헤치기1 - 파일구조

워드프레스 한글언어팩에 기본 테마는 이미 곰님의 수정으로 사용하는데 무리가 없지만, 해외에서 제작된 250여개가 넘는 워드프레스 테마를 만끽하기 위해선 테마 파일의 수정이 반드시 필요하다. 코덱스에 워드프레스의 테마를 구성하는 파일들을 간단하게 설명하고 있지만, 내 나름대로, 테터툴의 스킨과 비교하여 조금은 구체적으로 파헤처 볼 생각이다. 기본적으로 워드프레스에서 반드시 필요한 파일은 기본 템플릿 파일인 index.php 이다. 테터툴과 마찬가지로 index.php 파일 하나만으로도 [...]

테터툴로 떠나지 마요~

몇몇 블로거들이 흥미반관심반으로 워드프레스를 설치하지만, 꾸준히 사용하지 못하고 다시 테터툴로 옮기는 현상이 있다. 마치 몇달 전에 국내 많은 네티즌들이 파이어폭스를 설치했다가 곧 익스플러로 되돌아간 현상과 같다. 자신만의 디자인과 스타일을 찾고자 하는 설치형 블로거들에게 외관적으로 볼때 워드프레스 기본 테마는 단순하게 생겼음에도 불구하고 무려 16개 파일들(이미지 파일 제외)로 구성되어있다. 이는 단 3개의 파일로 구성된 테터툴보다 [...]

비공식 워드프레스 KOREA 포럼 탄생

블러그코리아의 올라온 새 글들을 확인하던 중에 워드프레스(Wordpress) 비공식 포럼 오픈 이라는 글을 볼 수 있었다. 네이버에서 총 10만명 이상이 방문한 블로그를 운영중인 그림동화님이 phpBB 로 포럼을 만들었다. 내 눈엔 방문자수만 보였다. 그림동화님의 글에 의하면, 워드프레스나 무버블 타입에 관한 정보를 한 곳에서 볼수 있는 한국어로 된 사이트가 있었으면 좋겠다는 생각을 했습니다. 그래서 충동적으로 관련 도메인을 구입하고 phpbb를 [...]

 
Be Friend~! 웹 접근성 향상 캠페인