우리는 옛부터 전해지는 타이포그래피의 금언에서부터 시작해야 할 것이다. 단락에서 가장 읽기 좋은 라인의 길이는 ‘알파벳 한 세타 길이의 하나 반’이다. 이것은 최대의 가독성을 위해서 문단의 각 라인은 약 문자 40개 정도의 길이가 되어야 함을 의미한다. 이것이 어떻게 유동적 페이지라는 우리의 목표와 상응될 수 있을까? 만일 우리가 화면을 가득 채우도록 디자인된 페이지를 만든다면 라인 길이를 제어할 [...]

아무도 자신의 웹이 다른 사람의 화면에서 어떻게 보여질지 예측할 수 없다. 그렇다. 이 말은 진실이다. 여러분이 다른 메체의 디자인에서는 아무리 많은 제어권을 갖고 있었다 하더라도, 웹에서 성공하기를 바란다면 당신은 그 중 몇 가지를 포기해야만 한다. 출판물 디자인과 비교해보자. 전통적인 출판 디자이너들은 결과물의 모든 측면에 대해 완벽한 통제권을 가지고 있다. 그들은 잉크, 종이, 인쇄방법, 이미지의 해상도, [...]

CSS 2.1는 Pseudo-Class Selectors(사이비 클래스 선택자)를 지원하고 있다. 대표적으로 링크에 자주 사용하는 :link, :hover, :visited 가 있으며, 인풋에 사용하는 :focus와 :active 가 있다. 이 녀석들을 잘 활용하면 다이내믹한 사이트를 쉽게 만들 수 있지만, 현재 IE(버전 6 이하)에서는 a(링크에 사용하는 놈)에서만 이녀석들을 지원하고 있기에 현실적으로 사용하기 어렵다. 이중에서 가장 많이 사용하는 사이비 클래스 선택자가 hover인데, 현재로써는 [...]

디지털 웹 잡지에 CSS 구조화에 대한 좋은 글이 올라왔다. CSS 구조화의 중요성은 사이트의 구조화 만큼 중요한 작업이다. 제작자마다 각각 CSS 구조화에 대한 다양한 벙법이 사용하고 있는데, 그 방법들의 개념과 장/단점을 쉽게 설명해주고 있다. 워드프레스는 잘 구조화된 블로그 툴이다. 백문이 불여일견이라고, 직접 사용해보면 그 아름다움에 빠질 것이다. 특히 워드프레스의 템플릿 태그와 템플릿 파일들을 사용하다보면, 자신도 모르게 [...]

So-Basic 테마의 CSS는 공개용의 경우 screen과 print용 2종류의 미디어 형식으로 배포되고 있지만, 내가 사용하고 있는 것은 오직 screen용 하나뿐이다. 솔직히 프린트용 외에는 별도의 CSS의 필요성을 느끼지 못했던 나였지만, TJpak님께서 Hooney.net 블로그를 PDA에서 테스트한 글을 보고 인식이 많이 바뀌게 됐다. 특히 Eric Meyer의 Cascading Style Sheets, 2nd Edition라는 책을 보면서 외부 스타일시트의 미디어 종류와 역할 등을 [...]

지난주 금요일부터 에릭 마이어의 Cascading Style Sheets, 2nd Edition 책을 읽고 있다. 영어의 압박은 윈도우 헬프파일을 한컴사전을 이용해서 해결하고 있다. 아마존에서 CSS 관련기본서를 찾다가 리뷰글이나 여러평점들을 토대로 이 책으로 결정하게 됐다. (책을 언제, 어떻게 받았는지에 대해서 궁금해하지 마세요. -_-;)

CSS에 관심을 갖기 시작한지 어느덧 6개월이 지났다. CSS에 대한 관심은 웹표준에 대한 관심에서 시작됐고, 웹표준에 대한 관심은 파이어폭스에 대한 관심에서 시작됐다. 역시 언제나 문제는 파이어폭스 이넘이다. ㅎㅎ 작년까지 나는 HTML의 마크업에 대해서는 거의 관심이 없었다. 드림위버라는 훌륭한 프로그램을 몇년 동안 사용하다보니 HTML을 몰라도 쉽고, 빠르게(?) 웹페이지를 만들 수 있었기 때문이다. 함께 일하던 프로그래머조차 HTML에 대한 [...]

국내에서도 CSS 관련 세미나가 개최되는군요. 아무래도 첫 세미나인듯 싶습니다. 살고 있는 곳이 광주라서 주말에도 서울 올라가는 것이 쉽지 않은데, 하필이면 평일에 세미나를 개최하네요. 그나마 4명의 세미나 강사분들 중에서 3명의 이름이라도 알고 있는터라 관련 정보를 얻을 수 있었으면 좋겠네요. 특히 지윤님은 세미나 자료들은 PDF로 꼭 만들어주시길~ ㅎㅎ 위 그림을 클릭하면, 세미나에 대한 자세한 정보를 얻을 수 [...]

Rated-R님의 글에도 소개된 것처럼, CSS 사용할때 단축 속성을 사용하면 코드를 줄일 수 있다. 이러한 CSS의 모든 속성에 shorthand properties(단축 속성)을 사용할 수 있는 것이 아닌, 아래의 몇몇 속성에서만 사용 가능하다. font 단축 속성 구문 : { font: font-style | font-variant | font-weight | font-size | line-height | font-family } 예제 : { font: 0.75em/1.4em 돋음, [...]

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