●웹프로그래밍 테스트 할때는 크롬보다는 익스플로어에서 먼저 하는게 좋다.







●도구->옵션->고급에서 'HTTP오류메시지표시' 체크해제하고 '모든 스크립트 오류에 관련된 알림 표시' 체크 한다.









●js, css 수정 후 바로 적용 안되면 아래 경로에서 파일보기에서 파일 삭제한다.


인터넷옵션->일반->검색지록->설정->임시 인터넷파일->파일보기









Posted by -현's-

댓글을 달아 주세요

●로고는 h1태그를 써서 그 안에 넣어준다. h1은 페이지 내에서 가장 중요한 것을 나타내는 태그이다.

ex)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<style type="text/css">
img{border:0;}

#logo{width:900px; height:200px; margin:10px auto; border:1px solid;}
</style>

</head>
<body>


<h1 id="logo"><img src="image/logo.png" width="900" height="200"/></h1>

</body>
</html>

Posted by -현's-

댓글을 달아 주세요

●마우스 롤 오버 태그, 속성

 <img src="이미지 주소" onmouseover="this.src='마우스 오버시 이미지 주소'"

                                 onmouseout="this.src='이미지 주소'" alt="alt이름"/> 

 

 

●웹표준 준수 위해서 이미지의 alt속성을 꼭 넣어주고, <img src=""/>처럼 태그 마지막 부분을 꼭 막아줘야한다.

별 의미 없는 그냥 화면을 꾸미기 위한 이미지의 경우는 alt속성에 값을 넣지 않고 alt=""처럼 빈 속성값을 설정한다.

 

 

 

●이미지 링크 테두리 없애기

- 이미지에 링크를 걸면 테두리가 생긴다. 개별적으로 border값을 설정하는 것 보다 css를 이용하여 테두리를 제거한다.

  img {border:"0"}

 

 

 

●가로 메뉴 예

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
img{border:0;}
#menu{width:800px; margin:10px auto; padding-left:200px;}
#menu ul{margin:0 ;padding: 0; }
#menu li{display:inline; float:left; }
</style>

 

</head>
<body>

 

<div id="menu">
 <ul>
     <li><a href="#"><img width=200 height=50 src="image/menu1.png" onmouseover="this.src='image/menu1_on.png'"
       onmouseout="this.src='image/menu1.png'" alt="메뉴1"/></a></li>
     <li><a href="#"><img width=200 height=50 src="image/menu2.png" onmouseover="this.src='image/menu2_on.png'"
       onmouseout="this.src='image/menu2.png'" alt="메뉴2"/></a></li>
     <li><a href="#"><img width=200 height=50 src="image/menu3.png" onmouseover="this.src='image/menu2_on.png'"
       onmouseout="this.src='image/menu3.png'" alt="메뉴31"/></a></li>
 </ul>
</div>

 

</body>
</html>

Posted by -현's-

댓글을 달아 주세요

 

세로 메뉴

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
#menu1{width:100px; }
#menu1 ul{list-style:none; margin: 0;padding: 0; }
</style>

 

</head>
<body>

 

<div id="menu1">
  <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
  </ul>
</div>

 

</body>
</html>

결과

1111

2222

3333

4444

 

 

 

 

●li안에 이미지를 세로로 나열할 때 이미지 사이에 여백이 생길경우, img속성에 'vertical-align:top;'로 설정한다.

 

 

 

 

●가로 메뉴

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
#menu2{width:400px; }
#menu2 ul{margin:0 ;padding: 0; }
#menu2 li{display:inline;}
</style>

 

</head>
<body>

 

<div id="menu2">
 <ul>
   <li>1111</li>
   <li>2222</li>
   <li>3333</li>
   <li>4444</li>
 </ul>
</div>

 

</body>
</html>

 

결과

1111 2222 3333 4444

 

 

 

●li안에 'display:inline;'를 적용하면 가로로 배열이 된다.

 

 

 

●li안에 이미지를 가로로 나열할 때 이미지 사이에 여백이 생기는 경우, li안에 'float:left;'로 설정한다.

 

 

 

 

