미투데이 로그, CSS로 예쁘게 표시하기
Posted 2007. 5. 5. 09:25- 잇힝, 좋은 아침입니다. 아니 시원한 아침입니다. 오전 8시 48분
- 베란다를 통해 라면 냄새가 들어온다. 귀찮아서 아침에 빵 먹었는데, 매콤한 그 향기가 오만 잡념을 부르는구나. 오전 9시 18분
- 자 일 하나 끝났고, 이제 세 시간만 집중해서 일하면 이 주에 할 일은 다 끝난다. 집중하자. 집중. 오전 11시 28분
이 글은 nova님의 미투데이 2007년 4월 26일 내용입니다.
이미지 두 개와 CSS로 미투데이에서 배달된 로그를 위와 같이 표시할 수 있습니다. 다만 유명한 IE padding 버그 padding, width 문제 때문에 불여우(와 IE6 이상)에서만 제대로 보입니다. 그러니까 쓸 분이 없을거라고 ㅜ.ㅜ
그럼에도 공개하는 이유는 미투데이 로그가 이런 CSS 적용이 쉽도록 개선되었으면 좋겠다는 생각이 들어서입니다.
제가 사용한 CSS는 아래와 같습니다.
/*/// Me2Day /////////////////////////*/이미지는 아래 두 개입니다.
.me2day_daily_digest {
width: 440px;
overflow: hidden;
padding: 0px;
margin: 0px;
}
.me2day_daily_digest ul {
width: 440px;
list-style: none;
clear: both;
margin: 0px;
padding: 0px;
background: url(./images/balloon.gif) repeat-y;
}
.me2day_daily_digest li {
display: block;
clear: both;
margin: 0px;
background: url(./images/profile.gif) no-repeat;
color: #333;
font: 12px/14px "Gulim";
padding-left: 100px;
padding-right: 10px;
padding-top: 10px;
height: 90px;
}
하고 싶은 말
배달되는 로그를 아래와 같이 바꾸는 걸 고려해주셨으면 합니다.
<div class="me2day_daily_digest">
<ul>
<li>
<div class="digest_content">
오늘은 점심 인사로 시작합니다. 자 우리 모두 맛있는 거 먹으러 갑시다. <span class="datetime"><a href="http://me2day.net/nova/2007/04/30#11:58:27" class="datetime" rel="bookmark" style="font-size: 0.8em;" title="퍼머링크">오전 11시 58분</a></span>
</div>
</li>
</ul>
<p style="background: transparent url(http://me2day.net/images/me2day_icon.gif) no-repeat scroll right top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; padding-right: 25px; text-align: right; font-size: 0.9em;">이 글은 <a href="http://me2day.net/nova">nova</a>님의 미투데이 <a href="http://me2day.net/nova/2007/04/30">2007년 4월 30일</a> 내용입니다.</p>
</div>
- digest_content 같은 걸로 한 단계만 더 감싸주세요. 그렇지 않으면 조금만 복잡해져도 귀찮은 IE hack을 써야합니다.
- 이왕이면 ul, li에도 클래스를 부여해주시면 좋겠습니다.
- datetime 클래스가 저렇게 겹치는 건 의미가 없으니 둘 중 하나의 이름을 바꿔주십시오.
- p 태그를 div 태그로 바꾸고 인라인 스타일 제거해주십시오. 이미지는 img 태그로 넣어주십시오. 재정의가 불가능한 형태로 넣을 이유가 없다고 생각합니다.
- Filed under : 카테고리 없음
