웹마스터 팁

  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)
목록
제목 글쓴이 날짜
[펌] Apache rewrite Module [8] ☜ TeRy ☞ 2008.02.22
XE에 맞춤법 검사기를 링크해보자! [2] 개돌 2009.05.14
[해결됨]첨부파일 등록이 안될때 (플래시 플레이어 버전문제) [29] [1] file 똑디 2008.10.27
한글도메인(.kr) 사용시 링크걸기 [3] serendip 2009.02.04
윈도우즈 서버2008에 설치하고 게시판에 대용량파일 업로드 안되시는 분들은... 헨리지 2009.07.04
주소록 구현 (외부 페이지) [17] CSLab 2008.09.15
1.2 업데이트후, 모듈 업데이트를 클릭해도 계속 업데이트 버튼이 남는 경우 [4] heesang 2009.03.27
게시글 본문 좌, 우측에 div 내용 넣기(수정) [5] file 라르게덴 2008.07.18
보낸 쪽지함에서 쪽지 내용 안에 회원 아이콘이 제대로 표시 되지 않을때.. 절망린 2009.06.24
쪽지 답글 보내기 원본 내용 삭제 절망린 2009.06.24
회원 확장 정보를 레이아웃에서 활용하기 [6] [1] file mooo 2008.05.06
개인쪽지발송!~ noirzo 2009.06.23
게시판 스킨에서 확장 변수에 값이 없을 경우 해당 항목 표시하지 않기 [6] SMaker 2009.05.04
사이트 접속시 자동으로 www. 붙어서 접속되게 하기 [9] 다케루 2008.10.08
게시물 읽을 때 하단에 목록 보이지 않게 하기 [3] 정은기 2007.09.17
XpressEngine 1.2.2용 배경음악 틀 [4] 마빈박사359 2009.05.10
확장변수 별로 작성 및 열람 권한 설정하기 [7] 대암지기 2008.10.11
스프링노트 연동기를 써 보았습니다. amyjang 2009.04.23
게시판 스킨에서 조회수, 추천수, 최근 수정일 외 항목도 정렬가능하게 하기 SMaker 2009.06.11
최근 이미지 출력 위젯에서 글 제목 출력을 선택항목으로 바꾸기 [6] 必得力 2007.10.17
태그 쓰기