Posted by -현's-

댓글을 달아 주세요

●웹표준 레이아웃

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form{margin:0; padding:0}
body{font:normal dotum, '돋움';}
ul,il,dl{list-style:none}
img{border:0; vertical-align:top;}
ul{list-style:none; padding:0; margin:0;}

 

#wrap{margin:0; auto; width:900px;  }
#header{float:left; width:900px; height:145; margin-bottom:15px;}
#sidebar{float:left; width:245px;}
#content{float:right; width:645px;}
#footer{float:left; width:900px; margin-top:20px;}
</style>

 

</head>
<body>

 

<div id="wrap">
  <div id="header">a</div>
  <div id="sidebar">b</div>
  <div id="content">c</div>
  <div id="footer">d</div>
</div>

 

</body>
</html> 

 

 

●#wrap{margin:0 auto; width:900px;}

- table에서는 align="center"로 중앙 정렬을 했지만, 웹표준에서는 따로 중앙정렬은 없다. 그래서 중앙정렬을 하려면 가장 바깥 div에 'margin:0 auto'를 선언해 준다. 'margin:0'은 상하 0px라는 뜻이고 'auto'는 좌우를 중앙에 위치하게 한다.

 

 

 

●큰 div(wrap,header,sidebar,content,footer 등)를 만들고 그 안에 세부적인 div를 만든다. 큰 div는 height값을 주지 않고 세부적인 div에 height를 준다.

 

 

 

●width, margin, padding, height 수치를 정확히 계산해서 레이아웃을 만든다. 만들 레이아웃 디자인을 프린트하고 계산기로 위의 값을 계산하면서 하면 편하다.

 

 

 

●margin은 바깥쪽 여백, padding는 안쪽 여백이다.

 

 

 

●padding값은  width값에 포함하지 않는다. 계산할때 따로 더해주어야 한다.

ex)

<div style="padding:10px; width:80px; height:80px;"></div>

여기서 총 길이는 width값 80px와 양쪽 padding값 10px+10px인 100px이다.

 

 

 

●값에 숫자만 쓰면 안되고 px등 단위를 써주어야한다.

 

 

 

●div에 테두리를 사용하려면 'border:1px solid ;border-color:blue;' 를 css에 입력한다.

ex)

#header{float:left; width:900px; height:145px; border:1px solid ; border-color:blue; margin-bottom:15px; }

 

 

 

●연습 예

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<style type="text/css">
/* 공통 속성 */
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form{margin:0; padding:0}
body{font:normal dotum, '돋움';}
ul,il,dl{list-style:none}
img{border:0; vertical-align:top;}
ul{list-style:none; padding:0; margin:0;}
/* 큰 div */
#wrap{margin:20px auto; width:900px;  }
#header{float:left; width:900px; height:145px; background:green; margin-bottom:15px; }
#sidebar{float:left; width:245px;}
#content{float:right; width:645px;}
#footer{float:left; width:900px; height:80px; background:green; margin-top:15px; margin-bottom:30px;  }
/* sidebar 세부 div */
#sidebar_a{width:250px ;height:150px ;background:green; margin-bottom:10px;  }
#sidebar_b{width:250px ;height:160px ;background:green; margin-bottom:10px; }
#sidebar_c{width:230px ;height:300px ;background:green; padding:10px;  }
#sidebar_c_1{width:230px ;height:145px ;background:yellow; margin-bottom:10px; }
#sidebar_c_2{width:230px ;height:145px ;background:yellow; }
/* content 세부 div */
#content_a{width:625px ; background:green ;margin-bottom:10px; padding:10px;  }
#content_a_1{width:625px ;height:90px ;background:yellow ;margin-bottom:10px;  }
#content_a_2{width:625px ;height:90px ;background:yellow; ;margin-bottom:10px ; }
#content_a_3{width:625px ;height:100px ;background:yellow; ; }
#content_b{width:645px ;height:150px ;background:green ;margin-bottom:10px ; }
#content_c{width:645px ;height:160px ;background:green ; }

