나모 - 스크롤바 테이블 만들기

먼저 스크롤바소스가 있다고 생각하고 포토샵에서 테이블 이미지를 만든후

나모에서 스크롤바를 만드는 방법입니다

다른 방법도 있지만 여기서는 비교적 간단하게 만드는 방법을 설명하도록 하겠습니다

완전히 날림으로 설명드리는것이므로 ~~  너무 믿지는 마십시요

ㄴ ㅑ ㅎ ㅏ ㅎ ㅏ ~~~

 

스크롤바 소스는 ~~

 

<!-------1단일경우------------>

<STYLE>
BODY { scrollbar-3dlight-color:#0000FF;
scrollbar-arrow-color:#0000FF;
scrollbar-track-color:#FFFFCC;
scrollbar-darkshadow-color:#0000FF;
scrollbar-face-color:#FFFFCC;
scrollbar-highlight-color:#FFFFCC;
scrollbar-shadow-color:#FFFFCC}
</STYLE>

<style type="text/css">
#box1{width:000; height:000; overflow: auto; padding:7px; border:0 solid;}
</style>
<DIV id=box1 style="FILTER: chroma(color=#FFFFCC)">

<pre><font face="돋움" size="2" color="blue">
할말을 쓴다

.

.

.

할말을 쓴다

</font></pre></div>

 

<!---------2단일경우----------->

<STYLE>
BODY { scrollbar-3dlight-color:#0000FF;
scrollbar-arrow-color:#0000FF;
scrollbar-track-color:#FFFFCC;
scrollbar-darkshadow-color:#0000FF;
scrollbar-face-color:#FFFFCC;
scrollbar-highlight-color:#FFFFCC;
scrollbar-shadow-color:#FFFFCC}
</STYLE>

<style type="text/css">
#box2 {width:000; height:000; overflow:auto; padding:7px; border:0 solid;}
</style>
<DIV id=box2 style="FILTER: chroma(color=#FFFFCC)">

<pre><font face="돋움" size="2" color="blue">
할말을씀

.

.

.

할말을씀

</marquee></font></pre></div>

<!------3단일경우------->

<style type="text/css">
#box3 {width:000; height:000; overflow: auto; padding:7px; border:0 solid;}
</style>
<DIV id=box3 style="FILTER: chroma(color=#FFFFCC)">

<pre><font face="돋움" size="2" color="blue">
하고싶은말

.

.

.

하고싶은말

</font></pre></div>

 

우선 포토샵에서 테이블을 만들고 해당 테이블을 카페나 블로그 또는

개인계정에 올리고 해당 이미지를 오른마우스 클릭 - 속성 - 주소복사  합니다

 

 

이와같은 테이블 이미지를 포토샵에서 만들었습니다 ~~ 

이제  나모를 열어주시구요

 

 

나모를 열고 화살표 부분 클릭하여 대충 화면에 아무렇게나 드레그하여 위와같이 표를 그립니다

화살표 부분이 안보인다면 ;;

 

 

위와같이 레이이아웃 상자에 체크합니다

 

 

바탕화면에 오른마우스 클릭 - 레이아웃속성 으로 들어가시고 위와같은 상자가 뜨면

 

그림란에 아까 복사한 테이블이미지의 주소를 넣으시고

너비와 높이를 설정해줍니다

(해당 높이와 너비는 포토샵에서 만든 테이블이미지의 크기가 되겠습니다)

 

 

이와같이 되었구요

지금 현재 3단테이블입니다

 

 

빨간화살표 부분 선택하시어 포토샵에서 미리 만들어논 부분에서

1단 / 2단 /3단이 될부분을 드레그 하여 칸을 만들어 줍니다

그럼 해당 부분들이 왼쪽위부터 1단 밑에가 2단 그 옆에가 3단이 되겠습니다

 

 

화살표선택하시고 박스 그려준 부분에서 가운데 부분(빨강 동그라미)을 클릭합니다

커서가 깜빡이면 1단에는 숫자 1

2단부분에는 숫자2

3단에부분에는 숫자 3을 적어줍니다

 

이렇게 적어주는 이유는 구별하기 쉽게하기위해서입니다

 

 

1단~3단 모두 지정을 하였으면

하단에 HTML 클릭합니다

그럼무수히 많은 무언가가 나올것입니다

 

 

숫자 1을 찾습니다

해당 그곳이 스크롤바소스중에 1단 테이블이 들어갈위치 입니다

1을지우시고 1단스크롤바소스를 집어넣습니다

 

 

이렇게 1 있는 부분에 1단스크롤바소스를 집어 넣었습니다

 

 

그리고 파란박스 있는부분을 보시면 000으로 되어있습니다 이부분을

상단에 빨간박스 부분과 맞춰줍니다 ~~

왼쪽 width 는 180 height는 200 으로 맞춰줍니다

 

2단 도 마찬가지 복사해서 2 를 찾아 2를지운후 ~~집어 넣고

마찬가지로 width 와 height를 맞춰주시구요

 

3단도 마찬가지로 복사해서 집어넣습니다

마찬가지로 width 와 height를 맞춰줍니다

 

그럼 테이블은 완성이 된것이구요

글자 색깔및 크기 또는 위로 흐르게 옆으로 흐르게등도 있으나

이부분까지 설명할려면 길어질듯 하여 ~ 생략하고 ~~;;

 

 

하단에 미리보기 눌러줍니다

 

 

이와같이 정상적으로 보인다면

 

하단에 html 클릭하시어

해당 소스를 그대로 복사하시고

카페관리에서 대문소스에 올리면 테이블이 완성이 된것입니다

(카페대문에 올릴시 Html 체크!!)

 

나모에서 만들시에 다른방법도 있습니다만 아마도 이방법이 제일 간단하고 쉬울듯싶네요

어차피 설명드린것도 날림으로 ;; 으로 설명드렸습니다 쿨~럭 ~~

 

완성작

기다림 스킨 테이블