독도 광고 모금 캠페인

특별한딸기이야기

블로그 이미지
딸기다운 사이버 공간을 만들고 싶어하는 특별한 딸기의 블로그입니다.
by 특별한녀석
  • 7883Total hit
  • 12Today hit
  • 35Yesterday hit

최근에 달린 레몬펜 쪽지

Statistics Graph

'딸기 공부방/웹프로그래밍'에 해당되는 글 22건

  1. 2008/07/07
    scwcd 1.5 program
  2. 2008/07/02
    소스 자료들
  3. 2008/07/02
    connection pooling 관련
  4. 2008/06/30
    Mysql
  5. 2008/06/30
    2차 강사 연락처
  6. 2008/06/30
    6월 30일 강의 요약
  7. 2008/06/30
    sun 교육 2차 강의 자료
  8. 2008/06/26
    오라클 디비 포트 변경 방법
  9. 2008/06/24
    강사 추가 자료
  10. 2008/06/24
    scwcd 강의 자료
  11. 2008/06/23
    강사 관련.
  12. 2008/06/08
    div 설명
  13. 2008/05/29
    이클립스 관련
  14. 2008/05/27
    eclipse 3.3 europa + mysql Connection Pool 설정시 오류 및 설정 방법
  15. 2008/05/26
    로컬 디비 연결 관련
  16. 2008/05/25
    서버 접속 참고 녀석
  17. 2008/05/20
    앞으로 자주 쓸 듯해서... db접속 관련 코드
  18. 2008/05/05
    JSP의 작은 실수 하기 쉬우 부분
  19. 2008/03/23
    첫번째 과제
  20. 2008/03/19
    명지대 웹프로그래밍 3월 1일 부터 3월 19일까지 수업자료
  21. 2008/03/18
    과제 참고 소스
  22. 2008/03/06
    웹프로그래밍 강의자료

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

머가 먼지...

'딸기 공부방 > 웹프로그래밍' 카테고리의 다른 글

소스 자료들  (0) 2008/07/02
connection pooling 관련  (0) 2008/07/02
6월 30일 강의 요약  (0) 2008/06/30
sun 교육 2차 강의 자료  (0) 2008/06/30
오라클 디비 포트 변경 방법  (0) 2008/06/26
div 설명  (0) 2008/06/08
TRACKBACK 0 AND COMMENT 0

'딸기 공부방 > 웹프로그래밍' 카테고리의 다른 글

소스 자료들  (0) 2008/07/02
connection pooling 관련  (0) 2008/07/02
6월 30일 강의 요약  (0) 2008/06/30
sun 교육 2차 강의 자료  (0) 2008/06/30
오라클 디비 포트 변경 방법  (0) 2008/06/26
div 설명  (0) 2008/06/08
TRACKBACK 0 AND COMMENT 0

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

프로그램이란?
  산수 + 추상화
객체지향의 특징
  상속, 은닉, 추상화, 다형성
JSP
  Web
    internet Network 환경
      ISo OSI 7 layer
        http : 비연결지향
          CGI
            C기반, 컴파일 후 실행, OS 종속적, 프로세스, 사용자가 많으면 불리
          ASP
            MS
          JSP/Servlet
            Java, 컴파일 x, os 독립적, 스레드
            작성이 쉽고 자바의 장점을 가지고 있다.
              플랫폼 독립적, 보안이 뛰어나다
  JDBC
    Transaction(All or Nothing)
      Automic(원자성)
        함께 처리해야 할 최소 작업 단위
      Constant(일괄성)
        동일한 작업
      Independence(독립성)
        작업은 독립적으로...
      Durable(영속성)
        기록은 영원히...
  2tier
    client
      비지니스 로직
      프레젠테이션 로직
    server
      DB
  3tier
    브라우저
      프레젠테이션 로직
    웹서버
      비지니스 로직
    서버
      DB

