IT정리노트

블로그 이미지

Edward. K

메멘토적 기억능력을 소유한 개발자 노트.

'EkNote Project'에 해당되는 글 18건

제목 날짜
  • TagLibrary 사용하기 2008.08.06
  • Tomcat Setting 2008.08.04
  • OracleXE Setting 2008.08.04
  • 13. UI 생성 [Step. 2 HTML Page ] 2008.07.31
  • 13. UI 생성 [Step. 1 스타일 시트 ] 2008.07.31

TagLibrary 사용하기

EkNote Project 2008. 8. 6. 16:56
TagLibrary 사용하기
    일반적으로 사용되는  JSP 태그들의 표준화 라이브러리인 JSTL을 사용해 보도록 하자.

     1. 'Standard 1.1 Taglib'   다운로드
                http://jakarta.apache.org/site/downloads/downloads_taglibs.html

                    |_ http://jakarta.apache.org/site/downloads/downloads_taglibs-standard.cgi
사용자 삽입 이미지

     2.      압축을 풀고  *.jar 파일은
            - lib/jstl.jar , standard.jar 파일을  WEB-INF/lib 디렉토리에
            - tld/(c,x,fmt,sql).tld 파일을    WEB-INF/tld  디렉토리에 복사한다.

     3. jstl 사용 설정
            WEB-INF/web.xml 파일을 수정하여 URI 에 대한 실제 파일을 정의 해주자.
                    <taglib>
                       <taglib-uri>http://java.sun.com/jstl/core</taglib-uri>
                       <taglib-location>/WEB-INF/tld/c.tld</taglib-location>
                    </taglib>

                    <taglib>
                        <taglib-uri>http://java.sun.com/jstl/xml</taglib-uri>
                        <taglib-location>/WEB-INF/tld/x.tld</taglib-location>
                    </taglib>

                    <taglib>
                         <taglib-uri>http://java.sun.com/jstl/fmt</taglib-uri>
                         <taglib-location>/WEB-INF/tld/fmt.tld</taglib-location>
                    </taglib>

            CORE     http://java.sun.com/jstl/core     :: c
            XML         http://java.sun.com/jstl/xml         :: x
            SQL         http://java.sun.com/jstl/sql         :: sql


     3.        JSP 에서의 사용
            <%@ taglib prefix="c"  uri="http://java.sun.com/jstl/core"  %>

  • 카카오스토리
  • 트위터
  • 페이스북
Posted by Edward. K
EkNote

Tomcat Setting

EkNote Project 2008. 8. 4. 21:39
개인 학습 프로젝트인 'Eknote Project' 의 2번재 단계인 
    '2. 개발 환경 세팅.' 의 Tomcat  설치 메뉴얼이다.

1. 다운받은 파일 실행
사용자 삽입 이미지
2. 라이센스 동의
사용자 삽입 이미지
3. 설치 타입 선택
사용자 삽입 이미지
4. 설치 경로
    기본 경로가 아닌 c:\Tomcat5 폴더에 설치한다.
사용자 삽입 이미지
5. 관리 페이지 암호 설정  : oracle 관리 페이지와 마찬가지로.. edward 로 했다.
사용자 삽입 이미지
6. java virtual machine 겅로를 입력한다.
    jdk 설치가 우선적으로 이루어져야 겠쥐....( jre가 설치되어 있거나..)
사용자 삽입 이미지

7. 설치 완료.
사용자 삽입 이미지

  • 카카오스토리
  • 트위터
  • 페이스북
Posted by Edward. K
EkNote

OracleXE Setting

EkNote Project 2008. 8. 4. 20:34
개인 학습 프로젝트인 'Eknote Project' 의 2번재 단계인 
    '2. 개발 환경 세팅.' 의 Oracle 10g 설치 메뉴얼이다.

다음은 다운로드 후 설치하는 과정의 이미지 캡쳐화면이다.

1.
사용자 삽입 이미지
2.
사용자 삽입 이미지
3.
사용자 삽입 이미지
4. oracle web 관리자 페이지 암호를 입력한다.
     edward  라는 암호를 입력하였다.
