블로그 스킨을 만든다거나 기타 HTML을 이용해서 웹을 디자인하다 보면 보여주고 싶은 정보는 많은데 공간이 좁아서 고민하게 되는 경우가 많이 있습니다.
특히, 블로그 스킨을 만들다 보면, 개인적으로 사이드바가 있는 2단이나 3단 스타일을 좋아하는데, 동시에 사진을 가능한한 큰 크기로 올리고 싶기 때문에 본문의 너비를 키우면 사이드바의 폭이 좁아져서 내용을 배치하기가 쉽지 않습니다.
이럴때 활용하면 유용한 기능중의 하나가 바로 대부분의 HTML 태그에 사용할 수 있는 title 속성입니다.
title을 이용하면 관련 내용이 마우스포인터를 해당태그위에 올려두면 내용이 보여지는 툴팁(tooltip)으로 적용이 됩니다.
이번에 스킨을 변경하면서 이를 이용해서 사이드바를 정리해 보았습니다.
최근트랙백과 최근댓글을 꾸미는 과정에서 작성자 정보를 보여주려고 하다보니 한줄에 표현하려면 제목을 줄여야하고 제목을 그대로 보여주려면 두줄로 보여줘야했습니다. 그래서 작성자 정보를 title 속성에 집어 넣어버렸습니다.
다음은 본 블로그에 적용된 스킨 중에서 위 그림에 나온 최근트랙백 부분입니다.
기존에는 span 태그를 이용해서 작성자 정보를 보여주고 있었지만, 이를 지우고(혹은, 주석처리) 이를 감싸로 있는 li 태그에 title속성을 통해 표현하였습니다.
최근댓글부분에도 이와 유사하게 처리가 되어있습니다.
그럼 테스트를 위해 오른쪽에 있는 최근댓글이나 최근트랙백 위에 마우스를 직접 올려놓아 보세요.. ^^
'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글
| 블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가) (2) | 2009/02/25 |
|---|---|
| 자주 안보는 목록은 드롭다운박스로 바꾸자 (10) | 2009/02/19 |
| HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기 (9) | 2009/02/19 |
| 위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기 (4) | 2009/02/18 |
| 스킨 변경 및 적용 완료: Life Is Mono (Light) (13) | 2009/02/17 |
| 메타사이트 추천, RSS 구독 버튼 by Krang (8) | 2009/02/05 |
댓글을 달아 주세요
어쩜 제 고민을 콕 찝어서 설명해 주시네요..ㅎㅎ
게다가 스샷까지 제 블로그 홍보를.ㅋㅋ
바로 적용해 봐야 겠어요~
덕분에 고민하나 줄었어요~
하는김에 트랙백, 댓글 다 해버렸네요.^^*
도움이 되셨다니, 저도 기분이 좋습니다. ^^
잘만 활용하면 깔끔하게 꾸밀수가 있을거 같습니다.
말풍선 이네요^^
네.. 그렇죠 말풍선... ^^
어차피 크게 중요하지 않은 정보는 감춰놨다가 필요할때만 보는것도 방법일것 같습니다. ~
와 좋은 방법이네요.
html거의 까막눈이 되어가고 있는데, 저도 시도해 보려면
좀 걸리겠어요^^
원래 아셨던 분이라면 금새 하시겠지요.. ^^
간단하지만 깔끔한 팁인것 같아서 올려봤는데, 많은 분들이 호응해 주시니 저도 기분이 좋네요.. ^^
오호 괜찮은 팁인데요!
댓글과 트랙백에 적용하면 딱이겠어요!!!
저도 시간 나는 대로 적용해야겠씁니다!~~~
저도 사이드바 폭이 좁아 늘 고민만 했었는데, 이렇게 해 두니까 간편하고 깔끔하고 맘에 딱 드네요.
돌이아빠님도 이쁘게 꾸며보세용.. ^^