'딸기 공부방 > 웹프로그래밍' 카테고리의 다른 글

소스 자료들  (0) 2008/07/02
connection pooling 관련  (0) 2008/07/02
6월 30일 강의 요약  (0) 2008/06/30
sun 교육 2차 강의 자료  (0) 2008/06/30
오라클 디비 포트 변경 방법  (0) 2008/06/26
div 설명  (0) 2008/06/08
TRACKBACK 0 AND COMMENT 0

ppt

'딸기 공부방 > 웹프로그래밍' 카테고리의 다른 글

connection pooling 관련  (0) 2008/07/02
6월 30일 강의 요약  (0) 2008/06/30
sun 교육 2차 강의 자료  (0) 2008/06/30
오라클 디비 포트 변경 방법  (0) 2008/06/26
div 설명  (0) 2008/06/08
이클립스 관련  (0) 2008/05/29
TRACKBACK 0 AND COMMENT 0
cmd
sqlplus /nolog
connect system/암호
exec dbms_xdb.sethttpport(포트번호);
TRACKBACK 0 AND COMMENT 0

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

http://tong.nate.com/lhs0806/45255527 에서 퍼옴

HTML
DIV

DIV는 무엇일까 - 오랜만에 태그 설명 퍼오는 정도


HTML에서의 div는 Division Marker의 줄임말로서 영역을 구분짓거나 무리(구분)지어주는 엘리먼트이다.
div는 div를 열고 닫은 앞뒤로 줄바꿈이 되는 블럭 레벨 항목 block level element이다.
div의 앞 뒤에 있는 항목들이 가로줄로 흐르지 않고, 엔터값을 입력한 것 처럼 아래로 줄 지어진다는 말이다.

div로 레이아웃이나 박스를 구성하기 위해, CSS에서 가장 많이 쓰는 속성인 position 값으로는 static, relative, absolute, fixed, inherit가 있다.

Position 속성

static

CSS로 특별한 값을 지정해 주지 않아도 적용되는 기본값이다.
HTML 파일에서 중첩되지 않은 여러개의 div를 작성하면, 위에서 부터 차곡 차곡 쌓이는 기본적인 형태이다.

relative

한개의 div가 있고 relative로 설정할 경우엔 static과 큰 차이는 없다. 하위에 div가 있을 경우엔 하위의 div를 absolute 배열 할 수 있다.

absolute

흔히 레이어라는 개념으로 알고 있는 값이다. div에 top, right, bottom, left 값을 지정해서 원하는 위치에 고정되게 띄울 수 있다.

fixed

기본적으로 absolute와 같다. absolute는 canvas의 스크롤에 따라 올라가고 내려가지만 fixed의 경우는 스크롤에 상관없이 지정한 위치에 고정된다.

inherit

상위에서 지정한 값을 상속한다.


div를 설명하자면, 레이아웃layout 또는 박스모델 boxmodel을 빼놓고 말할 수 없다.
위에도 적었듯이 컨텐츠를 묶어주는 역할을 하는데, 컨텐츠를 묶어서 배열 하는 것이 곧 레이아웃layout이기 때문이다.


컨텐츠 안에서의 div는 사용자가 사용하기 나름일테고, 컨텐츠를 묶어주는 역할의 div는, 위치를 지정함(positioning)으로써 자신의 진정한 역할을 하게 된다.
여기서는 컨텐츠를 묶어주는 가장 크고 바깥의 영역을 담당하는 div에 대해 얘기하도록 하자.


positioning하는 것은 div를 float 시키거나 절대값으로 위치absolute positioning 하는 등 사용자가 원하는 위치에 위치시키는 것을 말한다.
positioning하기 위해서는 위에 나열한 position 속성을 사용하거나, float를 사용하여야 한다.


기본 적인 형태의 Layout


사용자 삽입 이미지

XHTML code
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
  "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="ko" >
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
 <title> New Document </title>
 <link rel="stylesheet" type="text/css" href="css/left.css">
