태터데스크 주무르기 : 썸네일 배치 ( 내용추가 ) IT 이야기/블로그 & HTML2008/10/29 22:08
태터데스크.. 잘하면 이쁜 초기화면을 만들수 있는데, 사용하기는 그리 녹녹치가 않습니다. 특히 썸네일 관련 부분을 보고 있노라면 좀 짜증이 납니다. 자동으로 생성되서 넘어오는 html에 테이블을 사용해놨기 때문에 순수한 디자인 만으론 모양을 맘데로 주무를 수가 없지요. (기본적으로 이미지가 잘리거나 불필요한 공백이 생기게 됩니다.)
결국 넘어오는 html을 받아서 재가공을 하기로 결정했습니다. 단순하게 생각해서, 1. 소스를 받는다. 2 필요한 부분만 잘라낸다. 3. 다시 쓴다. 뭐 이런 절차가 되겠네요.
원하는 디자인은 이미지는 주어진 영역의 오른쪽에 붙어주고, 내용은 나머지 부분에 여백없이 자연스럽게 배치되는 것입니다.
태터데스크에서 반복되는 아이템은 <s_list>~</s_list> 의 html에 영향을 받습니다. 따라서 수정하는 부분 역시 이부분에 삽입하면 되겠습니다.
소스
str = String('[ ##_item_thumbnail_## ]');
result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
imgSrc = result[1];
imgAlt = result[2];
if(imgSrc .lastIndexOf('imgempty.png') < 0) {
document.write('<div class="TD_thumbimg">');
document.write('<a href="[ ##_item_link_## ]"><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
document.write('</div>');
}
</script>
위 소스를 [## _item_thumbnail_ ## ]에 치환 시켜줍니다. 이렇게 해 주면 웹페이지가 브라우져에 보여지는 순간에 위 스크립트에 의해 다시 만들어진 html (위 소스에서 document.write 부분) 만 화면에 보여지게 됩니다.
추가로, 이미지가 없을때 보여지는 기본 이미지(imgempty.png)는 아예 보여지지 않도록 바꾸었습니다. (_item_thumbnail_ 앞뒤 여백은 실제로는 없습니다. )
스타일
그리고, 영향을 받는 아이템의 스타일은 다음과 같습니다.
float:right;
margin: 5px;
padding:0;
}
.TD_thumbimg img{
max-width: 160px;
max-height: 160px;
width: 160px;
border: 1px solid #ccc;
margin:0;
padding:3px;
}
이미지 부분이 오른쪽에 붙도록 하기 위해 TD_thumbimg 클래스를 이용하였고, 내부에 자리 잡는 img에 대해서 max-width와 max-height를 이용하여 크기를 제어하였습니다. 참고로 max-width와 max-height는 익스플로러6.0에서는 올바르게 동작하지 않습니다. 이 경우 단순히 width만 설정되게 됩니다.
결과
의도했던 데로 잘 나왔네요. 익스플로러7.0, 파이어폭스, 크롬에서는 정상동작합니다.
(추가내용)
사진이 없을 때 아예 표시하지 않는게 아니라, 기본 이미지를 다른 걸로 바꾸어서 적용하는 법에 관해 물어보시는 분이 계셔서 아래 내용을 추가 하였습니다.
소스 - 기본이미지를 바꿔서 적용하는 법
str = String('[ ##_item_thumbnail_## ]');
result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
imgSrc = result[1];
imgAlt = result[2];
if(imgSrc .lastIndexOf('imgempty.png') >= 0) {
imgSrc = "바꾸고 싶은 기본이미지 URL";
}
document.write('<div class="TD_thumbimg">');
document.write('<a href=""><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
document.write('</div>');
</script>
적당한 이미지를 스킨의 images 디렉토리에 업로드한 후에 해당 이미지의 절대주소를 이용하면 되겠습니다. 이미지의 절대주소는 사용하고 있는 스킨의 임의의 이미지의 속성을 참조해서 작성하면 됩니다.
'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글
| RSS 부분공개에서 전체공개로... FeedBurner 사용중지... (6) | 2008/11/05 |
|---|---|
| CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto (4) | 2008/10/31 |
| 태터데스크 주무르기 : 썸네일 배치 ( 내용추가 ) (34) | 2008/10/29 |
| 태터데스크에 새글 아이콘 달기 (18) | 2008/10/29 |
| 블로그 가치평가 by 블로그얌(Blogyam) (6) | 2008/10/28 |
| Exif 정보출력 - 카테고리, 태그 단위로 표시여부 제어하기 (2) | 2008/10/22 |
TRACKBACK | http://www.crazybar.net/trackback/512
-
SUBJECT 테터데스크 썸네일 수정 방법
2008/07/22 21:41 TRACKED FROM Dream in dream 삭제이미지가 없을때 썸네일을 아예 안보이게 해보려고 하다가... 검색해보니 있네요. 잘 만들어 놓으셨네요. 트랙백으로 원본 걸어놓을께요. 썸네일 목록형 선택후에 HTML 수정 이 내용을... 이내용으로 교체 스타일 수정에 추가 .TD_thumbimg { float:right; margin: 5px; padding:0; } .TD_thumbimg img{ max-width: 160px; max-height: 160px; width: 160px; borde..
치환자가 먹혀있었네요 ~! 덕분에 잘 사용중이랍니다 
댓글을 달아 주세요
치환이라는게 무슨 뜻이죠??
아래 스타일은 어디에 넣어야 하나요??
고맙습니다~~^^
안녕하세요.
바꿔치기 하라는 말입니다.
원래 들어있던 [ ##_item_thumbnail_## ] 를 지우고 대신 본문의 소스부분을 삽입하시면 됩니다.
그리고 imgempty.png를 다른 사진으로 바꾸는 건 못하나요??
당연히 가능하죠...
제가 테스트해보진 않았지만, 내용이 좀 길어질 듯 하니 본문에 삽입해 놓겠습니다.
제 블로그 와 보시면..
왜 안되는지..
ㅠㅠ
<div class="TD_recent">
<s_more>
<div class="TD_more">
<div class="TD_more_title"><a href=""></a></div>
<span class="TD_more_btn"><a href="">더보기</a></span> </div>
</s_more>
</div>
<div class="TD_recent">
<s_list>
<div class="TD_thumblist">
<div class="TD_thumbimg"><script type="text/javascript" language="javascript">
str = String('');
result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
imgSrc = result[1];
imgAlt = result[2];
if(imgSrc .lastIndexOf('imgempty.png') < 0) {
document.write('<div class="TD_thumbimg">');
document.write('<a href=""><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
document.write('</div>');
}
</script></div>
<div class="TD_headline">
<a href=""></a> <span class="TD_date"> </span>
</div>
<div class="TD_summary"><p></p></div>
</div>
</s_list>
</div>
이렇게 적용했고 스타일도 제대로 먹혔는데..
무엇이 잘못되었는지 좀 알려주세요..
치환자가 적용이 안되었습니다.
적용하신 코드에서 중간에 보시면 str=String('') 부분이 있습니다.
'' 사이에 [ ##_item_thumbnail_## ] 넣으세요...
이때 [ 다음과 ] 직전 공백 삭제하시구요.
우선 이렇게 함 해보세요..
사진이 뜨긴 하는데..
그런데 왼쪽 여백에 글이 안 차네요..
위 소스와 같게 되있죠?
혹시 <div class="TD_summary">.... 부분에서 <p>랑 </p> 빼 보시겠어요?
그리고, 스타일에서 TD_summary 부분 에 float 부분은 지우세요.
적용하셔서 확인해 보세요.
그리고 태그는 또 어떻게 하셧는지..
대단하세요~
전 세계에 이 방법이 소개된 블로그는 여기밖에 없어서..
제 블로그 설정에서 태그부분은 아래와 같습니다.
--
Tag: < s_taglist >[ ##_tag_## ]< /s_taglist >
--
중간중간 삽입된 공백은 지우셔야 합니다.
또 궁금한거 있으면 물어보세요.. ^^
지워도 달라지는 게 없네요 ㅠㅠ
그리고 TD_Summary 부분에 float 는 있지도 않고..
ㅠㅠ 넘어야 할 산이..
소스를 다시 한번 올려주시겠어요?
<div class="TD_recent">
<s_more>
<div class="TD_more">
<div class="TD_more_title"><a href=""></a></div>
<span class="TD_more_btn"><a href="">더보기</a></span> </div>
</s_more>
</div>
<div class="TD_recent">
<s_list>
<FONT face="'Gulim', 'Sans-serif'">
<div class="TD_thumblist">
<div class="TD_headline">
<a href=""></a>
</div>
<div class="TD_thumbimg"><script type="text/javascript" language="javascript">
str = String('');
result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
imgSrc = result[1];
imgAlt = result[2];
if(imgSrc .lastIndexOf('imgempty.png') < 0) {
document.write('<div class="TD_thumbimg">');
document.write('<a href=""><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
document.write('</div>');
}
</script></div>
<div class="TD_summary"><span class="TD_date"> ()<br /><br />Tag: <s_taglist></s_taglist></span></div>
</div>
</font>
</s_list>
</div>
아래는 스타일
#TD_content p{
padding:0;
margin:0;
}
.TD_headline {
font-size:1.2em;
font-weight:bold;
padding:0;
}
.TD_subtitle{
font-weight:bold;
color:#999;
}
.TD_date {
color:#999;
font:0.9em verdana;
}
.TD_category {
margin-left:2px;
}
.TD_category a{
color:#999;
}
.TD_name {
font-weight:nomal;
}
.TD_tagbox{
padding:5px 0;
}
.TD_tagbox .TD_tagtitle{
background:url(../image/ico_tag.gif) no-repeat;
width:30px;
height:14px;
float:left;
}
.TD_tagbox .TD_tagtitle span{
display:none;
}
/* 헤드라인형 모듈 */
.TD_toparticle {
padding:5px 0 10px 0;
margin:5px 10px 5px 5px;
}
.TD_toparticle .TD_titleinfo{
background:url(../image/ico_gallery_title.gif) 0 2px no-repeat;
padding-left:50px;
}
.TD_titleinfo {
padding-bottom:5px;
}
.TD_toparticle .TD_tblist {
display:none;
}
.TD_toparticle .TD_tagbox {
display:none;
}
.TD_toparticle .TD_summary{
background-color:#eee;
padding:20px 10px;
color:#999;
}
.TD_toparticle .TD_summary p{
margin:0 10px;
}
.TD_toparticle .TD_summary img {
margin-bottom:10px;
}
/* 섬네일 목록형 모듈 */
.TD_thumblist{
padding:5px 0;
margin:5px 5px 10px 10px;
}
.TD_thumblist p{
padding:0;
margin:0;
letter-spacing:-1px;
}
.TD_thumblist .TD_headline {
font-size:1.1em;
font-weight:bold;
padding:0 0 0 10px;
text-align:center;
}
.TD_thumblist .TD_summary{
padding:0;
text-align:center;
}
.TD_thumblist .TD_thumbnail{
border:3px solid #eee;
}
/* 텍스트 목록형 모듈 */
.TD_list{
margin:5px;
}
.TD_list .TD_headline {
padding:0 0 0 20px;
font-size:1.2em;
line-height:1.2em;
background:url(../image/bull_listbig.gif) 0 2px no-repeat;
}
.TD_list .TD_date {
margin-left:5px;
font-weight:normal;
font-size:0.75em;
}
.TD_list .TD_summary {
display:none;
}
/* 앨범형 모듈 */
.TD_album{
margin:5px;
padding: 0 5px 5px 10px;
}
.TD_album img {
margin:0 10px 0 0;
}
.TD_album .TD_thumbimg .TD_thumbnail{
border:5px solid #eee;
}
.TD_album .TD_headline {
padding:0 5px 5px 0;
margin:0;
font-size:1.1em;
line-height:1.2em;
text-align:center;
}
/* 최신글 공통 */
.TD_recent .TD_thumbnail{
border:none;
}
/* 최신글의 더보기 */
.TD_more{
text-align:right;
padding:5px 5px 7px 5px;
margin:10px 5px;
color:#333;
border:1px solid #ddd;
background-color:#f5f5f5;
}
* html .TD_more{height:20px;}
.TD_more_title{
font-weight:bold;
float:left;
font-size:1.2em;
background:url(../image/ico_recent_title.gif) 0 0 no-repeat;
padding:0 0 0 25px;
}
.TD_more_btn{
font:0.9em dotum;
}
/* 최신글 텍스트 목록형 */
.TD_recent{
}
.TD_recent .TD_headline {
color:#000;
font-weight:normal;
padding:0;
font-size:1em;
}
.TD_recent .TD_list .TD_headline {
background:none;
}
.TD_recent .TD_list{
margin:5px;
background:url(../image/bull_rect.gif) 6px 9px no-repeat;
padding:3px 0 0 16px;
}
/* 최신글 섬네일 목록형 */
.TD_recent .TD_thumblist{
margin:10px;
border: 2px solid #F5F5F5;
border-left-width: 8px;
min-height: 170px;
}
.TD_recent .TD_thumblist .TD_headline{
clear:both;
font-weight:bold;
color:#000;
text-align:center;
}
.TD_recent .TD_thumblist .TD_summary{
padding:0;
text-align:center;
}
.TD_recent .TD_thumblist .TD_thumbnail{
border:5px solid #eee;
background-color:#eee;
text-align:center;
padding:0px;
}
.TD_thumbimg {
float:right;
margin: 5px;
padding:0;
}
.TD_thumbimg img{
max-width: 160px;
max-height: 160px;
width: 160px;
border: 1px solid #ccc;
margin:0;
padding:3px;
}
/* 최신글 앨범형 */
.TD_recent .TD_album {
padding:0px;
margin:0 0 10px 0;
overflow:hidden;
text-align:center;
}
.TD_recent .TD_album .TD_thumbimg{
border:0;
padding:0;
margin:0 auto;
}
.TD_recent .TD_album .TD_headline {
height:14px;
overflow:hidden;
padding-top:4px;
}
/* 슬라이드형 */
.TD_slide{
margin:2px;
padding:0;
float:left;
}
.TD_slide .TD_thumbnail{
margin:0;
padding:0;
border:5px solid #eee;
}
.TD_slide img{
margin:0;
padding:0;
}
고맙습니다~
일단 소스에서 <script> ~ </script> 앞 뒤의 <div>와 </div> 는 지우셔도 됩니다. 중복되거든요.
그리고, TD_summary 스타일에서 align 빼보실래요?
그리고, 스타일에서 중복으로 정의된 부분이 없는지 잘 살펴보세요...
품하핫핫핫!!
성공했습니다..
앞으로 자주 찾아 뵐께요~~^^
잘 해결하셨다니 축하드립니다. ^^
요번에는.. 기본이미지를 바꿔서 적용하는 법 이 말썽이군요
설정하면 죄다 엑박으로 떠요 사진들이.. ㅠㅠ
아마 기본 이미지에 대한 URL이 잘못되었을 가능성이 큽니다. 자신의 블로그의 스킨에 올렸다고 해서 블로그 주소로 시작하지 않습니다. 요부분 잘 살펴보세요...
요번에는 이미지가 뜨긴 하는데 모든 이미지가 제가 설정한 놈으로 나오고..
이미지가 없는 건 기본 이미지로 떠 버리네요.. ㅠㅠ
확인해 보니 제가 나중에 올려드린 부분에 버그가 있네요...
if(imgSrc .lastIndexOf('imgempty.png') < 0) {
imgSrc = "바꾸고 싶은 기본이미지 URL";
}
를
if(imgSrc .lastIndexOf('imgempty.png') >= 0) {
imgSrc = "바꾸고 싶은 기본이미지 URL";
}
로 바꾸세요
max-width max-height 이 설정을 ie6 에서도 가능하게는 안되나요.?
아님 다른 방법이라도. 초보라 도저히 모르겠네요..
글쎄요.. 방법이 없습니다.
저같은 경우는 JavaScript로 사용중인 브라우져를 알아낸 다음에 IE6이하인 경우에는 별도의 스타일이 적용되도록 했습니다.
참고로 제가 사용하는 JavaScript 구문입니다.
isStandard = true;
if(navigator.appName == "Microsoft Internet Explorer" ) {
IEver = navigator.appVersion.match(/MSIE \d+.\d+/)[0].split(" " )[1];
if(IEver < 7) { isStandard = false; }
}
이 코드를 시작부분에 삽입한 후에, 별도 처리가 필요한 부분에선 isStandard값을 이용해서 구분이 가능합니다.
혹시 태터데스크에 공지사항만 뜨게는 못할까요?
고수님이신거 같아 질문드려요 ㅜㅜ 포럼에 물어봐도 대답이 없고...
공지 최신글이 뜨게 했으면 좋겠는데 너무 어려워요... 부탁합니당 꾸벅
잠깐 살펴봤는데요.
제 경우는 일단 가져온 데이터를 가공하는 건 해봤어도,
이건 태터데스크에서 제공해 주지 않는 정보를 가져와야 하는 거라서 쉽지 않을거 같네요.
꽁수를 쓰자면, 공지사항이라는 카테고리를 만들어서 그걸 보여주는 거 정도 생각이 나긴 하는데, 잘은 모르겠네요.
도움 드리지 못해 죄송합니다.
아... 그렇군요 ㅜㅠ
오히려 결론 내주시니 맘이 편하네요.
계속 붙잡고 고민했는데 원래 안되는거였다니... ^^;
암튼 감사합니다~
제가 아는 선에서 말씀드린거라 부정확 할수도 있어요 ^^
또 궁금한거 있으면 말씀하세요. 아는데까진 말씀드리겠습니다.
안녕하신지요.^^
태터데스크 섬네일 수정해보았는데 글이 왼쪽에 정렬되지 않아서 질문드립니다.
다른 분의 질문도 읽어보고 거의 하루종일 따라해봤는데 이미지는 오른쪽에 원하는 크기로 정렬이 되는데
글은 이미지 하단 중앙에 배치됩니다. ㅜ.ㅜ;
시간되시면 코드에러좀 잡아주시면 감사드리겠습니다.^^ 좋은 하루 보내십시요.^^
<div class="TD_recent">
<s_more>
<div class="TD_more">
<div class="TD_more_title"><a href=""></a></div>
<span class="TD_more_btn"><a href="">더보기</a></span> </div>
</s_more>
</div>
<div class="TD_recent">
<s_list>
<div class="TD_thumblist">
<SCRIPT language=javascript type=text/javascript>
str = String('')
result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
imgSrc = result[1];
imgAlt = result[2];
if(imgSrc.lastIndexOf('imgempty.png') < 0) {
document.write('<div class="TD_thumbimg">');
document.write('<a href=""><img src="' + imgSrc + '" alt="' + imgAlt + '"></a>');
document.write('</div>');
}
</SCRIPT>
<div class="TD_headline">
<a href=""></a> <span class="TD_date"> </span>
</div>
<div class="TD_summary"><p></p></div>
</div>
</s_list>
</div>
스타일 CSS
.TD_thumbimg {
float:right;
margin: 5px;
padding:0;
}
.TD_thumbimg img{
max-width: 100px;
max-height: 100px;
width: 100px;
border: 1px solid #ccc;
margin:0;
padding:3px;
}
.TD_recent .TD_thumblist{
overflow:hidden;
margin:0px;
padding:5px;
}
.TD_recent .TD_thumblist .TD_headline{
clear:both;
font-weight:bold;
color:#000;
text-align:center;
}
.TD_recent .TD_thumblist .TD_summary{
padding:0;
text:center;
}
.TD_recent .TD_thumblist .TD_thumbnail{
border:5px solid #eee;
background-color:#eee;
padding:0px;
text-align:center;
}
그럼 잘 부탁드리겠습니다.^^
안녕하세요
올려주신 코드 상으로는 정렬하는 부분이 없네요.
제목과 시간은 .TD_recent .TD_thumblist .TD_headline 의 영향을 받고
내용요약은 .TD_recent .TD_thumblist .TD_summary 의 영향을 받습니다.
.TD_recent .TD_thumblist .TD_headline 의 맨 아래 text-align: center 에서 center 대신 left로 바꿔보시구요.
.TD_recent .TD_thumblist .TD_summary 의 맨 아래 text: center 는 아마 오타 같군요. 이것도 지워보시고 text-align: left로 바꿔보세요.
그럼 성공하시길...
호아범님이 말씀하신대로 수정하였으나 제 블로그를 오시면 아시겠지만 그림과 글이 서로 따로 놀고 있습니다. 괜히 귀찮게 해드리는 것 아닌지 죄송합니다만 호아범님의 HTML과 CSS 좀 알려주실 수 있으신지요. 안되신다면 제가 아래에 올린 코드에서 틀린부분 지적해주시면 감사하겠습니다.^^
<div class="TD_recent">
<s_more>
<div class="TD_more">
<div class="TD_more_title"><a href=""></a></div>
<span class="TD_more_btn"><a href="">더보기</a></span> </div>
</s_more>
</div>
<div class="TD_recent">
<s_list>
<div class="TD_thumblist">
<div class="TD_thumbimg">
<script type="text/javascript" language="javascript">
str = String('');
result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
imgSrc = result[1];
imgAlt = result[2];
if(imgSrc .lastIndexOf('imgempty.png') < 0) {
document.write('<div class="TD_thumbimg">');
document.write('<a href=""><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
document.write('</div>');
}
</script>
</div>
<div class="TD_headline">
<a href=""></a> <span class="TD_date"> </span>
</div>
<div class="TD_summary"><p></p></div>
</div>
</s_list>
</div>
/* 섬네일 목록형 모듈 */
.TD_thumblist{
padding:5px 0;
margin:5px 5px 10px 10px;
}
.TD_thumblist p{
padding:0;
margin:0;
letter-spacing:-1px;
}
.TD_thumblist .TD_headline {
font-size:1.1em;
font-weight:bold;
padding:0 0 0 10px;
text-align:center;
}
.TD_thumblist .TD_summary{
padding:0;
text-align:center;
}
.TD_thumblist .TD_thumbnail{
border:3px solid #eee;
}
/* 텍스트 목록형 모듈 */
.TD_list{
margin:5px;
}
.TD_list .TD_headline {
padding:0 0 0 20px;
font-size:1.2em;
line-height:1.2em;
background:url(../image/bull_listbig.gif) 0 2px no-repeat;
}
.TD_list .TD_date {
margin-left:5px;
font-weight:normal;
font-size:0.75em;
}
.TD_list .TD_summary {
display:none;
}
/* 앨범형 모듈 */
.TD_album{
margin:5px;
padding: 0 5px 5px 10px;
}
.TD_album img {
margin:0 10px 0 0;
}
.TD_album .TD_thumbimg .TD_thumbnail{
border:5px solid #eee;
}
.TD_album .TD_headline {
padding:0 5px 5px 0;
margin:0;
font-size:1.1em;
line-height:1.2em;
text-align:center;
}
/* 최신글 공통 */
.TD_recent .TD_thumbnail{
border:none;
}
/* 최신글의 더보기 */
.TD_more{
text-align:right;
padding:5px 5px 7px 5px;
margin:10px 5px;
color:#333;
border:1px solid #ddd;
background-color:#f5f5f5;
}
* html .TD_more{height:20px;}
.TD_more_title{
font-weight:bold;
float:left;
font-size:1.2em;
background:url(../image/ico_recent_title.gif) 0 0 no-repeat;
padding:0 0 0 25px;
}
.TD_more_btn{
font:0.9em dotum;
}
/* 최신글 텍스트 목록형 */
.TD_recent{
}
.TD_recent .TD_headline {
color:#000;
font-weight:normal;
padding:0;
font-size:1em;
}
.TD_recent .TD_list .TD_headline {
background:none;
}
.TD_recent .TD_list{
margin:5px;
background:url(../image/bull_rect.gif) 6px 9px no-repeat;
padding:3px 0 0 16px;
}
/* 최신글 섬네일 목록형 */
.TD_thumbimg {
float:right;
margin: 5px;
padding:0;
}
.TD_thumbimg img{
max-width: 100px;
max-height: 100px;
width: 100px;
border: 1px solid #ccc;
margin:0;
padding:3px;
}
.TD_recent .TD_thumblist{
overflow:hidden;
margin:0px;
padding:5px;
}
.TD_recent .TD_thumblist .TD_headline{
clear:both;
font-weight:bold;
color:#000;
text-align:left;
}
.TD_recent .TD_thumblist .TD_summary{
padding:0;
text-align:left;
}
.TD_recent .TD_thumblist .TD_thumbnail{
border:5px solid #eee;
background-color:#eee;
padding:0px;
}
/* 최신글 앨범형 */
.TD_recent .TD_album {
padding:0px;
margin:0 0 10px 0;
overflow:hidden;
text-align:center;
}
.TD_recent .TD_album .TD_thumbimg{
border:0;
padding:0;
margin:0 auto;
}
.TD_recent .TD_album .TD_headline {
height:14px;
overflow:hidden;
padding-top:4px;
}
/* 슬라이드형 */
.TD_slide{
margin:2px;
padding:0;
float:left;
}
.TD_slide .TD_thumbnail{
margin:0;
padding:0;
border:5px solid #eee;
}
.TD_slide img{
margin:0;
padding:0;
}
귀찮게 해드려서 죄송합니다. ㅜ.ㅡ
그림과 글이 따로 논다는게 무슨 말씀인가요?
잘 이해가 안가서요..
음... 호아범님 코드대로라면 그림과 글이 같이 정렬되어야 하는데
제가 해보면 그림은 그림혼자 위에서 정렬되고 그 밑에 글이 정렬됩니다.
한마디로 그냥 썸네일 목록형처럼 보이는데 그림만 오른쪽에 정렬된 것처럼 보입니다.
툴을 통해 살펴보면, 그림 부분에 적용된 최종 스타일이 아래와 같네요..
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
display: block;
float: none;
font-family: 돋움;
height: 110px;
line-height: 15px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 211px;
이대로라면 지금 보여지는 것이 맞습니다.
여기서 float이 none이 되었고, width가 211px가 되었는데, 이 값을 유발하고 있는 곳을 찾아서 제거해 주어야 할 것 같네요.
뭔가 값이 겹쳐진듯 합니다...
그리고 다시 살펴보니, 제 글 본문에 나온 스크립트 부분은 적용이 안되고 있네요.
소스보기로 함 봐보세요.