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