</head>

<body>
 <div id="header">헤더</div>
 
 <div id="container">
  <div id="contents">컨텐츠</div>
  <div id="sidebar">사이드바</div>
 </div>

 <div id="footer">푸터</div>
</body>
</html>



CSS code (float 사용)

body {
 margin: 0;
 padding: 10px;
 background-color: #FFF;
}
#container {
 width: 380px;
}
#header {
 background-color: #FF4A4D;
 height: 50px;
}
#contents {
 float: left;
 background-color: #FFC64A;
 width: 290px;
 height: 214px; /* 임의 지정 */
}
#sidebar {
 float: right;
 background-color: #85C69D;
 width: 90px;
 height: 214px; /* 임의 지정 */
}
#footer {
 clear: both;
 background-color: #3B83B1;
 height: 40px;
}




boxmodel의 예제는 Little Boxes에서 자세히 살펴볼 수 있다. 하단에 몇 개 더 소개하도록 하겠다.

절대값 위치absolute positioning에 대한 개념은 좌표를 지정하여 div를 배열하는 방식이기 때문에 기존의 레이어layer 개념을 알고 있다면 정확하게 익히는 것이 어렵지 않을 것이라고 본다.

그럼 float에 대해 좀 더 알아보자.
float의 값으로는 left, right, none, inherit가 있다.

float 속성
left
left로 설정된 엘리먼트가 HTML 코드에서 바로 다음 엘리먼트의 왼쪽에 위치하게 된다.
right
right로 설정된 엘리먼트는 바로 다음 엘리먼트의 우측에 위치하게 된다.
none
float 하지 않는다.static의 상태로 자연스럽게 박스가 쌓이는 형태라고 보면 된다.
inherit
상위에서 지정한 값을 상속한다.

float를 사용할 때는 clear에 대해서도 알아야 하겠다.

위에서 어떠한 항목에 대해 float:left; 혹은 float: right;를 설정하였을 경우 그 아래에 있는 것들도 영향을 받게 된다. 그것들에 대해 다시 초기화를 시켜주는 것이 clear이다.
left, right 각각 해당 정렬에 대한 영향을 없애주고 both는 둘 다 없애준다.

 

div의 width, height


특별히 width나 height를 정해주지 않으면 컨텐츠의 길이와 넓이에 따라 자동적으로 늘어나고 줄어든다.

만약에 width를 지정했는데, 끊기지 않는 텍스트나 커다란 이미지 혹은 링크로 인해 고정한 width보다 컨텐츠가 넓어질 경우에는 overflow 속성을 지정해서 해결 할 수 있다.
(FF에서는 박스는 고정되어 있고 컨텐츠만 삐져나오고, IE에서는 컨텐츠에 따라 박스가 함께 넓어 지기 때문에 레이아웃이 엄청 깨지는 것을 볼 수 있다. height를 고정한 경우에는 height에도 함께 적용 된다.)

overflow에 지정할 수 있는 속성으로는 visible, hidden, scroll, auto등이 있다.

visible

내용을 자르지 않고 블럭 밖까지 가도록 허용한다.

hidden


박스를 넘어갈 경우, 넘어가는 부분을 감추어 버린다. (잘림부분의 크기와 모양은 ‘clip’ 속성에 의하여 결정된다.)

scroll
 

박스에 기본적으로 scroll을 제공하게 된다. - print나 projection CSS에서 해당 div안의 넘치는 컨텐츠도 인쇄 해준다.

auto
 
박스는 고정해 두고, 박스보다 컨텐츠가 커질 경우 스크롤을 만들어 준다.
만약에 height를 지정했는데 FF에서 컨텐츠가 삐져나온다면, min-height를 이용하여 해결 할 수 있다.