</style>

</head>
<body>

<div id="wrap">
 <div id="header"></div>
 <div id="sidebar">
  <div id="sidebar_a"></div>
  <div id="sidebar_b"></div>
  <div id="sidebar_c">
   <div id="sidebar_c_1"></div>
   <div id="sidebar_c_2"></div>  
  </div> 
 </div> 
 <div id="content">
  <div id="content_a">
   <div id="content_a_1"></div>
    <div id="content_a_2"></div>
    <div id="content_a_3"></div>
  </div> 
  <div id="content_b"></div>
  <div id="content_c"></div> 
 </div>
 <div id="footer"></div>
</div>

</body>
</html>

 

 

 

 

Posted by -현's-

댓글을 달아 주세요

DTD(Document Type Definition) - 웹브라우저가 웹페이지를 동일한 기준에 의해 해석 되도록 문서의 타입을 선언하는 것이다. 이클립스 사용시 파일을 생성하면 이클립스가 자동으로 dtd를 선언해준다.


 

●DTD는 여러가지 종류가 있다. html페이지 제일 위에 선언해야한다. 엄격모드를 사용하는 것이 정확한 웹표준을 따르는 것이지만 우리나라의 브라우저 사용실태를 고려하면 하위 버전의 브라우저에서도 호환되어야 하기 때문에 호환모드를 사용해야 한다.

ex)

html 4.01 Transitional(호환모드) 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"html://www.w3.org/TR/html4/loose.dtd">

 

html 4.01strict(엄격모드)

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 

 

 

 

Posted by -현's-

댓글을 달아 주세요


●JSP는 HTML문서 사이에 JSP문법코드가 삽입된 형태로 작성된다.



●<%   %> - 스크립트릿, 이 안에 자바 코드 쓸수 있다. 

●<%=   %> - 익스프레션, 자바식 출력

●<%@   %> - 지시자, 웹컨테이너가 jsp 페이지를 처리할 때 필요한 정보를 기술

●<%!    %> - 선언부, 변수선언이나 메서드를 선언

●&{ } - 익스프레션 언어(EL)

●<jsp:~~/>, <c:~~/> - 액션 태그




●서블릿
- 장점 : 복잡한 프로그램 구현에 적합하다. 컴파일 결과만 설치해도 되므로 소스코드 유출 보호
- 단점 : HTML 문서의 디자인이 바뀔때 마다 서블릿 클랫를 수정/컴파일/설치 해야하고 웹서버를 재기동하는 일을
           되풀이 해야한다. 설치과정이 복잡하다.


●JSP
- 장점 : HTML중심의 코드구조이므로 디자인 작업에 바로 사용가능하다. 그리고 그 일이 끝나면 바로 프로그램
           로직을 고칠수 있다. 설치 과정이 간단하다
- 단점 : 프로그램 로직이 복잡할 경우 자바코드의 논리적구조를 알아보기가 힘들다. 소스코드가 공개되며,
            프로그래머가 아닌 다른 사람이 소스코드를 만져서 손상시킬 위험성이 있다.



●프로그램의 복잡한 로직을 구사하는 코드는 서블릿 클래스 안에 기술하고 프로그램의 결과를 보여주는 HTML중심의 코드만 JSP페이지안에 기술하는게 좋다.



●실무에서는 JSP페이지에 스크립팅 요스는 아예 쓰지않고 익스프레션언어(EL)와 액션만 사용하는 방법을 주로 쓴다.




●<%@   %>
- 지시자, 웹컨테이너가 JSP페이지를 서블릿 클래스로 변환할 때 필요한 여러가지 정보들은 기술하기 위해 사용하는 문법이다.
-지시자 종류
①<%@ page  어트리뷰트목록  %>

②<%@ include  어트리뷰트목록 %>

③<%@ taglib  어트리뷰트목록  %>




●page 지시자 - jsp 전체에 적용되는 정보를 기술한다.
ex)
<%@ page  contentType = "text/html; charset = euc-kr"  %>
<%@ page  import = "java.util.*" %>




