블로그 디자인 업데이트
CSS핵(hack) 정리 포스팅을 작성하다가 새로운 타이틀 요소(h4) 디자인 하는 김에 이것저것 많이 건드리게 되었다. h4요소도 보더(border)를 이용해서 살짝 손을 좀 보고 pre요소도 보더를 점선(dotted)으로 교체. 트랙백 표시되는 부분도 백그라운드 컬러(background-color)에서 살짝 그런지(grunge) 느낌이 나는 백그라운드 이미지로(background-image).
코멘트 부분도 지금까지 번갈아가며 백그라운드 컬러가 들어가던 부분을 관리자용 코멘트와 일반 코멘트를 Official Comments 플러그인을 이용하여 클래스(class)를 나눠서 각기 다른 스타일을 적용하였다.
하다보면 계속 새로운 아이디어가 떠오르고 작업이 흥미로워진다. 전체적인 통일감을 잃지 않는 것도 필요하고…적당한 선에서 자제하는 것도 필요하다.
역시 디자인은 즐겁다.
2006-06-29 at 10:49:59
^^; 질문해도 되나염? _답안듣고 합니다.죄송,^^;;
상단 로고있잖아요 nmindplus라는 부분요. 이거 FF에서 보게 되면, 클릭할때 링크 점선 라인이 나오잖아요, 그게 딱 그 이미지 부분만 표시되는게 아니라 왼쪽 부터 시작해서 쭉 길게 이미지 까지 표시 되는데, 그거 IE처럼 그 로고 이미지만 점선 표시되게 할 수 없나요?, _ 할 수 없이 그 점선 표시를 아예 없애는 것으로 마무리를 지었지만, _ ^^;; 부탁합니다.
2006-06-29 at 11:50:39
로고부분을 클릭할 경우 점선이 왼쪽부터 시작해서 길게 표시되는 것은 Phark방식의 image Replacemnent기법을 사용했기 때문입니다. tex-indent에 -5000정도의 값을 줘서 텍스트를 왼쪽으로 날려버렸기 때문에 점선이 왼쪽부터 시작하게 되었습니다(이 방식은 Image off/CSS on의 경우 이미지가 표시되지 않는 문제가 있습니다).
점선을 로고 부분에만 표시되게 하는 방법으로는 첫번째 FIR(Fahrner Image Replacement)방식으로 텍스트부분을 span태그로 감싸서 span에 display:none을 지정하는 방법이 있지만 스크린리더에서 읽혀지지 않는 문제가 있다고 합니다..그리고 불필요한 span태그를 사용하게 되는 문제도 있습니다.
두번째로는 LIR(Leahy/Langridge Image Replacement)방식이 있는데 padding으로 이미지의 높이를 표시하고 height 값을 0으로 지정해서 사용하는 방법입니다(이 방식은 Image off/CSS on의 경우 이미지가 표시되지 않는 문제가 있습니다).
image Replacemnent기법이 사용되기 시작한 것은 컨텐츠와 장식적인 요소를 완벽하게 분리하자라는 생각에서 나온 것들인데 image Replacemnent를 위해 불필요한 마크업(span둥의…)이 이뤄지게 되는 것도 모순이라고 생각하고 있습니다(주객이 전도된 입장이라고나 할까요..). 사이트의 로고 등 단순한 장식적인 요소가 아니라면 이미지를 그대로 문서에 삽입하는 것도 좋은 방법이 될 것 같습니다.
그외의 장식적인 이미지의 경우에는 백그라운드 이미지로, 텍스트는 그대로 텍스트로 적어주는게 다양한 의미에서 가장 좋다고 봅니다. 그런 의미에서 OS에서 기본으로 제공하는 CJK폰트가 좀 더 다양해졌으면 좋겠네요. 더도 말고 덜도 말고 딱 영문폰트 정도로만…
아! 왼쪽부터 시작되는 점선을 없애기 위해서는 FIR방식이나 LIR방식을 사용하시면 해결될 것 같습니다 :-)
2006-06-29 at 13:32:30
앗, 감사합니다. 이렇게 빨리, ^^; 함 해보겠습니다.
한가지더, 제 질문은 로고이지만,
보통 네비게이션바에서 이미지로 메뉴를 구성한 경우, 배경이미지로 설정하고 List로 텍스트 메뉴구성하고나서, 텍스트는 Phark방식으로 날리기도 하잖아요,
그럴 경우에도 해당하나요? 질문 많아서 죄송해요..^^;;;;;
2006-06-29 at 13:45:33
네. 원리는 같습니다. 텍스트는 날리고 백그라운드 이미지로 대체하는 방식이니까요.
Web標準デザインテクニック即戦ワークブック를 보시면 이런 실전적인 부분에서 잘 정리되어 있습니다. Web표준의 교과서에 비해서 깊이는 조금 떨어지지만 좋은 책입니다:-) 한번 읽어보시면 많은 도움이 되리라 생각합니다.
2006-06-29 at 15:00:27
감사합니다. ^^; _ 책 추천도 감사하고요.
실전책이 몇권 있긴한대, 사이트들을 둘러봐도 그렇고,
말씀하신 두가지로 만든건 아직 본적이 없었네요. 어쩋든 감사!합니다.
2006-06-29 at 16:45:56
별말씀을요 :-)
2006-06-30 at 15:13:37
아… 저도 스킨을 제가 맘에드는 디자인으로 손을 봐야하는데 시간도 통 안나고 귀찮기도 하고… 누군가 내맘에 쏙 드는 스킨을 만들어 주지나 않을까 하는 게으른 마음으로 그냥 저냥 하루 하루 버티고 있네요… ^^
nmind님 부럽습니다~
2006-06-30 at 18:06:46
저는 photoni님이 훨씬 부러운걸요:-)