고정된 값을 지정했다면, 컨텐츠가 많이 지더라도 div의 높이 값은 고정되어 있는 것이 맞다.
IE는 자체지능적;으로 컨텐츠에 따라 높이를 마음대로 높혀 버리는데, IE처럼 컨텐츠에 따라 div의 높이가 변해주길 바란다면 min-height라는 속성을 지정해 주면 된다. IE에서는 적용되지 않으므로 * html #id { height: 200px; } 같은 hack도 함께 써주어야 한다.

결론적으로 layout을 위해 div를 사용할 때에는 position, float에 대해서는 기본적으로 알아야 하고, 부가적으로 overflow를 알아두면 더욱 적절히 사용할 수 있겠다.



- 출처는   :  http://kukie.net/2006/01/05/238/




http://blog.paran.com/weddingday7/14227923
div 태그를 이용해 이미지에 테두리 넣는 법

http://myhome.naver.com/sallynice/blog/sallyedit.htm
태그 연습장

http://blog.daum.net/yse57/10784566
div태그, 위치에 대한 설명, 그림 위로 글자가 스크롤되는 예제

http://www.tagmania.net/main.php
태그매니아, 스타일시트와 홈피 팁

출처 : Tong - BlueSky_08님의 웹디자인통

TRACKBACK 0 AND COMMENT 0
윽 교육 시간에 야기 해줬는디 ;; 이클립스에서 연동 하게 되면 톱켓 설정을 톰켓 홈에서 불러 오는 것이 아니라 이클립스에 servers 아래에 톰켓 런타임 잡은곳의 server.xml 파일안에 <Host></Host> 사이에 <Context></Context> 부분에 DBCP 설정 해야하고 설정 할때 톰켓 서버 스톰 한 상태에서 server.xml 을 열어서 편집 해야 하는고 야기 했는디 훔.

어디서 가져왔는지 잊어버렸음
TRACKBACK 0 AND COMMENT 0

http://disse77.tistory.com/65?srchid=BR1http%3A%2F%2Fdisse77.tistory.com%2F65
에서 퍼온 글입니다.

책만 보고 설정을 하다 보니 아래 오류가 나와서 알아보니 tomcat 버젼 별 설정과

eclipse 는 설정이 다르더라 .

javax.naming.NameNotFoundException: Name jdbc is not bound in this Context

블로그를 한 100여개 넘도록 알아보니 대충 문제는 알겠는데

문제 해결은 안되고 이것저것 해보다가 6시간만에 문제 해결 ;;



우선 톰켓 5.5* 이상 부터는 Connection Pool 설정시에 server.xml 과 web.xml 에

별도로 내용을 설정할 필요없이 context.xml 설정만 하면 된다 .

eclipse europa 를 쓰면서 답답한 것은 기존 것과 패턴이 많이 바뀌면서

인터넷에 자료가 너무 없다. 해서 다른이에게 도움이 될까해서 남겨놓는다.


일단 http://commons.apache.org/ 사이트에서 아래 commons 파일을 다운 받아서

1. commons-pool-1.4.jar
2. commons-dbcp-1.2.2.jar
3. commons-collections-3.2.jar

C:\workspace\study\WebContent\WEB-INF\lib 에 복사한다.

나는 eclipse 3.3 europa wtp all-in-one 를 설치해서 사용한다.

europa 에서 Dynamic Web Project 로 jsp 파일을 만들게 되면

WebContent 에 jsp 파일이 저장된다.

 
C:\tomcat\conf 안에 보면 context.xml 파일이 있다.

이 파일을 복사해서

C:\workspace\Servers\Tomcat v5.5 Server at localhost-config 안에 복사한다.

현재 나는 eclipse + tomcat 5.5 + mysql 를 설치하여 사용한다.

자신이 사용하는 편한 편집기로 context.xml 을 연 후에

각자의 설치 사항에 맞게 설정하면 된다. 나는 editplus를 사용했다.

그림을 클릭하면 크게 보임

사용자 삽입 이미지


위와 같이
 
