최근 게시물 추출 모양은 제목형,내용형,앨범형,블로그형,상품형 이렇게 5가지가 있는데요.
이중 앨범형과 상품형은 2단추출로 설정해도 이미지추출 부분이 겹쳐서 나오기때문에 의미가 없을 거 같아서
제목형, 내용형, 블로그형 3가지 형태만 2단으로 보여지게 하는 CSS를 소개합니다.
예시홈페이지 : http://lovecss.ohpy.com/
1.
'홈페이지관리 > 대문' 에서...
페이지 하단의 '최근 게시물' 항목을 보면 추출할 게시판의 순서나 형태를 지정할 수 있습니다.
여기에서 2단으로 추출할 게시판을 '제목형 or 내용형 or 블로그형'으로 지정합니다.
2.
'홈페이지관리 > 디자인관리 > 구성요소CSS' 에서...
HTML1 CSS에 아래의 style을 추가합니다.
/* 게시물 추출 2단 CSS */
.elxtr .xtr-wrap { clear:none; float:left;}
.elxtr .type-subject { width:355px; height:170px; overflow:hidden; padding-right: 10px;} /* 제목형 */
.elxtr .type-content { width:355px; height:170px; overflow:hidden; padding-right: 10px;} /* 내용형 */
.elxtr .type-blog { width:355px; height:170px; overflow:hidden; padding-right: 10px;} /* 블로그형 */
[추가팁]
제목이 길어졌을때에도 깨지는 것을 방지하고 싶거나 댓글수,new아이콘을 가리고 싶으신 분들은
선택적으로 아래 CSS를 추가하시면됩니다.
.elxtr .type-subject .xtr-subject { height:15px; width:200px; overflow:hidden; } /* 제목형: 제목영역 크기 고정 */
.elxtr .type-subject .xtr-reply { display:none; } /* 제목형: 댓글 출력 숨김*/
.elxtr .type-subject .icon-new { display:none; } /* 제목형: new 아이콘 출력 숨김*/
※ style에 들어간 설정값(width,height,padding 등)은 홈페이지에 맞게 넣어주세요.
※ height값을 지정한 높이를 넘어서면 추출된 게시물이 자동으로 숨겨지게 설정되어있습니다.
[참고하세요!]
게시물추출에 쓰이는 CSS를 'HTML1구성요소'의 CSS에 넣는 것을
조금 의아스럽게 생각하시는 분이 있을 것 같아 말씀드립니다.
우선 대문의 게시물추출 부분의 CSS는 공개되어 있지 않은 상황이라
정확히 말하자면 현재 오피 홈페이지관리에는 게시물추출의 CSS 항목이 없는 상태입니다.
하지만 CSS는 <style>태그 안에만 들어가면 소스상에 지정된 class나 id에 일괄 적용시키기 때문에
'구성요소CSS'의 아무 곳에나 추가해도 스타일이 적용됩니다.
하지만 HTML구성요소의 CSS 항목에 넣는 것이 CSS충돌방지나 CSS관리 등을 위해 여러모로 좋습니다.
만약 '구성요소CSS'에 HTML항목이 없으면 '구성요소레이아웃'에서 HTML 항목을 추가하세요.
P.S.
미니멀남색 스킨에 맞춘 CSS 라서 스킨에 따라 안될 수도 있습니다.
해보시고 안되시면 사용스킨을 댓글에 적어주세요. 더 연구해보겠습니다.
P.S. 2008-07-18
몇몇분들의 요청으로 내용(제목길어졌을때 깨짐 방지, 댓글수 숨김, 아이콘 숨김)을 보완하였습니다.