사용자 삽입 이미지
5. 설치 환경 확인
사용자 삽입 이미지
6.설치가 진행되고 데이터 베이스 홈페이지를 시작한다.
사용자 삽입 이미지

Oracle 설치가 완료되었다.

7. 데이터 베이스 로그인
    4번 과정에서 입력한 암호를 입력한다.  ( system/ edward )
사용자 삽입 이미지

8. 관리자 화면
사용자 삽입 이미지



  • 카카오스토리
  • 트위터
  • 페이스북
Posted by Edward. K

13. UI 생성 [Step. 2 HTML Page ]

EkNote Project 2008. 7. 31. 14:49
13. UI 생성    [Step. 2  HTML PAGE ]

     앞서 생성된  스타일 시트를 사용하여 게시판 UI를 만든다.
     필요한 링크들도 추가해 주자.
     마찬가지로 보면 알것이기에..자세한 설명은 넘어~간다. ( 코드안에 주석을 참고 )
     ( 이미지 퀄리티가 떨어지는 몇개는 어쩔수 없다.. 그림판으로 만든거다.. --;;)
      
      - 추가된 파일
         : 파일 구조는 10. Web 리소스 구조 및 Web Service 추가 참고.
          - HTML
                PATH :  eknote/view/layout/board 
                 FILE  :  list.html, view.html, write.html
          - IMAGE
               PATH :   eknote/view/images/board

      다음 파일을 생성해둔 프로젝트 폴더에 Copy(덮어쓰기) 한다. ( 앞서 만든 css 포함)
           -  9. workSpace 리소스 구조 및 Eclipse 개발 환경 세팅  참고
invalid-file
흐음...글코보니..form명 정하지 않았넹.. 쿄쿄..


     




  • 카카오스토리
  • 트위터
  • 페이스북
Posted by Edward. K
EkNote

13. UI 생성 [Step. 1 스타일 시트 ]

EkNote Project 2008. 7. 31. 14:26
 
13. UI 생성    [Step. 1 스타일 시트  ]
   
  스타일시트(Cascading Style Sheets )란?   웹 페이지의 '통일성'을 위한 파일이다.
                                                        - WIKI 백과 참고 -

 다음 스타일 시트를     ekNote(프로젝트폴더)/view/css/ 에 저장하도록 한다.   

