웹마스터 팁

  2. Support
  3. 웹마스터 팁

게시글 본문 좌, 우측에 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를 입력해서 블로그나 다른 처리시 충돌이 나지 않게 합니다.

-----------------------
CSS의 경우는 아래 해당하는 내용을 경로상의 파일에 아무(알맞은) 위치에 추가해주세요.
경로 : ./modules/board/skins/xe_board/css/common.css

.임의 className    {float:right; width:200px; height:200px;}

float,width,height는 꼭 넣어 주시고 float는 좌측에 띄울려면 left 우측에 띄울꺼면 right 로 써주세요.
그밖에 임의 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의 사이즈를 더 계산해서 이미지 파일을 리사이징 합니다.
또한 height 크기까지 계산해서 div 와 가로상에 걸리지 않는 경우는 원래 리사이징을 합니다.

댓글에도 이 기능을 비슷하게 적용하셔도 무관합니다. (단 div를 댓글 본문 출력 내용 바로 위에 넣어주셔야 합니다.)



위와 같이 해두면 div 내용안에 좌,우측에 넣을 위젯 등을 본문안에 넣어서 3단 위젯 이나 위젯보다 본문이 길 경우

좌,우측 메뉴가 무의미하게 휭~ 하게 보이지 않아서 좋은 것 같습니다.


태그 연관 글
  1. [2015/11/06] 묻고답하기 Board DX 본문 입력을 없애는 방법 알 수 있을까요? by 주시제
  2. [2014/04/15] 묻고답하기 div height값 동적으로 변경하도록 만들고 싶습니다. by DOUBLEP *8
  3. [2012/02/23] 묻고답하기 본문 자르기를 하고 싶어요 by YO-DA *2
  4. [2011/02/16] 묻고답하기 본문 글자 확대축소 기능 - XE에서는 이 기능 구현에 어려움이 있나요? by 빨간발 *1
  5. [2010/11/11] 묻고답하기 본문 삽입 배너를 제거할려고 하는데.... by 김서원
, , , 이 게시물을
Profile
좋아요(+1)
목록
제목 글쓴이 날짜
업그레이드 쉽고,안전하게 하기(예제 포함해서 다시 올림) [2] file wannabewize 2008.07.13
에디터입력창 배경색상(이미지) 변경해보기 [5] [1] 팔공산 2008.07.13
초보 헤메다가 팁//인쇄영역 확장변수 포함 [8] file 리히토 2008.07.14
초보 헤메다가 팁//검색기능 보이기 감추기 [3] file 리히토 2008.07.15
자료 첨부 문제 단풍534 2008.07.15
초보 헤메다가 팁//댓글기능 보이기 감추기 [5] 리히토 2008.07.15
winxp IE7 rwapm에서 한글이름파일 업로드 [7] file 공수래 2008.07.15
게시글 본문 좌, 우측에 div 내용 넣기(수정) [5] file 라르게덴 2008.07.18
게시판(블로그)상단에 글쓰기버턴이나 링크넣기 [8] file 팔공산 2008.07.20
관리자만 ip 보이게 하기 [10] 老姜君 2008.07.20
로그인이 안되는 문제 [1] 젝망치 2008.07.21
로컬 설치 후 몇가지 문제점에 대해서 - 인덱싱. DB선택 등 서정일643 2008.07.22
본문의 서명과 프로필이미지를 끌어올려보자 [11] file CL님 2008.07.22
초간단! 게시물주소 클릭시 복사하기 ! [4] file gnee 2008.07.26
제로보드XE에서 표 쉽게 만드는 방법.. [23] 청개구리00 2008.07.27
코멘트를 달아야만 첨부파일 다운로드 할 수 있게 하기 [8] file 지오426 2008.07.29
제로보드XE 설치 완료버튼 누르니까 My sql 관련 내용 나오던데요 [3] Naver™ 2008.07.30
1.0.3 버전 이상부터 본문 내 이미지 자동 리사이징이 안되는 경우 [1] kirrie 2008.08.01
1원팁) 톱메뉴를 제거하고 왼쪽 서브메뉴만 출력하는 방법 [2] file Gnee 2008.08.02
제로보드 문자열 정교하게 자르기 [11] 젝망치 2008.08.03
태그 쓰기