도쿠위키 WRAP 플러그인의 응용

도쿠위키의 WRAP 플러그인(https://www.dokuwiki.org/plugin:wrap)은 박스를 쉽게 만들어 주는 플러그인이다.

단순한 디자인 표현부터 문단 정렬, 표 내부의 리스트를 삽입하는 용도 등으로 활용할 수 있다. 자세한 설명은 위 링크로 대신한다.

기본 설명 :

1. <WRAP>와 </WRAP>로 둘러쌓인 부분은 div로 지정되어 기본으로 plugin_wrap라는 이름의 class를 가진다.

2. <WRAP> 안에 들어가는 단어에 따라 추가로 붙는 class가 달라진다.

3. 붙여진 class 명에 맞는 디자인(css)이 표현된다.

예)

<WRAP test>와 </WRAP>로 둘러쌓인 부분은 div로 지정되어

class는 기본적으로 붙는 plugin_wrap와 wrap_test를 가진다.

<div class="wrap_test plugin_wrap">

내용

</div>

즉, class에 plugin_wrap는 기본으로 붙고 wrap_(단어) 형태의 class가 추가로 붙는다.

기본 활용 :

<WRAP test>로 시작하고 css에

.dokuwiki .wrap_test {font-family: Dotum, Gulim, Tomaha;font-size:11px;line-height:130%;float:right;width:25%;margin:0 0 0 15px;} // 기본적인 스타일 설정

.dokuwiki .wrap_test .row0 td{background-color:#fff;padding:10px;} // 표가 삽입되었을 경우 스타일 설정

.dokuwiki .wrap_test .row0 td:hover{background-color:#fff;} // 표가 삽입되었을 경우 스타일 설정2
.dokuwiki .wrap_test .media{width:100%;margin:0;padding:0;} // 안에 이미지가 존재할 경우 스타일 설정

등과 같이 스타일을 지정하면?

한 번 css에 등록해두면 단순히 <WRAP test>같이 적는 것만으로 정해진 디자인 형태의 박스, 표, 이미지 등을 만들 수 있다.

응용 :

jQuery(function($){
$(document).ready(function () {
if($(".wrap_test").length>0){

// $("#dw__toc").width("30%");
// $(".wrap_test").width("90%");
// $(".wrap_test").css("margin","0 auto");
var $test = $(".wrap_test").clone(); //wrap_test라는 클래스을 가진 div의 클론을 만들어 변수에 저장한다
$(".wrap_test").remove(); //원래 있던 .wrap_test div를 지운다
$test.appendTo('#dw__toc'); //원하는 위치에 박는다
};
});
});

위 스크립트는 wrap_test 라는 클래스를 가진 개체를 목차(#dw__toc) 내부의 하단 부분에 박는 스크립트이다.

위처럼 자바스크립트를 이용해 일반적으로 위치할 수 없는 부분에 원하는 내용을 박아넣을 수 있다.

사용 전

사용 후

※ //로 주석처리 된 부분은 해당 id, class 이름을 가진 개체의 css를 제어하는 것으로,

아예 자바스크립트가 적용 된 상황을 가정하고 css를 코딩하면 자바스크립트가 적용되지 않는 상황에 디자인이 깨져보일 수 있으니 주의해야한다.

자바스크립트가 적용되었을 때 적용할 css를 지닌 class를 만들어놓고, class를 부여하는등 방법은 많다.

위 기능들은 위키피디아의 틀 기능과도 비슷한데, css와 js등을 직접 수정해야 함으로 일반 사용자는 직접 등록할 수 없다는 단점이 있다.

하지만 소규모 위키의 경우 이러한 점은 오히려 장점으로 작용하며, ★편집 난이도를 낮추고 디자인의 통일성을 줄 수 있다.★
자바스크립트 활용과 WRAP 플러그인을 활용하는 창의성이 포인트이다.