TECHNOTE-TOP 도움말

TECHNOTE-TOP (2002.11)
BOARD 관리설정 도움말 프린트 하기

이하의 설명에서 BOARD 라 함은 테크노트 프로그램 내에 생성된
여러 게시판류를 각각 구분지어 지칭하는 것이며,
TECH-NOTE 라 함은 이 각각의 게시판류를 모두 포함하고 있는
CGI프로그램 전체를 의미합니다. (설정항목 번호나 특정단어를 찾을 때는: Ctrl + F)

▷▶▷▶ 0, 색상, 패턴 설정◀◁◀◁

용도 - [글목록] , [본문출력] , [글쓰기] 페이지의 색상/패턴 요소를 지정한다

▨ 글자색은 16진수 색상코드(예: #FACCD6)나 색상이름(예: BLACK)으로 지정해야 한다.
▨ 바탕색은 색상표의 색상이름이나 바탕 이미지의 url경로를 지정할 수 있다.(아래설명)

※바탕색, 바탕그림 지정하는 여러가지 방법※

방법1. 일반적인 16진수 색상번호를 입력하는 방법(예, #ff87aa , #aaaa00 , ...)

방법2. 색상 이름으로 지정하는 방법(예, yellow, black, red, blue ... )

방법3. 패턴그림의 url을 입력하는 방법--
a. 전체 url로 지정 (예, http://abc.net/abcd/img/pattn1.gif )
b. 상대경로로 지정 (예, ../img/pattn1.gif )
상대경로는 main.cgi파일 기준이다.
(' ./ ' 는 현재 디렉토리, ' ../ ' 는 한단계 상위디렉토리를 의미)
c. 홈 디렉토리기준 절대경로지정(예, /myhomeimg/img/pattn1.gif )

위와 같이 바탕패턴 그림을 지정하면 이미지가 반복출력되어
바탕을 메꾸게 되는데, 만약 반복출력이 아닌 한번만 출력되게 지정하려면
지정값 뒤에 한칸띄고 'no-repeat' 를 붙여 주면 된다
(예, http://abc.net/abcd/img/pattn1.gif no-repeat)

'no-repeat' 외의 다른 CSS스타일 옵션을 추가하려면
아래의 '글자색 지정' 항목의 설명 참조

방법4. ' ./image/userimage ' 디렉토리내의 파일을 지정하는 방법--
원본프로그램에 포함되어 있는 이미지파일 디렉토리들 중에
'./iamage/userimage' 디렉토리가 있다.
이 userimage 디렉토리는 사용자를 위해 준비된 디렉토리이다.
이 디렉토리내의 이미지 파일을 디자인에 적용 시키려면
^file.gif 와 같이 간단히 입력해 주면 된다.
즉, '^img1.gif'는 './image/userimage/img1.gif' 와 동일한 의미를 가진다.
패턴이미지나 아이콘 파일을 이 디렉토리내에 올린 후 해당 파일의 이름에
' ^ ' 을 붙여서 이와같이 간단히 지정해 주면 된다.
또한 ' ./image/userimage ' 디렉토리 하위에 또다른 사용자정의 디렉토리를
만들어 사용해도 된다. 즉, ' ./image/userimage/myimg/' 라는 디렉토리를 만들고
^myimg/abc.gif 와 같은 식으로 지정하면
' ./image/userimage/myimg/abc.gif ' 와 같은 경로로 인식된다.
위 3번의 설명처럼 전체 url 경로를 입력해도 똑같은 결과를 가지지만
^를 사용하면 훨씬 더 관리설정이 쉬워질 것이다.
특히 테마를 작성할때 다른곳의 테크노트에서도 적용이 가능하게 하려면
이 방법을 사용하는 것이 좋다.

방법5. 아무색도 지정하지 않고자 할땐 그냥 공백으로 비워준다.
이 경우 해당 지정항목의 바탕색상은 상위 바탕색을 승계하게 된다.

"테이블-셀([0-6]~[0-15])" 을 지정하지 않은 경우
[0-6]~[0-15] 은 "[0-4] 테이블 셀- 색상교차 or 그라데이션" 에서
지정한 색을 승계하게 된다.

"[0-4] 테이블 셀- 색상교차 or 그라데이션" 이 지정되어 있지 않다면
[0-4]는 "[0-2] 테이블 기본 바탕색" 색을 승계하게 된다.

"[0-2] 테이블 기본 바탕색" 도 지정되어 있지 않다면
[0-2]는 "[0-1]Main페이지 바탕색" 을 승계하게 된다.

이 승계 계통을 순서대로 열거하면,
[0-1] > [0-2] > [0-4] > 테이블-셀([0-6]~[0-15]) 와 같다.

※ 글자색 지정 방법※
16진수 색상번호(예, #ff87aa , #aaaa00 , ...)로 지정하거나
색상 이름으로(예, yellow, black, red, blue ... ) 지정한다.

[0-6 ~ 0-16] 의 색상지정 해당셀에 CSS스타일지정 옵션을 추가하려면
글자색 지정값 뒤에 세미콜론(;)을 붙여주고 스타일 옵션을 추가하면 된다.
예를 들어 "[0-9] Main테이블 셀 - 제 목" 의 글자색 지정란에
#ff0000; font-family:궁서; font-weight:bold; font-size:13pt; 라고 입력했다면
글 목록내의 글 제목글자는 이런 글자체/색상/크기 로 출력된다.
글자스타일에 외의 해당 항목(셀)에 적용될 다른 스타일 코드를 추가해도 된다.

※ 항목별 세부 설명 ※
위 설명은 모든 색상설정항목에 적용가능한 공통된 방법이고,
각 항목마다 다른 설정방법이 또 있으니 아래 내용을 필독할 것

[0-1] Main페이지의 바탕색, 글자색 - Main 출력페이지의 색상을 지정한다.
위에서 설명한 여러 가지 방법으로 각 입력항목에 바탕색,바탕그림, 글자색등을 지정 할 수 있다.
또는 그냥 스타일코드를 바로 입력해 주어도 된다.
예, style="background:white url(http://abcdef.co.kr/img/poem.gif) no-repeat fixed center top);"

  좀더 세부적인 지정이 필요하다면 [관리설정]-[3-19] 항목에 다음과 같은식으로
   CSS 스타일 코드를 넣어 지정해도 된다.
            <style type='text/css'>
                BODY,TR,TD{ font-size:12pt; font-family:궁서체; background-color:#668acd;}
                A:link {color:#ff0000; text-decoration:none;}
                A:visited {color:#666677; text-decoration:none;}
                A:hover {color:#ff5500; text-decoration:underline;}
                BODY{ scrollbar-face-color: #eeeef3;
                          scrollbar-shadow-color: #777777;
                          scrollbar-highlight-color: #777777;
                          scrollbar-3dlight-color: #ffffff;
                          scrollbar-darkshadow-color: #ffffff;
                          scrollbar-track-color: #f5f5f5;
                          scrollbar-arrow-color: #555555;
                          margin:3;
                          background-color:#aaaaaf;
                        }
            </style>

[0-2] 테이블 기본 바탕색 - Main 목록 테이블의 전체바탕색을 지정한다.
지정방법은 위 [0-1]번 항목과 동일하다. 색상및 배경그림을 지정할 수 있다.
바탕이미지를 지정한경우 그 이미지는 반복출력되어 지정된 바탕영역을 메꾸게 되는데
만약 반복출력이 아닌 한번의 출력만 원한다면
바탕이미지를 CSS스타일로 지정 입력해 주면 된다.
지정예,
style="background-image:url('http://abcd.com/img/abcd.gif'); BACKGROUND-REPEAT: no-repeat;"
위와 같이 지정할경우 다른 style 옵션을 계속 추가해도 된다.

게시판 바탕색을 지정하면서 게시판을 반투명하게 하려면 아래와 같이 CSS 스타일로
지정하고 filter:alpha(opacity=67); 옵션을 추가해 주면된다.
지정예, style="background-color('#008800'); filter:alpha(opacity=67);"
숫자 67 은 투명도를 나타낸다. 더 높거나 낮게 지정해도 된다.

[0-2-1]] Main테이블 테두리 - 'Line색' & 'Line두께'--
Main 글목록 테이블에 테두리 라인을 지정한다.
테두리 라인색은 색상표의 16진 색상이름으로 지정하며,
라인두께는 숫자로 지정 한다.

[0-3]] Main테이블 셀- 'Line색' & 'Line스타일'
▨ Line 색 - Main 테이블의 라인색을 지정한다.
'색상' 으로만 지정 가능하며 '패턴이미지'는 지정 할 수 없다.
예1 => #000000 , #ea7830 , blue , green

▨ 스타일 - 라인 형태를 선택지정 한다.
눈모양 아이콘 클릭하면 라인 형태를 확인 할수 있다.

<어두운 배경에서의 라인색 지정>
라인형태를 'style-A' 나 'style-E' 로 지정한 경우 , 어두운 배경 위에서는
라인의 흰색 부분이 뚜렷이 나타나서 보기가 어색하게 되는데
[0-3]에서 라인색 지정을 #667777:#000000 와 같은 형식으로
흰색 부분을 배경색과 같게 지정해서 해결하면 된다.
예를 들어 [0-1] 항목에서 전체 페이지 바탕색을 검정(#000000) 으로
지정하고, [0-3]의 라인색 지정에 #dddd22 만 지정한 경우와
#dddd22:#000000 를 지정한 경우의 차이점을 살펴 보면 알 수 있다.

[0-4] 테이블 셀 색상교차 or 그라데이션(단계적 색상변화) 지정하기 -
Main 목록 테이블의 셀 바탕색을 교차 지정하거나,
그라데이션(단계적 색상변화) 색상범위을 지정한다.

*[교차지정] - 색상과 색상 사이는 ':' 으로 구분해 준다.
16진수 표기 색상번호 또는
색상이름('yellow' , 'blue' , 'red' 등...) 으로 지정해도 된다.
교차색 지정예 1 => #dddddd:#ffffff
교차색 지정예 2 => #ffff00
교차색 지정예 3 => #87d5dd:#33aa67:#ddff55
교차색 지정예 4 => blue:#33aa67
교차색 지정예 5 => yellow:red:#a7eeb3

*[그라데이션 지정] - 색상과 색상 사이는 '~' 으로 구분해 준다.
16진수 표기 색상번호로 지정한다.
색상이름('yellow' , 'blue' , 'red' 등...)으로는 지정 할수 없다.
그라데이션 지정예 1 => #000000~#ffffff
그라데이션 지정예 2 => #55da34~#ffbb44
그라데이션 지정예 3 => #93fa33~#ffff00

[0-5] 테이블 셀 onMouseOver 색 -
글목록에 마우스커서를 올렸을때 변화될 색상을 지정한다.
색상변화를 아예 적용되지 않게 하려면
입력내용을 지우고 대신 스페이스만 2~3 개 입력한다.

[0-6] 테이블 셀 | STYLE | SORT | REVERSE -

[0-7] 테이블 셀 |번호|글제목|이름|조회| -

[0-8] 테이블 셀 번 호 -

[0-9] 테이블 셀 제 목 -

[0-10] 테이블 셀 이름,평가,나이,체크박스 -

[0-11] 테이블 셀 작성일,성별,직업 -

[0-12] 테이블 셀 조회, 파일명 -

[0-13] 테이블 셀 항목추가 A,C,E -

[0-14] 테이블 셀 항목추가 B,D,F -

위의 지정 항목(0-6 ~ 0-15)의 해당 셀에 스타일 지정을 추가 하려면
글자색 지정 뒤에 세미콜론( ;) 을 붙여 주고 뒤에 style옵션을 추가하면 된다.
예를 들어 "[0-9] Main테이블 셀 - 제 목" 의 글자색 지정란에
#ff0000 ; font-family:궁서 ; font-weight:bold; font-size:13pt ; 라고 입력했다면
글 목록내의 글 제목글자는 이런 글자체/색상/크기 로 출력된다.

[0-16] 검색어 입력필드, Select옵션 메뉴 색상 -
Main페이지와 본문출력페이지내의 [텍스트 입력필드]와
[select옵션 메뉴(풀다운)] 색상을 지정한다.
이 지정은 '익스플로러' 부라우저에서만 유효하다.
'색상' 으로만 지정가능하며 '패턴이미지'는 지정 할 수 없다.

[0-17] Submit 버튼 색상 - STYLE/SORT및 DELETE의 'ENTER' 버튼색

[0-18] 메인버튼 테두리 라인색-
메인글목록 페이지및 본문출력페이지의 하단에 출력되는
메인버튼 아이콘의 테두리 라인색을 지정한다.
버튼 아이콘에 마우스를 올렸을때 테두리라인이 보여지게 된다.

단색으로 지정하려면 색상이름 하나만 지정하고(예, #ffaa23)
두가지 색을 지정하려면 색상이름 두개를 ':' 로 구분지어 입력한다.(예, #ffaa23:#0045ff)

만약 페이지 바탕이 흰색이 아니라면 메인 버튼의 아이콘에 흰색 테두리선이
보이므로 보기가 않좋을 것이다, 이때는 #ffaa23:#0045ff 와 같이 두가지 색을 지정하되
앞에 지정항 색을 페이지 바탕색과 같게 지정하여 흰색테두리를 감추면 된다.

테두리선을 아예 없게(안보이게) 하려면 페이지 바탕색과 같은 색을 지정하면 된다.

[0-19] 본문출력 박스내의 설정 - 본문출력페이지내의 본문출력 공간(박스)의 설정

[글자색]- 본문 박스내에 출력되는 전체 글자색 지정

[상단 바탕색 ] - 본문 박스 상단부분에 출력되는
* 이름, 날자, 작성일 등이 출력되는 부분의 바탕색을 지정한다.
* 색상지정만 가능하며 패턴이미지는 지정할수 없다.
(지정예: #5555ff , yellow , #ee26a7)
* 아무색도 지정하지 않으려면 스페이스만 한칸 입력할 것

[본문 바탕색]-본문 출력 박스내의 전체 '바탕색' 혹은 '바탕패턴' 을 지정
*바탕색상지정예 - #ffffff
*바탕색상지정예 - white
*바탕패턴이미지 지정예: http://abcde.net.com/img/pattern1.gif
*바탕패턴이미지 지정예: http://abcde.net.com/img/pattern1.gif no-repeat
*바탕패턴이미지 지정예: style="background-image:url('http://abcd.com/img/abcd.gif'); BACKGROUND-REPEAT: no-repeat;"
(no-repeat 를 지정할경우 패턴이미지는 반복출력되지않고 한번만 출력됨)

[테두리선색] - 본문내용을 감싼 테두리선 색을 지정한다.
* 아무색도 지정하지 않으려면 스페이스를 대신 입력한다.
* 테두리선을 점선으로 지정하려면 [테두리선색] 지정란에는 스페이스만 두어개 입력하고
본문 바탕색 지정란에다가 style='border:1 dotted #CB4F81' 식으로 입력해주면 된다.

[작은 아이콘] - 본문출력 상단의 작성자,메일,홈페이지 주소 앞에 출력되는 아이콘
작성예1 - <img src=http://abcd.com/img/icon.gif border=1>
작성예2 - ^icon.gif
(...technote/image/userimage/icon.gif 일 경우의 예)
작성예3 - http://abcd.com/img/icon.gif
작성예4 - ★ (직접 그림문자나 htm 태그를 입력해도 된다.)
작성예5 - 아이콘 출력을 없애려면 입력란에 스페이스를 대신 입력한다.

[제목아이콘] - 본문글의 글제목 앞에 출력되는 아이콘
작성형식 - 위와 동일

[본문 줄간격]-본문출력 라인 간격을 지정한다.

[0-20] 글쓰기 테이블 타이틀바 - 글쓰기 테이블 타이틀바 색

[0-21] 글쓰기 테이블 바탕색 - 글쓰기 테이블의 전체 바탕색

[0-22] 글쓰기 테이블 테두리색 - 글쓰기 테이블의 테두리색

[0-23] 글쓰기 입력필드 - 글쓰기 텍스트 입력필드 내의 색

[0-24] 글쓰기 입력필드 테두리 - 글쓰기 텍스트입력필드 테두리색

입력항목의 설정값을 완전 삭제하고 설정 저장하면, 기본값으로 자동 대체됩니다.
만약, 어떤 설정항목에 아무것도(기본값 까지도) 적용되지 않게 하려면
입력내용을 삭제하고 스페이스(공백)를 대신 입력해 넣으면 됩니다.

통합기능CGI 테크노트-TOP
■ 온라인 도움말
■ 무료 공개버전 받기: □ technote_top_free.zip □ technote_top_free.tar
■ 기능지원: 게시판,주문서,쇼핑몰,자료실,회원관리,투표,통계,기타..
■ 테크노트 홈페이지 www.technote.co.kr