웹마스터 팁
게시글 본문 좌, 우측에 div 내용 넣기(수정)
2008.07.18 12:55
가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 간나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라 가나다라위와 같은 식으로 본문에 이미지를 좌,우측에 붙게해서 자연스러운 글씨는 사용가능하지만
div 같이 특정 메뉴등을 추가해서는 안되죠.
이걸 본문안에도 div 를 사용할 수 있게 해주는 방식을 알려드릴까 합니다.
먼저 view_document.html 에 아래 코드를 삽입하세요.
-- 기본스킨 기준입니다. --
경로 : ./modules/board/skins/xe_board/view_document.html
<div class="readBody">
<div class="contentBody">
<!--@if($oDocument->isSecret() && !$oDocument->isGranted())-->
<!--%import("filter/input_password.xml")-->
<div class="secretContent">
<form action="./" method="get" onsubmit="return procFilter(this, input_password)">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="page" value="{$page}" />
<input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
<div class="title">{$lang->msg_is_secret}</div>
<div class="content"><input type="password" name="password" id="cpw" class="inputTypeText" /><span class="button"><input type="submit" value="{$lang->cmd_input}" accesskey="s" /></span></div>
</form>
</div>
<!--@else-->
<div id="임의 특정ID_{$oDocument->document_srl}" class="임의 className">입력될 내용</div>
{$oDocument->getContent()}
<!--@end-->
<div class="clear"></div>
</div>
$oDocument->document_srl를 입력해서 블로그나 다른 처리시 충돌이 나지 않게 합니다.<div class="contentBody">
<!--@if($oDocument->isSecret() && !$oDocument->isGranted())-->
<!--%import("filter/input_password.xml")-->
<div class="secretContent">
<form action="./" method="get" onsubmit="return procFilter(this, input_password)">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="page" value="{$page}" />
<input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
<div class="title">{$lang->msg_is_secret}</div>
<div class="content"><input type="password" name="password" id="cpw" class="inputTypeText" /><span class="button"><input type="submit" value="{$lang->cmd_input}" accesskey="s" /></span></div>
</form>
</div>
<!--@else-->
<div id="임의 특정ID_{$oDocument->document_srl}" class="임의 className">입력될 내용</div>
{$oDocument->getContent()}
<!--@end-->
<div class="clear"></div>
</div>
-----------------------
CSS의 경우는 아래 해당하는 내용을 경로상의 파일에 아무(알맞은) 위치에 추가해주세요.
경로 : ./modules/board/skins/xe_board/css/common.css
.임의 className {float:right; width:200px; height:200px;}
그밖에 임의 className 안에서 따로 사용할 스타일을 만드셔도 무관합니다.
---------------
일단 이 두개로 끝났습니다.
헌데, 위에까지만 해놓으면 이미지 사진이 들어가고 이미지가 클경우에 문제가 생깁니다.
원래 본문 넓이보다 이미지가 크면 zbXE 기본 애드온인 리사이즈 애드온으로 이미지가 줄죠
헌데 그렇게 줄어도 만들어 놓은 div로 인해서 균형이 깨지고 맙니다.
이 부분을 자연스럽게 div의 가로세로 크기에 맞춰서 알맞게 리사이즈를 수정해주는 내용도 추가해주세요.
경로 : ./addons/resize_image/js/resize_image.js
resizeImageContents() 함수 중 아래의 내용을 삽입,수정하세요. (약 29번째 줄 부터...)
// if(parent.parentNode) xWidth(parent, xWidth(parent.parentNode));
// parent.style.width = '100%';
// parent.style.overflow = 'hidden'; <- 이곳 주석 처리 해주세요.
var parent_width = xWidth(parent);
if(parent.parentNode && xWidth(parent.parentNode)<parent_width) parent_width = xWidth(parent.parentNode);
var obj_width = xWidth(obj);
var obj_height = xHeight(obj);
var rgExp = /\d+/;
var chr_var = parent.className.match(rgExp);
var citem = {};
citem.id = xGetElementById('임의 특정ID_'+chr_var);
if(citem.id){
citem.width = citem.id.offsetWidth;
citem.height = citem.id.offsetHeight;
citem.top = citem.id.offsetTop;
citem.left = citem.id.offsetLeft;
citem.down = citem.top + citem.height;
parent_width -= (obj.offsetTop > citem.down)? 0:citem.width;
}
// 만약 선택된 이미지의 가로 크기가 부모의 가로크기보다 크면 리사이즈 (이때 부모의 가로크기 - 2 정도로 지정해줌)
if(obj_width > parent_width - 2) {
중략.....
위와 같이 내용을 추가하게 되시면 만들어 놓으신 div의 사이즈를 더 계산해서 이미지 파일을 리사이징 합니다.// parent.style.width = '100%';
// parent.style.overflow = 'hidden'; <- 이곳 주석 처리 해주세요.
var parent_width = xWidth(parent);
if(parent.parentNode && xWidth(parent.parentNode)<parent_width) parent_width = xWidth(parent.parentNode);
var obj_width = xWidth(obj);
var obj_height = xHeight(obj);
var rgExp = /\d+/;
var chr_var = parent.className.match(rgExp);
var citem = {};
citem.id = xGetElementById('임의 특정ID_'+chr_var);
if(citem.id){
citem.width = citem.id.offsetWidth;
citem.height = citem.id.offsetHeight;
citem.top = citem.id.offsetTop;
citem.left = citem.id.offsetLeft;
citem.down = citem.top + citem.height;
parent_width -= (obj.offsetTop > citem.down)? 0:citem.width;
}
// 만약 선택된 이미지의 가로 크기가 부모의 가로크기보다 크면 리사이즈 (이때 부모의 가로크기 - 2 정도로 지정해줌)
if(obj_width > parent_width - 2) {
중략.....
또한 height 크기까지 계산해서 div 와 가로상에 걸리지 않는 경우는 원래 리사이징을 합니다.
댓글에도 이 기능을 비슷하게 적용하셔도 무관합니다. (단 div를 댓글 본문 출력 내용 바로 위에 넣어주셔야 합니다.)
위와 같이 해두면 div 내용안에 좌,우측에 넣을 위젯 등을 본문안에 넣어서 3단 위젯 이나 위젯보다 본문이 길 경우
좌,우측 메뉴가 무의미하게 휭~ 하게 보이지 않아서 좋은 것 같습니다.
태그 연관 글
- [2015/11/06] 묻고답하기 Board DX 본문 입력을 없애는 방법 알 수 있을까요?
- [2014/04/15] 묻고답하기 div height값 동적으로 변경하도록 만들고 싶습니다. *8
- [2012/02/23] 묻고답하기 본문 자르기를 하고 싶어요 *2
- [2011/02/16] 묻고답하기 본문 글자 확대축소 기능 - XE에서는 이 기능 구현에 어려움이 있나요? *1
- [2010/11/11] 묻고답하기 본문 삽입 배너를 제거할려고 하는데....
댓글 5
-
토니박스
2008.07.18 17:13
-
만들어 달라는 거군요. 스킨을... (쿨럭;;)
나중에 저거 포함해서 신기한(?) 스킨을 만들고 있으니 완성되면 올려봐야겠군요...( 먼 훗날 ) -
토니박스
2008.07.18 20:19
님 눈치가.;;ㅡㅡ 100단 ㅋㅋ -
저도 이런게시판이 필요한데 없더군요 질문도 여러번 올려봤구요 기다릴께요^^
소스수정은 너무 어려워요~~~ -
tnfla
2008.07.27 09:29
그런게시판있음 쨩이져
제가 잘모르는지는 몰라두요, 저뿐만이 아니라 많은 분들이 리뷰"들을 많이 하시는거 같습니다
책/영화/사진/여행...등등
저같은 경우는 "음악(팝가수리뷰)"가 약 4000개인데요 . .
리뷰게시판"스킨으로 기본 제작되었으면 하는 간절한 바램이랍니다
(-초보자들은 뭘 손대놓으면 xbxe버전 업글할때 마다,; 심장이 떨려서.;;ㅋㅋ)
수고하셨습니다.