●include 지시자
-  다른 페이지를 불러다 현재 jsp페이지의 일부로 만들기 위해 사용, 현재 jsp페이지를 기준으로 상대적인 url 사용
ex)
<%@ include  file = "Today.jsp" %>




●taglib 지시자 - 액션을 사용할 때 이용한다.
ex)
<%@ taglib  prefix = "c" uri = http://java.sun.com/jsp/jstl/core %>




●html 주석
<!--    주석내용   -->


●jsp 주석
<%--   주석내용   --%>






●jsp 내장객체
request
response
out
application
config
pageContext
session
page
exception





'프로그래밍 > JSP' 카테고리의 다른 글

jsp 기본 문법 정리4  (0) 2012.03.12
jsp 기본 문법 정리3  (0) 2012.03.12
jsp 기본 문법 정리2  (0) 2012.03.11
jsp 기본 문법 정리1  (0) 2012.03.11
JSP 프로젝트 시작하기 & DB 연결하기  (0) 2012.03.10
JSP 이클립스 개발 환경 구축(세팅)  (0) 2012.03.10
Posted by -현's-

댓글을 달아 주세요


1. JDK 설치하기


2. 환경변수 설정하기

3. 톰캣 설치하기


4. 이클립스 설치하기


5. 톰캣과 이클립스 연동

------------------------------------------------------------------------------------------------



1. JDK 설치하기

http://java.sun.com 에 들어간다

② 상단 Download에서 java se, jdk를 다운 받아 설치한다.



2. 환경변수 설정하기

①내 컴퓨터 -> 시스템 속성 -> 고급 -> 환경변수

 



②변수이름 Path에다가 jdk설치경로에 있는 bin디렉토리 경로명을 제일 앞에 추가 하고 ' ;(세미콜론) '을 붙여준다.

 



③잘 되었는지 확인하려면 cmd 창에서 'javac -version' 을 입력해본다.






3. 톰캣 설치하기

http://tomcat.apache.org  에 들어간다.

② Download 에서 톰켓을 다운로드한다. 32bit인지 64bit인지는 내컴퓨터-속성에 가면 알수있다.



③ 압축을 푼다





4. 이클립스 설치하기

www.eclipse.org 에 들어간다.

②Downloads 에서 java ee 버전을 다운 받는다.



③ 압축을 푼다




5. 톰캣과 이클립스 연동

①이클립스 하단 server에 오른쪽 버튼 클릭후 new->server선택한다.




②본인이 다운받은 아파치 톰켓 서버를 선택한다.




③본인이 다운받아 압축을 푼 톰켓 폴더를 지정한다.




④next->finish를 선택한다.




'프로그래밍 > JSP' 카테고리의 다른 글

jsp 기본 문법 정리4  (0) 2012.03.12
jsp 기본 문법 정리3  (0) 2012.03.12
jsp 기본 문법 정리2  (0) 2012.03.11
jsp 기본 문법 정리1  (0) 2012.03.11
JSP 프로젝트 시작하기 & DB 연결하기  (0) 2012.03.10
JSP 이클립스 개발 환경 구축(세팅)  (0) 2012.03.10
Posted by -현's-

댓글을 달아 주세요

●쿠키 발생 - <html>태그 쓰지건에 'setcookie()'함수 호출
 <?php setcookie('쿠키명', '쿠키값');  ?>



●쿠키 함수 세번째 변수에 유효기간을 설정할수 있다
<?php setcookie('쿠키명', '쿠키값', time()+숫자);  ?> 



●쿠키 삭제 - 유효기간을 과거의 시간으로 설정해서 삭제
 setcookie('쿠키명', '쿠키값', time()-60);



●쿠키 받기 - 수퍼 글로벌 변수 '$_COOKIE로 받는다
ex)
$getval=$_COOKIE['쿠키명'];



●세션 개시 - <html>태그 출력전에 'session_start()'함수 호출
<?php session_start();   ?> 




●세션 변수 주고받기 - 수퍼 글로벌 변수'$_SESSION'에 값을 저장하면 동일한 세션에서 값을 공유할수 있다
ex)
$_SESSION['세션변수']=세션변수값;   //세션변수에는 '$'안 붙인다



