'EkNote Project' 카테고리의 글 목록

'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

Name

Password

Blog/Homepage

비밀글

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

Name

Password

Blog/Homepage

비밀글

OracleXE Setting

EkNote Project 2008. 8. 4. 20:34

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

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

1.

4. oracle web 관리자 페이지 암호를 입력한다.
edward 라는 암호를 입력하였다.

5. 설치 환경 확인

6.설치가 진행되고 데이터 베이스 홈페이지를 시작한다.

Oracle 설치가 완료되었다.

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

8. 관리자 화면

카카오스토리
트위터
페이스북

Posted by Edward. K

Name

Password

Blog/Homepage

비밀글

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

Name

Password

Blog/Homepage

비밀글

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

Name

Password

Blog/Homepage

비밀글

이전페이지 다음페이지

IT정리노트

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

TagLibrary 사용하기

Tomcat Setting

OracleXE Setting

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

13. UI 생성 [Step. 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