Category Archives: XHTML, CSS, etc..

굴림 폰트 사용시 크기 비교 및 특징

인터넷에서 뭔가를 할 때, 가장 고민하는 문제가 바로 서체, 유식하게 말하다면 서체 문제가 아닐까 생각이 듭니다. kukie님 홈피에서 귀충한 글을 발견했다. HTML에 관심이 있으시면 곱씹어 읽어볼 충분한 가치가 있는글입니다. 강추합니다.

http://kukie.net/resources/font_gulim/#gulim

Best of CSS Design 2007

 뭐 아시는 분은 아시겠지만, 제가 웹디자인에 관심이 있습니다. 이번에 http://www.webdesignerwall.com/이라는 곳에서 올해의 Best of CSS Design 2007 을 선정했습니다. 관심 있으신 분은 다음 링크를 클릭하시면 됩니다. 뭐 한국은 아직도 윈도우에서 벗어나고 있지 못한데, 참 많은 것이 빨리 변하고 있습니다.

http://www.webdesignerwall.com/trends/best-of-css-design-2007/

Web 디자인에 유용한 곳 링크 모음

제 실력은 미천함에도 불구하고, 문과에서 컴퓨터를 잘 다루는 사람이 없는 관계로 관리하고 있는 홈페이지가 좀 있습니다. 뭐 그래도 Html과 같은 것은 어느 정도 알지만, 미적 표현력이 떨어진 나머지, 디자인적인 측면에서는 거의 50점도 못 되는 수준입니다. 그래서 웹디자인 실력을 늘리고자 자료를 조사했습니다. 이 아래 링크들은 아마도 책같은 곳에서 찾은 것 같은데, 정리한 파일에는 책이름이 적혀 있지 않네요. 출처불명이 되는군요. 그래서 좋은 곳들을 모아둔 것이니 참고하세요!

  1. http://www.w3.org/:여기는 웹은 물론이고 웹 표준을 매일 개발하는 기관
  2. http://www.webstandards.org/: 1998년에 설립된 조직으로 웹 표준을 대중에게 널리 알리고 웹 디자이너와 개발자들이 표준에 따라 개발할 수 있는 교육자료를 제공한다.
  3. http://www.alistapart.com/: 웹 표준으로 디자인하기 위한 테크닉과 장점에 초점을 맞춰 웹 컨텐트를 만들기 위한 디자인, 개발에 관련된 내용을 소개하는 웹진
  4. http://www.csszengarden.com/: 동일한 마크업 구조를 사용하는 자기만의 CSS 디자인을 만들어 제출하여, 보여주는 사이트, 지속적인 업그래이드 되고 있습니다.
  5. http://www.diveintoaccessibility.org/: 웹 접근성에 대해 논의하는 홈피
  6. http://web-graphics.com/: 하이퍼텍스트 디자인 자료, 링크, 설명 들을 모아놓은 곳입니다. 표준에 관련된 디자인과 개발 분야의 새로운 소식을 알려줍니다.
  7. http://www.digital-web.com/: 웹 디자이너를 위한 컬럼, 뉴스, 튜토리얼을 제공하는 온라인 잡지입니다.
  8. http://www.zeldman.com/: 1995년부터 웹 디자인과 관련된 소식과 정보를 올리고 있는 ‘웹 표준의 대부’라고 불리우는 제프리 젤드만의 홈피. (참고: 개인적으로 강추하는 홈피입니다. 정말로 인쇄매체처럼 잘 만들어져 있는 곳입니다. 고수의 숨결을 느낄 수 있습니다.)
  9. http://www.mezzoblue.com/: css 젠 가든(http://www.csszengarden.com)인 Dave Shea의 홈피입니다.
  10. http://www.meyerweb.com/: CSS의 전문가라고 알려진 에릭 마이어의 홈피입니다. 그는 넷스케이프 사와 웹표준에 관련된 컨설팅과 작업을 했습니다.
  11. http://www.whatdoiknow.org/: 훌륭한 표준 웹 사이트 작업에 많이 참여한 토드 도미니의 개인 웹 사이트입니다.
  12. http://www.saila.com/: 온라인 저널리즘부터 웹 구축까지 캐나다 뉴미디어에 관한 소식을 전하는 싸이트. 웹 표준과 관련된 고품격 정보들을 전해줍니다.
  13. http://www.cssdrive.com/

인용문에 따옴표(“) 넣기

하는 일이 특성상 사람들이 말했던 말을 인용하는 경우가 많습니다. 물론 글을 쓸 때에는 인용을 하고 각주 같은 것을 달아서 해결하지만, 웹에서는 어떻게 처리할지 걱정이 많았습니다. 요즘 웹표준(링크는 예스 24입니다)이라는 책을 읽으면서 4장 인용문에서 힌트를 얻었습니다. 그리고 저자 사이트를 참고했습니다. 기본 CSS에 다음과 같은 코드를 넣고 따옴표 이미지 파일을 넣으시면 됩니다. 간단하죠?

blockquote {
margin:0;
padding:0 18px;
font-size: 88%;
line-height: 1.5em;
color: #777;
padding-left: 23px;
background: url(/images/quotemarks.gif) no-repeat 0 3px;
}