●세션 종료 - 'session_destroy()'함수 호출





●글로벌(global) 변수 - 함수 밖에서 정의된 변수나 함수 안에서 'global'을 붙여 기술한 변수
ex)
$a=1;
function a(){
global $a;
print $a;
}



●수학 함수
 함수 기능 사용법 결과 
 abs  절대값  $a=abs(-100);  100
 ceil  올림  $a=ceil(100.4);  101
 floor  내림  $a=floor(100.4);  100
 round  소수점 이하 반올림  $a=round(100.4);  100
 pow  제곱  $a=pow(4,2);  16(4의 2승)
 sqrt  제곱근  $a=sqrt(25);  5(루트25)
 max  최대값 반환  $a=max(1,8,3);  8
 min  최소값 반환  $a=min(1,8,3);  1
 pi  원주율  $a=pi();  3.14~~




●수퍼 글로벌 변수 - 미리 정의되어 있는 변수로 프로그램 어디에서든지 범용적으로 사용할 수 잇다.
수퍼 글로벌 변수  기능
 $_GLOBALS 스크립트 중에서 이용할 수 있는 모든 변수에 대한 레퍼런스를 취득
 $_SERVER  웹 서버나 실행중인 스크립트에 고나한 정보를 취득
 $_GET  http 프로토콜의 get메소드에 의해 서식에서 스크립트로 보내지는 값을 취득
 $_POST  http 프로토콜의 post메소드에 의해 서식에서 스크립트로 보내지는 값을 취득
 $_COOKIE  http쿠키에 의해 스크립트로 보내지는 쿠키를 취득
 $_SESSION  스크립트의 세션 변수에 관한 정보를 취득
 $_ENV  환경변수를 취득
 $_FILES  서식의 http post파일 업로드에 의해 스크립트로 보내지는 정보를 취득
 $_REQUEST  $_GET, $_POST, $_COOKIE, $FILES의 값을 취득









Posted by -현's-

댓글을 달아 주세요


●if문

 if(조건식)
{내용}
else
{내용}



●if~elseif~else문
 if(조건1)
{처리1}
elseif(조건2)
{처리2}
elseif(조건3)
{처리3}
else
{처리4}



●for문
 for($i=0; 조건식; $i증감)
{처리}



●foreach문 - 배열된 요소의 수만큼 처리를 반복
 foreach($a as $b)   //$b은 취득한 요소를 저장하기 위한 변수
{처리}

ex)
<html><body>
<?php
   $a=array('a'=>1, 'b'=>2, 'c'=>3, 'd'=>4);
   foreach($a as $key=>$b) {              //'$key' 는 취득한 요소의 인덱스 값을 저장
   print "$key는 $b  \n";
}

?>
</body></html>
결과
a는 1
b는 2
c는 3
d는 4
 



●while문
 while(조건식)
{처리}


●반복문 안의 break와 continue는 주로 반복문안의 조건문에서 쓰인다
break - 반복을 중단
continue - 그 회의  반복만 중단하고 다음회로 이동


●switch문
switch(식 or 변수)
{
case 값1:               //세미콜론(;)이 아닌 콜론(:)임
       처리1
       break;
case 값2:
       처리2
       break;
case 값3:
       처리4
       break;
default:
       처리;
}



●함수 정의
function 함수명(인자)
{처리} 


●date()함수 - 서버의 현재 시각을 표시
Y - 서기년
m - 월
j - 일
A - am or pm
h - 시
i - 분
s -초
D - 요일
ex)
$time=date("Y년 m월 j일 Ah:i");
print $time;


●파일 삽입 - require와 include를 사용
ex)
require "a.php";
include "b.php";


●require와 include의 차이
require는 파일 삽입 실패시 에러메시지가 표시되고 줄바꿈 처리는 중지되고
include는 파일 삽입 실패시 경고메시지가 표시되고 처리는 계속 실행된다.









Posted by -현's-

댓글을 달아 주세요