/* 공통  -해당 태그에 자동으로 지정.*/
    body {  
      scrollbar-face-color:#FFFFFF;
      scrollbar-highlight-color: #999999;
      scrollbar-3dlight-color: #FFFFFF;
      scrollbar-shadow-color: #CCCCCC;
      scrollbar-darkshadow-color: #FFFFFF;
      scrollbar-track-color: #FFFFFF;
      scrollbar-arrow-color: #999999;
      font-family:Tahoma,굴림;
      font-size:9pt;
      color:#222222;
      margin-left: 0px;    margin-top: 0px;    margin-right: 0px;    margin-bottom: 0px;
    }
    td,select,div,form,textarea,center,option,pre,blockquote {font-size:12px; font-family:Tahoma,굴림; color:#555555; }
    img {border:0}    

    a:link { text-decoration:none; color:#555555; }
    a:visited { text-decoration:none; color:#555555; }
    a:active { text-decoration:none; color:#555555; }
    a:hover { text-decoration:underline; color:#333333}

/* font */
    .small {font-family:돋움; font-size:11px;}
    .bold {font-weight:bold;}
    .px {font-family:Verdana, tahoma; font-size:9px;}    
    .red {color:#ff0000;}
    .redsmall {font-family:돋움; font-size:11px; color:#FF0000;}
    .redbold {color:#FF0000;font-weight: bold;}
    .redboldsmall {font-family:돋움; font-size:11px; color:#FF0000; font-weight:bold}
    .blue {color:#0000FF;}
    .bluesmall {font-family:돋움; font-size:11px; color:#0000FF;}    
    .blueboldsmall {font-family:돋움; font-size:11px; color:#0000FF; font-weight:bold}
    .graybluebold {color:#353D87;font-weight:bold}        
    .orange {color:#FF6600;}
    .text_align_right {text-align:right;}    
    .darkpurple {color:#502A7C;}
    .gray777 {color:#777777;}

/* input 관련 */
  .search {border:solid 1;border-color:#C8C8C8; background-color:#f7f7f7; height:20px; cursor:hand; font-family:tahoma; color=#676767; font-size:7.5pt; font-weight:bold;}
    .input {border:solid 1; border-color:#C8C8C8; background-color:#FFFFFF; font-family:Tahoma,굴림;}
  .input_login {border:solid 1; border-color:#C8C8C8; background-color:#FFFFFF; width:85; height:18; font:tahoma; font-color::#777777; font-size:12px}
    .input_modify {border:solid 1; border-color:#C8C8C8; background-color:#F1F1F1; width:85; height:18; font:Tahoma,굴림; font-color::#777777; font-size:12px}
  .input_hidden{ height:17px; color: white; font-family:Tahoma,굴림; font-size:9pt; BORDER-RIGHT: white; BORDER-TOP:white; BORDER-LEFT: white; BORDER-BOTTOM: white }
    .textarea {font-family:돋움; color:#555555; border:1 solid; border-color:#C8C8C8; background-color:#ffffff; padding:5;}
    .select{ color: #222222; background-color:white; border:1 solid silver ; font-family:Tahoma,굴림; font-size:9pt}
    .submit {border:solid 1;font-family:굴림;font-size:9pt;color:white;background-color:black;height:19px}

/* table 관련 */
    .table_line {background-color:#e1e1e1; height:1;}
    .div_line {background-image:url(../images/board/div_line.gif); height:1;}
    .line_bar{background-image:url(../images/board/line_bar.gif); height:1;}

    .title_border {background-color:#B1D0D9; height:1;}
    .table_title {background-color:#EAF5F4; text-align:center; font-weight:bold;}
    .table_pd_left10 {padding-left:10;}
    .table_content {padding:10; line-height:18px;}
    .table_border {background-image:url(../images/customer/table_topline.gif); height:4;}
    .table_bar {background-image:url(../images/customer/table_bar.gif); width:2; height:36;}
    .table_num {text-align:center; padding:5;}
    .table_sub {padding-left:10; padding:5;}
    .table_cen {text-align:center;}


    .title_cenbold {text-align:center; font-weight:bold;}
    .title_bg {background-color:#E4F1F5;}        
    .table_pd_right10 {padding-right:10; text-align:right;}    
    .table_cpd_5 {padding:5;}    
    .table_lineh {line-height:18px;}
    .table_view {background-color:#F6FFFE; padding:5;}
    .table_notice {background-color:#F4FAFA; font-weight:bold; padding-left:10}


CSS 사용방법

  1. 직접
      <style>
           .title_cenbold {text-align:center; font-weight:bold;}
      </style>
  2.   Link
      <head>
           <link href="../../css/common.css" rel="stylesheet" type="text/css">
      </head>
  3.  css 적용
       tag에 직접 적용한 경우는 해당 태그에 자동으로 적용이 되며,
       사용자 지정 스타일 시트를 적용할 tag에 다음과 같이 추가한다.
        <td height="28" class="table_title">제목입니다</td>


CSS 적용 /미적용 비교

- 스타일 시트 적용전
[#M_[적용전 화면 보기]|[닫기]|

사용자 삽입 이미지


- 스타일 스트 적용후

사용자 삽입 이미지

_M#]
  • 카카오스토리
  • 트위터
  • 페이스북
Posted by Edward. K

이전페이지 다음페이지
블로그 이미지

메멘토적 기억능력을 소유한 개발자 노트.

by Edward. K

공지사항

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • linux ls 날자 형식 변경 + 파일사이즈 형식 변경 1
  • linux 설치된 APACHE HTTPD, TOMCAT 버전 확⋯
  • 통신(포트) 상태 확인 > ping, telnet, echo ⋯
  • Referenced file contains errors (ht⋯
  • 이클립스에서 SVN 연결 해제.
  • 더 보기
  • # Local Network Messenger 'LanChat'⋯
    낸쳇 ㆍ 01.19
  • 너무 좋은 글입니다!
    More ㆍ 11.06
  • 참 별것도 아닌게 신경쓰였는데 신기하네요 그림판이 켜었었습니다.
    감사 ㆍ 10.12
  • 감사합니다! 기존에 그림판이 켜 있을 때 종료한 경우, 다음에 ⋯
    굴링굴링 ㆍ 10.11
  • 와 같은 증상이었는데 그림판이 범인이었습니다. 감사합니다!
    도시괴담 ㆍ 09.10

태그

  • 플래시 게임
  • 컴퓨터 관리
  • ERwin
  • 전자정부프레임워크
  • sqlgate
  • STS
  • 미네르바
  • android
  • 이클립스
  • 이미지 편집
  • 사업 이야기
  • Flash Player
  • Graphic
  • rocketdock
  • Jboss
  • toad
  • tomcat
  • EditPlus
  • 개한민국
  • egov
  • iBATIS
  • flex
  • 캡쳐툴
  • 중독성게임
  • Eclipse
  • 색상코드표
  • 가상화폐무료
  • netbeans
  • eclipse plugin
  • EkNote

글 보관함


  • 2021/12
    (3)

  • 2021/11
    (7)

  • 2021/09
    (1)
«   2023/01   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

링크

카테고리

분류 전체보기 (778)
행운이와함께 (1)
EkNote Project (18)
ARIS (0)
Android (2)
LINK (37)
UML (9)
Utility (76)
Protable (3)
Programming (152)
Cobol (0)
ASP (0)
CSS (5)
C_C++ (2)
IBatis (2)
JSP (3)
JAVA (76)
JavaScript (44)
PHP (0)
MobileProgram (4)
SKT (0)
KTF (0)
LGT (0)
자료들 (4)
DB (81)
mongoDB (0)
MySQL (8)
Oracle (60)
MSSQL (4)
Graphic (8)
Flash (3)
PhotoShop (3)
SourceFactory (4)
Collection (67)
작가의기막힌상상력 (13)
미소를찾아보는공간 (42)
내심장은작동중일까 (6)
멀더와스컬리의노트 (1)
이건어디에사용할까 (5)
Edward (274)
나만 알기엔 아까워 (100)
기억하기 위한 기록 (122)
시선이 머무는 공간 (50)
숨기고 싶은 이야기 (2)

카운터

Total
1,406,930
Today
40
Yesterday
32
방명록 : 관리자 : 글쓰기
Edward. K's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

IT정리노트

메멘토적 기억능력을 소유한 개발자 노트.

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • 분류 전체보기 (778)
    • 행운이와함께 (1)
    • EkNote Project (18)
    • ARIS (0)
    • Android (2)
    • LINK (37)
    • UML (9)
    • Utility (76)
      • Protable (3)
    • Programming (152)
      • Cobol (0)
      • ASP (0)
      • CSS (5)
      • C_C++ (2)
      • IBatis (2)
      • JSP (3)
      • JAVA (76)
      • JavaScript (44)
      • PHP (0)
    • MobileProgram (4)
      • SKT (0)
      • KTF (0)
      • LGT (0)
      • 자료들 (4)
    • DB (81)
      • mongoDB (0)
      • MySQL (8)
      • Oracle (60)
      • MSSQL (4)
    • Graphic (8)
      • Flash (3)
      • PhotoShop (3)
    • SourceFactory (4)
    • Collection (67)
      • 작가의기막힌상상력 (13)
      • 미소를찾아보는공간 (42)
      • 내심장은작동중일까 (6)
      • 멀더와스컬리의노트 (1)
      • 이건어디에사용할까 (5)
    • Edward (274)
      • 나만 알기엔 아까워 (100)
      • 기억하기 위한 기록 (122)
      • 시선이 머무는 공간 (50)
      • 숨기고 싶은 이야기 (2)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바