<Resource name="jdbc/jsptest"
                  auth="Container"
                  type="javax.sql.DataSource"
                  driverClassName="com.mysql.jdbc.Driver"
                  loginTimeout="10"
                  maxWait="5000"
                  username="jspid"
                  password="0310"
                  testOnBorrow="true"
                  url="jdbc:mysql://localhost:3306/jsptest"
        ></Resource>

를 추가하고 저장하면 설정은 끝이다.

매우 간단한 방법인데 기존 방법대로 설정을 하면서 현재 패치에 적용이 안되는

문제로 참 많은 고생을 하였다.

더더군다나 내가 초보자라 더 어려웠는지도 모르겠다.
TRACKBACK 0 AND COMMENT 0
<%@ page contentType = "text/html;charset=euc-kr" %>
<%@ page import = "java.sql.*" %>
<html>
 <head>
  <title>
   테이블의 레코드를 화면에 표시하는 예제
  </title>
 </head>
 <body>
  <h2>
   member1 테이블의 레코드를 화면에 표시하는 예제
  </h2>
  <table width = "550" border = "1">
   <tr>
    <td width = "100">
     아이디
    </td>
    <td width = "100">
     패스워드
    </td>
    <td width = "100">
     이름
    </td>
    <td width = "250">
     가입일자
    </td>
   </tr>
   <%
    Connection con = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;
   
    try
    {
     Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
     con = DriverManager.getConnection("jdbc:odbc:dbMember", "sa", "123456");
     
     String sql = "select * from Table_2";
     
     pstmt = con.prepareStatement(sql);
     rs = pstmt.executeQuery();
     
     while(rs.next())
     {
      String id = rs.getString("ID");
      String pw = rs.getString("password");
      String name = rs.getString("name");
   %>
    <tr>
     <td width = "100">
      <%= id%>
     </td>
     <td width = "100">
      <%= pw%>
     </td>
     <td width = "100">
      <%= name%>
     </td>
    </tr>
   <%
     }
    }
    catch(Exception e)
    {
     e.printStackTrace();
    }
    finally
    {
     if(rs != null)
     {
      try
      {
       rs.close();
      }
      catch(SQLException sqle)
      {
      }
     }
     if(pstmt != null)
     {
      try
      {
       pstmt.close();
      }
      catch(SQLException sqle)
      {
      }
     }
     if(con != null)
     {
      try
      {
       con.close();
      }
      catch(SQLException sqle)
      {
      }
     }
    }
   %>
  </table>
 </body>
</html>
TRACKBACK 0 AND COMMENT 0
<%@ page contentType = "text/html;charset=euc-kr" %>
<%@ page import = "java.sql.*" %>
<html>
 <head>
  <title>
   테이블의 레코드를 화면에 표시하는 예제
  </title>
 </head>
 <body>
  <h2>
   member1 테이블의 레코드를 화면에 표시하는 예제
  </h2>
  <table width = "550" border = "1">
   <tr>
    <td width = "100">
     아이디
    </td>
    <td width = "100">
     패스워드
    </td>
    <td width = "100">
     이름
    </td>
    <td width = "250">
     가입일자
    </td>
   </tr>
   <%
    Connection con = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;
   
    try
    {
     Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
     con = DriverManager.getConnection("jdbc:sqlserver://ants.mju.ac.kr:1433", "webp_32", "a123a123");
     
     String sql = "select * from Table_1";
     
     pstmt = con.prepareStatement(sql);
     rs = pstmt.executeQuery();
     
     while(rs.next())
     {
      String id = rs.getString("ID");
      String pw = rs.getString("PW");
      String name = rs.getString("Name");
   %>
    <tr>
     <td width = "100">
      <%= id%>
     </td>
     <td width = "100">
      <%= pw%>
     </td>
     <td width = "100">
      <%= name%>
     </td>
    </tr>
   <%
     }
    }
    catch(Exception e)
    {
     e.printStackTrace();
    }
    finally
    {
     if(rs != null)
     {
      try
      {
       rs.close();
      }
      catch(SQLException sqle)
      {
      }
     }
     if(pstmt != null)
     {
      try
      {
       pstmt.close();
      }
      catch(SQLException sqle)
      {
      }
     }
     if(con != null)
     {
      try
      {
       con.close();
      }
      catch(SQLException sqle)
      {
      }
     }
    }
   %>
  </table>
 </body>
</html>
TRACKBACK 0 AND COMMENT 0

<%@ page contentType = "text/html;charset=euc-kr" %>
<%@ page import = "java.sql.*" %>
<%
 Connection con = null;

 try
 {
  Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
  con = DriverManager.getConnection("jdbc:odbc:dbMember", "sa", "123456");
  out.println("제대로 연결이 되었습니다.");
 }
 catch(Exception e)
 {
  e.printStackTrace();
 }
%>

TRACKBACK 0 AND COMMENT 0
딸기 연휴에 놀지도 못하고 집에서 JSP를 하고 있습니다.

별 신경 안쓰고 코드를 짜는데 이상하게 JSP에서 한글이 ??로 표시되는 겁니다.

이런 니미...

분명 예제랑 똑같이 쳤는데...

왜 안될까 하다가 설마 띄어쓰기??

<%@ page contentType = "text/html; charset = euc-kr" %>

위 코드를

<%@ page contentType = "text/html;charset=euc-kr" %>

로 바꾸었더니 한글이 제대로 나오던...

이런 니미...

한글이 전세계적으로 사용되어야 이런 문제가 없을런지...

결론 : JSP에서 띄어쓰기 함부로 하지 말자 -.-;;
TRACKBACK 0 AND COMMENT 0

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled Document</title>
  <style type = "text/css">
   .join_name {
    border:solid lpx #ff000;
   }
  </style>
 </head>
 <body>
  <form>
   <textarea style = "width : 300px" name = "contract" id = "contract" class = "join_contract">
My name is Tyto.
My Nicname is Special Strawberry.
I like my names.
야옹</textarea>
   <br />
   <label>
    <input type = "checkbox"> 위 약관에 동의하십니까?
   </label>
   <table>
    <tr>
     <th>
      이름
     </th>
     <td>
      <input type="text" name="name" id="name" class="join_name">
     </td>
    </tr>
    <tr>
     <td>
      아이디
     </td>
     <td>
      <input type = "text" name ="user_id" id="user_id" class = "join_user_id">
      <input type = "button" name = "user_id_check" id = "user_id_check" value = "아이디체크"
      onclick="javascript:alert('hello world')">
     </td>    
    </tr>
    <tr>
     <th>
      패스워드
     </th>
     <td>
      <input type = "password">
     </td>
    </tr>
    <tr>
     <th>
      성
     </th>
     <td>
      <label>
      남 <input type = "radio" id = "sex1" name = "sex" value = "남">
      </label>
      <label>
      여 <input type = "radio" id = "sex2" name = "sex" value = "여">
      </label>
     </td>
    </tr>
    <tr>
     <th>
      직업
     </th>
     <td>
      <select name = "job" id = "job">
       <option value = "" selected = "selected">
        ----------
       </option>
       <option value = "학부생">
        학부생
       </option>
       <option value = "학생">
        학생
       </option>
      </select>
     </td>
    </tr>
    <tr>
     <td>
      취미
     </td>
     <td>
      <label>
       동영상
      <input type ="checkbox" name = "hobby" value = "hobby">
      </label>
      <label>
       동상
      <input type ="checkbox" name = "hobby" value = "teach">
      </label>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html>
TRACKBACK 0 AND COMMENT 0

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.


ARTICLE CATEGORY

딸기 이야기 (241)
딸기의 혼잣말 (55)
딸기 호감 사이트 (2)
딸기의 사진 (16)