Oracle_01 Oracle 2011. 11. 7. 20:48

* 오라클 설치
일단 설치법에 앞서 오라클을 설치하면 생기게 되는 문제
- 바이러스에 취약해 진다(..아마도)
- 컴퓨터의 속도가 현저히 느려짐을 체감한다(사양이 낮은 컴은 똥컴이 된다)

1. setup.exe 실행
다운로드는 알아서 받고, 현재 버젼은 11g까지 나왔으나 실무에서 10g가 일반적이라 10g로 설치




2. 기다리시라니 기다린다.



3. 비밀번호 입력
전역 데이터베이스 이름 기억해두고
데이터베이스 암호는 특수문자를 포함하여 길게(?) 작성한다.
비밀번호를 잊었을 땐 윈도우의 Administrator 관리자의 비밀번호만 알고 있으면 쉽게 찾을 수 있다 하나
방법은 구글링-



4. 조건검사(?)

조건검사 라고는 나오는데 그냥 다음을 눌러준다.


아래와 같은 메시지로 당황할 수 있다



적당히 무시해주고 예(Y) 클릭


5. 설치 중 방화벽에서 차단 메시지가 나오면 계속 차단을 누르고 삽질을 해도 무방하다.




6. 설치
그냥 누르고 기다린다.
 




7. 설치중 화면
수분 소요



8. 설치중 화면
위의 7번의 화면에 겹쳐서 나오는 또 하나의 설치 화면





9. 설치중 화면
별 생각 없이 확인




10. 설치 완료
완료 후에는 종료 버튼을 눌러 수동으로 종료



11. 제어판-관리도구-서비스 항목 체크
OracleOraDb10g_home1TNSListener
OracleServiceORCL
두개의 서비스 항목이 상태가 시작됨으로 사용중이어야 정상 작동한다
 



- 오라클 서버접속 : sys 관리자 접속
cmd> sqlplus sys/"암호" as sysdba;
다음에 접속됨 이라고 메시지가 나온다

- 사용자 계정 추가 : sys 계정에서만 사용자 추가 가능
sql> create user 사용자명 identified by "암호";

- 사용자 접속
sql> conn 사용자명/"암호";
처음 접속시 데이터베이스에 접속할 수 있는 권한이 없어 오류가 나므로
다시 관리자로 접속하여 권한을 부여한다.
sql> conn sys/"암호" as sysdba;
sql> grant connect, resource to 사용자명;
connet : 데이터베이스 접속권한, resource : 테이블스페이스 사용권한
이제 다시 conn 사용자명/"암호"; 로 재 접속시 '연결되었습니다' 라고 메시지가 나온다

- 저장된 쿼리(*.sql) 실행
sql> @경로\파일명.sql

- 웹을 통한 오라클서버 접속 : 포트번호는 어떻게 설정되는건지 잘 모르겠음-.-a
http://자신의ip주소:5560/isqlplus

http://자신의ip주소:1158/em  관리자영역

- sqlplus를 통한 사용자 접속
cmd> sqlplus 사용자명/"암호";
sql> select * from insa;  insa.sql 내 테이블 화면 출력: 그지 같이 나옴

- sql developer 를 통한 접속
프로그램 실행 후 + 버튼을 클릭하여 접속설정 창이 뜨면
접속이름은 알아보기 좋은 것(?)으로 하고
sql plus에서 생성한 사용자 이름과 비밀번호를 입력하고
아래의 SID를 오라클 설치시 전역 데이터베이스 이름으로 한다.
테스트 후 성공시 접속 버튼을 누르고 저장, 비밀번호 저장은 꼭 체크할 것.
귀찮아지니까-





- 레코드 : 한줄

- 컬럼 : 항목, 아이템, 하나하나 모여서 자료가 된다.
  · 자료는 소문자로 작성해도 대문자로 저장되어 출력된다.

- 테이블 : 표형태의 데이터로 테이블 1개가 파일 1개라 보면 된다.
  · 데이터베이스내에 존재하는 테이블 목록 확인 : sql> select * from tab;

- 스키마 : 어떤 항목을 저장할지에 대한 구조....?
  · 테이블의 스키마(구조) 확인 : sql> desc insa;
  · 널? : 넣지 않아도 되는 항목
  · not null : 꼭 넣어야 하는 항목
  · number() : 괄호안의 숫자는 자리수로, 그 자리수 만큼 저장 가능함을 말함 38자리(???였나)까지 가능
  · vachar2 : 가변적인 문자(열), 최대값 4000자
  · date : 날짜 저장

- DQL : 데이터베이스 정보를 검색한다(select 문)

- SQL
  · 데이터 정의어 DDL : create, lock, alter
  · 데이터 조작어 DML : insert, delete, update, merge
  · 데이터 제어

- Startup : 종료된 계정 다시실행(sys, administrator....당장은 설명한 단계는 아님...)

- cmd 창으로 임시로 나가기
sql> host
cmd> exit  → 복귀

- 자료검색
select 필드명, 필드명, .... from 테이블명 where 조건

- 기술순서
from절 → where절 → group by절 → select절 → order by절

- 전체자료 출력
select * from insa;
전체자료를 출력할 경우에도 *를 사용하지 말고 컴럼(필드)명을 반드시 입력해야 한다.

- 특정 컬럼만 확인
이름, 전화번호, 부서
select name, tel, buseo from insa;

- 테이블작성에서의 필드 순서는 의미가 없으며 select 문에서의 필드 순서가 중요

- 이름, 주민번호, 출신도, 기본급, 수당 출력
select name,ssn,city,basicpay,sudang from insa;

- 계산된 결과 출력
select name, buseo, basicpay+sudang "급여" from insa;

- 산술연산자 : +, -, *, /

- 문자열 결합연산자 : ||
select name || '님' as 이름, city 출신도 from insa;
결합되는 문자(열)상수는 홑따옴표 안에 기술한다(쌍따옴표 아님)

- 필드명 변경
select name as "이름", ssn 주민번호, basicpay+sudang "급 여" from insa;
공백/특문 있으면 따옴표를 꼭 붙이고 as는 생략 가능하다.

- 조건: 기본급+수당이 200만원 이상인 사람 출력(이름, 급여)
select name 이름, basicpay+sudang 급여 from insa where (basicpay+sudang)>=2000000;

- dual 테이블
dual 테이블은 데이터 딕셔너리와 함께 오라클에 의해 자동으로 생성된 테이블로 sys계정에 존재하고
모든 사용자가 사용 가능한 테이블이다.

- 컴퓨터 시스템의 날짜 확인
select sysdate from insa;
insa 의 데이터가 60개라 60개의 날짜를 출력
select sysdate from dual;
한개만 출력

- 연산자
산술/비교 연산자는 뻔하니 생략하고
논리연산자에서 not 연산자는 시스템 성능을 저하 할 수 있으므로 사용을 자제한다.

* 문자 함수

- substr
: 오라클에서 문자열의 위치는 1부터 시작하고 -1일 땐 뒤부터 시작

-이름, 주민번호의 8번째에서 1의 길이 만큼 문자열 추출
select name, substr(ssn, 8, 1) from insa;

- 이름, 주민번호, 출신도 출력(단, 여자만 출력)
select name, ssn, city from insa where substr(ssn,8,1)/2=0 or substr(ssn,8,1)=4;

- 78~82년생만 출력(이름, 주민번호, 부서)
select name, ssn, buseo from insa where substr(ssn,1,2)>=78 and substr(ssn,1,2)<=82;

- length : 문자열의 길이를 반환
select length('대한민국') from dual; → 4

- lengthb : 문자열의 byte수를 반환
select lengthb('대한민국') from dual; → 8

- instr : 문자의 위치를 반환
select instr('korea','e') from dual; → 4

- lpad : 문자열을 제외한 공간에 지정 문자를 왼쪽에 채운다.
-- 이름, 기본급, 그래프(그래프는 기본급 100000원당 * 하나 출력)
select name, basicpay, lpad('*', basicpay/100000, '*') 그래프 from insa 
*이라는 문자를 기본급을 10만원으로 나눈값 만큼의 byte수를 갖도록 하고 왼쪽에 *을 채운다.
select lpad('Korea', 12, '*') from dual;
Korea라는 문자를 12byte크기의 공간을 갖는 문자가 되도록 하고 왼쪽 나머지 공간에 *을 채운다.

- rpad : 문자열을 제외한 공간에 지정 문자를 우측에 채운다.
select rpad('KOR : ', 10, '*') from dual;
'KOR : ' 은 공백포함 6byte, 4byte공간 우측에 별4개 채움 → KOR : ****

- replace : 지정 문자를 다른문자로 치환
select replace('Seoul Korea', ' ', '') from dual;
 ▲ 공백을 없앰
select name, city, replace(buseo, '부', '팀') from insa;
 ▲ but, 앞에 부 라는 글자가 와도 바꿔버린다. 순서에 관계 없이..
 ▼ 아래와 같이 하는 것이 정답
select name, city, substr(buseo, 1, length(buseo)-1)||'팀' 부서 from insa;
select name, rtrim(buseo, '부') 부서 from insa;

select name, rtrim(buseo, '부')||'팀' 부서 from insa;

- rtrim : 문자열 중 오른쪽에서부터 지정 문자열에 포함된 글자중 하나라도 만나면 제거한다.
공백도 지정할 수 있고 오른쪽부터 훑어 가다 지정문자열에 포함된 글자가 아닌 다른 글자를 만나면
멈추고, 그러므로 중간에 포함된 문자도 제거할 수 없다.
select rtrim('ABAAAAABBBBBABCDAB', 'AB') from dual; → ABAAAAABBBBBABCD

- ltrim : 위와 같고 왼쪽부터..
select ltrim('ABAAAAABBBBBABCDAB', 'AB') from dual; → CDAB

- trim : 문자열의 앞, 뒤 또는 앞뒤에서 공백 문자를 제거 한다. 특정 문자제거도 가능하다
select trim('   ABC    ') from dual; → ABC
select trim('A' from name); 

- round : 반올림
select round(15.193, 1) round from dual; → 15.2
1은 소수점 1째자리, -1은 1의 자리 미입력시 default 0 입력

- trunc : 단위절삭
위와 같은 형식으로 사용
select round (12345, -3) round from dual; → 12000

- mod : 나머지값
mod(m, n) m을 n으로 나눈 나머지
SELECT MOD(11, 4) "Modulus" FROM DUAL; → 3


- to_char : 숫자나 날짜를 문자열로 변환
기존 데이터의 출력형식을 기술한 형식으로 변환

select name, to_char(ibsadate, 'YYYY"년" MM"월" DD"일"') 입사일 from insa;
▲ 출력 형식을 YYYY년 MM월 DD일 로 바꿔줌

select name, to_char(ibsadate, 'YYYY') || '년' from insa;
select name, to_char(ibsadate, 'YYYY"년"') from insa;
▲ YYYY로 출력 형식을 바꾸고 '년'이라는 문자를 연결한다 

- 국가에 따른 통화 기호 출력 : L

select name, to_char(basicpay, 'L99,999,999') from insa;
▲ 기본급을 세자리당 , 로 구분하고 앞에 \을 붙인다.

- 살아온 날수 구하기

select trunc(sysdate - to_date('1983/06/08', 'yyyy/mm/dd') )살아온날수 from dual;
▲ sysdate : 시스템에 저장된 현재 날짜 반환, to_date : 문자를 날짜로 변환
... 이라지만 솔직히 sysdate - to_date 구문이 이해가 가지 않는다-_-a
현재 날짜에서 해당 날짜를 빼라는 말인가?!

- 이름, 입사일, 근무일수

select name, ibsadate, trunc(sysdate - ibsadate) from insa;

select name, ibsadate, sysdate-ibsadate from insa;
▲ 그렇다면 이것도 현재날짜-입사날짜 인거네.. trunc는 절삭 자리수 미입력으로 0이니까
소수점 1째자리에서 반올림되어 1의 자리까지 출력될 것이고.. 그런가? 그러네..

- 이름, 입사일, 단 2000년에 입사한 사람만 출력

select name, ibsadate from insa where to_char(ibsadate, 'yyyy')='2000';

select name, ibsadate from insa where substr(ibsadate, 1,2)='00';
▲ where 조건절 : 입사날짜를 to_char로 yyyy형식으로 년도를 바꾸고 그것이 2000과 같은 조건의
데이터 출력, substr은 입사날짜의 기본값이 두자리이므로 1번째 위치에서 2만큼의 문자열이
00 일때의 조건

- 주민번호를 기준으로 나이를 출력. 단, 1년은 365일로 하고 1900년도에 태어났다는 가정하에

select name, ssn, trunc((sysdate - to_date('19'||substr(ssn, 1,6), 'yyyymmdd'))/365) 나이 from insa;
▲ 현재날짜-다음의날짜(주민번호의 1위치에서 6까지의 문자열앞에 19를 붙이고 그 형식은 yyyymmdd로 하고
그 날짜를 365일로 나눈 값) to_date는 문자를 날짜로 변환하므로 계산이 되는것 같다.

- 문제1. 컴퓨터 시스템의 날짜를 다음과 같은 형식으로 출력하기
1) 2011-11-07 월요일 03:10:10
2) 2011-11-07 15:10:10
3) 2011-11-07 오후 03:10:10

select to_char(sysdate, 'yyyy-mm-dd day hh:mi:ss') from dual;
select to_char(sysdate, 'yyyy-mm-dd hh24:mi:ss') from dual;
select to_char(sysdate, 'yyyy-mm-dd am hh:mi:ss') from dual;
▲ day: 요일, hh24: 24시간제로 표시, am:오전/오후 값 표시

- 문제2. 주민번호 8번째는 성별이다. mod를 이용하여 여자이면서 서울사람만 출력(이름, 주민번호, 출신도)


select name, ssn, city from insa where (MOD(substr(ssn, 8, 1), 2)=0) and city='서울';
▲ 주민번호의 8번째 위치에서 1까지니까 123456-8 성별을 나타내는 위치에 있다.
그 위치의 값을 2로 나눈 값이 0이고(2와 4로 시작하는 주민번호) 출신도가 서울인 조건의 값 출력

- 문제3. 기본급+수당 200만원 이상인 사람중 2000년 이후에 입사한 사람만 출력(이름, 입사일, 기본급+수당)
단, 급여는 3자리마다 컴마가 출력되고 앞에 원화기호를 표시한다.

select name, ibsadate, to_char(basicpay+sudang, 'L99,999,999') 수당 from insa where basicpay+sudang>=2000000 and to_char(ibsadate, 'yyyy')>='2000';
▲  to_char를 이용하여 급여의 값을 3자리마다 출력하는 형식과 원화기호를 표시하기 위한 L99,999,999 의
형식의 문자열로 변환을 해주고 200만원 이상의 급여의 조건으로 where절 다음에 기재해 주고
to_char를 이용하여 입사 날짜형식을 yyyy로 바꿔줌과 2000년 이상의 값이 되는지 조건을 기재
말로 설명이 어렵네;;

- 문제4. 서울사람이면서 김씨만 출력(이름, 출신도)

select name, city from insa where city='서울' and substr(name,1,1)='김';
▲ where조건절에 출신도가 서울이고 이름의 1번째 위치부터 1의 위치까지의 문자열이 김 인 사람의 조건

- 문제5. 출신도가 서울, 인천, 광주인 사람 출력(이름, 출신도)

select name, city from insa where city='서울' or city='인천' or city='광주';
▲ 문제4번과 유사하다

- 문제6. 다음을 출력한다.
이름, 기본급, 수당, 급여(기본급+수당), 세금(급여*0.03), 실수령액(급여-세금) 단, 세금은 일의 자리에서 절삭한다.

select name 이름, basicpay 기본급, sudang 수당, basicpay+sudang 급여, trunc((basicpay+sudang)*0.03, -1) 세금,
(basicpay+sudang)-trunc((basicpay+sudang)*0.03, -1) 실수령액 from insa;
▲ 세금의 절삭을 위해 trunc명령어를 사용하여 기본값으로 일의 자리에서 절삭되도록 -1의 조건을 달아주고
문제에서 제기한 식대로 select 문에 출력해준다.

- 문제7. 생년월일이 1980년 2월 1일 이후에 태어난 사람만 출력한다. 이름, 주민번호, 출신도(생년월일은 주민번호 기준)

select name 이름, ssn 주민번호, city 출신도 from insa where substr(ssn, 1,6)>800201 or (substr(ssn,1,2)>=0 and substr(ssn,1,2)<=11);
▲ 조건으로 substr로 1의 위치부터 6까지의 값이 800201 보다 큰 주민번호를 가지고 있거나 1~2위치가 0이고 1~2위치가 11보다작거나 같은 조건이라고는 하는데
위에 1900년도에 태어났다는 조건의 예제를 잘 활용해보면 좀 간단하다 싶은 답안이 있을 것 같기도...

'Oracle' 카테고리의 다른 글

11g R2 - LISTAGG 함수  (0) 2012.05.21
Oracle 이론 총 정리  (2) 2011.11.21
Oracle 실습문제 (8)  (0) 2011.11.17
Oracle_03  (0) 2011.11.09
Oracle_02  (0) 2011.11.09
Oracle_01  (0) 2011.11.07
Html,Jsp,Css_09 Html/Jsp/Javascript 2011. 10. 20. 19:12
* Windows객체 (파일없이 새창띄우기) 

<html>
 <head>
  <title> Windows객체(파일없이 새창띄우기) </title>
 <script>  // 새창, 내용
  win = window.open("","w","width=300 height=300");
  // △파일명을 안썼다고해서 에러가 나지 않는다.
 
  win.document.open(); // ◁ win 안에 쓰겠다 : 내용이 대상 시작태그 역할?
     win.document.write("홍길동<br>");
     // △ win 이라는 객체에 홍길동을 출력
     win.document.write("<img src=../html/img/1.jpg>")
  win.document.close(); // ◁ 다 썼다 : 끝 태그 역할?
 
  function winClear(){
    win.document.open();
        // ▽ 팝업창의 내용 지우기 : 기존 파일이 있는 팝업이어도 그 내용까지 삭제
        win.document.clear();
    win.document.close();
  }

  function winClose(){ // 창 자체를 컨트롤 하므로 open/close 필요 없음
        // ▽ 팝업창 닫기
        win.window.close();
  }

  // window.status = "우와 신기하다" // 텍스트만 가능
 
  // 상태표시줄 텍스트가 오른쪽에서 왼쪽으로 움직이듯 보이게 출력하기
  // 텍스트 앞에 공백을 두고 공백을 한칸씩 줄여가며 글자가 오른쪽에서
  // 왼쪽으로 들어오는 것처럼 보이도록 하고 전일 했었던
  // setTimeOut("함수명",밀리초)를 이용하여 속도 조절.

  statusMsg = "☆우★와☆신★기☆하★다☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★"
  space = "";
  for (i=1; i<82; i++)
  {
    space += " ";
  }
  statusMsg = space + statusMsg;
 
  // 반복처리를 위한 함수생성
  ndx = 0;
  function winStatus(){
 
      window.status = statusMsg.substring(ndx);
      if(ndx>statusMsg.length)ndx=0; // index가 글자의 크기보다 크면 초기화 시킨다.
      // 계속 반복되면 글자수보다 큰 값의 위치를 지정하게 되어 에러→그래서 if문삽입
      ndx++;
      setTimeout("winStatus()",100) // 밀리초만큼 대기 후 함수 재 호출=반복 
  }  
    </script>
 </head>

 <body onLoad="winStatus()">
 <img src="../html/img/2.jpg" onClick="winClear()">
 <input type="button" value="팝업창닫기" onClick="winClose()">
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)


이미지 클릭시 팝업창 내용 삭제
팝업창닫기 버튼 누를시 창 사라짐



* 스크롤바 자동이동하기

<html>
 <head>
  <title> ScrollMove.html </title>
<script>
function timer(){
date = new Date(); // 변수=생성 클래스(). 시스템의 날짜를 구하는 객체
 y = date.getYear(); // date라는 객체 안에서 Year(년도)를 얻어내(get)라.
// get은method - 정보를 얻어내는 기능

 // date.setYear(2012) : 객체의 년도만 2012년으로 셋팅해라.
 m = date.getMonth()+1; // 월구하기: 0-1월 ~ 11-12월)
 d = date.getDate(); // 일구하기
 h = date.getHours(); // 시간 구하기: 자바에는 s가 없다
 mm = date.getMinutes(); // 분 구하기: 자바에는 s가 없다
 ss = date.getSeconds(); // 초 구하기: 자바에는 s가 없다

window.status = y+"년 "+m+"월 "+d+"일 "+h+"시 "+mm+"분 "+ss+"초"
}

window.setInterval("timer()",1000); // 1초에 한번씩 timer()함수를 실행하여 초가 바뀌도록
   
     // 스크롤바 자동이동하기
     i=0
     function ScrollDelay()
     {
        i++;
        if(i>700){
            clearTimeout("ScrollDelay()");
            i=0; // 다시 위로 갔을 때 작동되도록 i값 초기화
        }
        else{
        window.scrollBy(0,2); // (x,y)
        setTimeout("ScrollDelay()",15);
        }
     }  
</script>
 </head>

 <body onLoad="timer()"><center>
 <input type="button" value="이동" onClick="ScrollDelay()">
 <!-- 이동을 누르면 스크롤바가 움직이도록 하는 함수 이벤트 만들기 △-->
  
 <br><br><br><br><br><br>
<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00' align='center'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br>

<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<a href="#">위로</a>
 </center> 
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

스크롤바 이동효과를 보기 위해 <body> 소스에 잡다한 것을 많이 넣었다.
이동 버튼을 누르면 아래로 이동하고 이동 후 위로 올라가 다시 한번 이동버튼을
눌렀을 때 재작동이 용이하도록 if문에 i값을 초기화 시키는 소스를 넣었다.



* Document 객체

<html>
 <head>
  <title> Document 객체 </title>
 </head>

 <body bgcolor="#ff9900">
 <script>
    // document.write(document.속성명) : 속성값 출력
    // document.속성명='색상명' : 속성 적용

    // <body>의 글자색을 알아내겠다!! forground 전경색, 글자색
    document.write("글자색="+document.fgColor);
    // <body>의 배경색을 알아내겠다!! background 배경색
    document.write("<br>배경색="+document.bgColor);
    // <script>에서의 배경색 설정(#99ffff) : <body>설정값 무시?
    document.bgColor='#e0e0e0';
    // <script>에서의 글자색 설정(#9d9d9d) : <body>설정값 무시?
    document.fgColor='#9d9d9d';
    // link(방문이력없음)Color, alink(active:클릭후 놓지 않음)Color, vlink(visited:방문이력있음)Color
    document.linkColor='#cc0000';
    document.alinkColor='#ffcc00';
    document.vlinkColor='#0099ff';

    document.write("<br>link="+document.linkColor)
    document.write("<br>alink="+document.alinkColor)
    document.write("<br>vlink="+document.vlinkColor)
    // lastModified : 이문서가 마지막으로 업데이트된 날짜
    document.write("<br>마지막작성일="+document.lastModified);
    // title : 윈도우의 제목설정
    document.title='자바스크립트 공부중';
    // location : 현재 페이지 주소
    document.write("<br>현재페이지주소="+document.location);
    // select에 해당 색을 선택하면 배경색 바꾸기

    // 여담: 클라이언트 언어는 완벽하게 소스보기를 막을 수는 없다.
    // 방법이 있기 마련?
    // #FF0000 : FF(R)00(G)00(B)
 </script>
<hr>
 <select onChange="document.bgColor=this.options.value">
 <!--입력값이 변경시 마우스 이벤트 : onChange
 select 객체에서 옵션들 중에 선택된 값(this.options.value)
 -->
 <option value="">----배경----</option>
 <option value="ff0000">빨강</option>
 <option value="blue">파랑</option>
 <option value="black">검정</option>
 <option value="gray">회색</option>
 <option value="purple">보라</option>
 <option value="#ffcccc">#ffcccc</option>
 </select>

 <select onChange="document.fgColor=this.options.value">
 <!--입력값이 변경시 마우스 이벤트 : onChange
 select 객체에서 옵션들 중에 선택된 값(this.options.value)
 -->
 <option value="">----글자----</option>
 <option value="ff0000">빨강</option>
 <option value="blue">파랑</option>
 <option value="black">검정</option>
 <option value="gray">회색</option>
 <option value="purple">보라</option>
 <option value="#ffcccc">#ffcccc</option>
 </select>
 <hr>자바 Web 프로그래밍<br>
  <img src = "../html/img/sun.jpg"><br>
  <a href="#" target="_blank">링크테스트</a>
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

이미지는 별 의미 없이 썰렁해서 넣은 것으로 엑박이어도 관계 없어 링크가 없다.



* Image 객체

<html>
 <head>
  <title> Image 객체 </title>
 </head>

 <body>
  <!-- 이미지와 관련된 정보를 얻어내겠다!! -->
  <img id="img1" src="../html/img/dog.jpg" name="자신의 개 코스프레" align="center" border="10" hspace="20" vspace="10"> <!--id부여로 스타일시트에서 사용가능-->
<br><br><br><br>

 <script>
  // 이미지의 이름을 구하라 연예인
  document.write("<br>이름 = "+document.img1.name);
  // 파일명 : 이미지를 넣을 때 src= 하고 넣어서 src
  document.write("<br>파일명 = "+document.img1.src);
  // document.img1.src='../html/img/1.jpg'; // 이런식으로 프로그램 중간에 바꿀 수 있다..
  // 너비(width), 높이(height), 좌우여백(hspace),상하여백(vspace)
  document.write("<br>너비 = "+document.img1.width);
  document.write("<br>높이 = "+document.img1.height);
  document.write("<br>좌우여백 = "+document.img1.hspace);
  document.write("<br>상하여백 = "+document.img1.vspace);
  // 정렬(align)
  document.img1.align='right';
  document.write("<br>정렬 = "+document.img1.align);
  // 테두리 두께(border)
  document.write("<br>테두리두께 = "+document.img1.border)
  </script>
 
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

 



* onMouseOver시 상세 이미지 뜨는 테이블 작성

<html>
 <head>
  <title> Exam.마우스오버하면 상세 이미지 뜨도록 하기 </title>
 <script>
    function carDetail(n){
        document.aa.img1.src="car/car_b_0"+n+".jpg"}
// 하나의 함수에 여러 값의 결과를 얻기 위해 함수명에 (n)값을 받아 그 n값에
// 해당되는 주소를 출력하도록 하였다.
 </script>
 </head>

 <body>
 <form name="aa"> <!--폼안에 테이블을 넣고 함수에서 폼의 주소값을
 지명하지 않으면 스크립트 오류로 로드되지 않는데 이유를 모르겠다...-->
  <table cellspacing='10' cellpadding='0' border='1'><tr><td><img id='car1_1' src='car/car_a_01.jpg' onMouseOver="carDetail('1')"></td>
<td rowspan='8'><img src='car/car_b_01.jpg' id='img1'></td>

</tr><tr><td><img src='car/car_a_02.jpg' onMouseOver="carDetail('2')"></td></tr>

<tr><td><img src='car/car_a_03.jpg' onMouseOver="carDetail('3')"></td></tr>
<tr><td><img src='car/car_a_04.jpg' onMouseOver="carDetail('4')"></td></tr>
<tr><td><img src='car/car_a_05.jpg' onMouseOver="carDetail('5')"></td></tr>
<tr><td><img src='car/car_a_06.jpg' onMouseOver="carDetail('6')"></td></tr>
<tr><td><img src='car/car_a_07.jpg' onMouseOver="carDetail('7')"></td></tr>
<tr><td><img src='car/car_a_08.jpg' onMouseOver="carDetail('8')"></td></tr>
</table></form>
 </body>
</html>

# 결과

많은 이미지의 링크가 어려워 스크린샷(gif ani)으로 대체



* 페이지 이동 / history 객체

- 메타 태그(meta tag)에서의 페이지 이동
<meta http-equiv="refresh" content="5;url=http://www.daum.net">
: 5초뒤 해당 url로 이동

- 자바스크립트에서의 페이지 이동
<script>
location.href="http://www.google.co.kr"
</script>

- histoty 객체
익스플로러에서 뒤로 앞으로를 눌렀을때 사용자가 왔다 갔다 했던 경로를 저장하고 있듯이 자바스크립트에도 그것을 저장하고 있는 history라는 녀석이 있다고 한다.
실질적으로 테스트 해보진 않았다;;

ex) 홈-회원가입-member.jsp-홈/로그인 : member.jsp 는 페이지 이동시 실행되고
실질적으로도 경로에 남게 되는 것이지만 사용자 측면에서 보면 보여지지 않는 없는 경로일
뿐이다. 이런 경로를 설정해주는데에 history객체가 사용되는 듯 하다.

종류 : 전체일지 대표적인 일부의 예인지 모르겠지만 적는다
history.back() : 전페이지로 이동
history.forward() : 앞페이지로 이동
history.go(n) : n(페이지수)이 양수일땐 앞페이지, 음수일땐 전페이지


* 롤오버시 변경되는 메뉴 이미지 만들기

<html>
 <head>
  <title> RollOverMenu.html </title>
 <script>
function menu(p,imgN){
    if (p==1){ // over 기능을 수행 : eval내에 싱글따옴표 위치에 주의한다.
        eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+"_over.gif'");
    }else{ // out 기능을 수행
        eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+".gif'");
    }// eval : 문자열의 속성이 가지고 있는 값으로 자동으로 형 변환 (일전에 기술했었음)
}
 </script>
 </head>

 <body>
 <form name="aa">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td><img src="menuimg/menu_back01.gif"></td>
            <!--오버이미지의 p값을 1 / 아웃이미지의 p값을 2로 정하고
                각자의 imgN을 지정하여 하나의 함수에 여러 이미지가 접근이
                가능하도록 한다.-->
            <td onMouseOver="menu(1,1)" onMouseOut="menu(2,1)"><a href="#">
            <img src="menuimg/menu01.gif" border="0" name="m1"></a></td>
            <td onMouseOver="menu(1,2)" onMouseOut="menu(2,2)"><a href="#">
            <img src="menuimg/menu02.gif" border="0" name="m2"></a></td>
            <td onMouseOver="menu(1,3)" onMouseOut="menu(2,3)"><a href="#">
            <img src="menuimg/menu03.gif" border="0" name="m3"></a></td>
            <td onMouseOver="menu(1,4)" onMouseOut="menu(2,4)"><a href="#">
            <img src="menuimg/menu04.gif" border="0" name="m4"></a></td>
            <td onMouseOver="menu(1,5)" onMouseOut="menu(2,5)"><a href="#">
            <img src="menuimg/menu05.gif" border="0" name="m5"></a></td>
            <td onMouseOver="menu(1,6)" onMouseOut="menu(2,6)"><a href="#">
            <img src="menuimg/menu06.gif" border="0" name="m6"></a></td>
            <td onMouseOver="menu(1,7)" onMouseOut="menu(2,7)"><a href="#">
            <img src="menuimg/menu07.gif" border="0" name="m7"></a></td>
            <td onMouseOver="menu(1,8)" onMouseOut="menu(2,8)"><a href="#">
            <img src="menuimg/menu08.gif" border="0" name="m8"></a></td>

            <td><img src="menuimg/menu_back02.gif"></td>
        </tr>
    </table>
 </form>
 </body>
</html>

# 결과

이미지가 많아 링크에 어려움이 있어 스크린샷으로 대체함

'Html/Jsp/Javascript' 카테고리의 다른 글

jQuery.ajax(options)  (0) 2013.01.22
Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_03 Html/Jsp/Javascript 2011. 10. 12. 22:59

1. 전일 Login Form Tag 복습 및 Html의 한계성

 

1-1. 전일 내용 복습 및 추가내용 기술

 

* <form> Tag

 

  - action : 폼에서 submit 이 발생할 경우 실행될 다음 파일명 기술 → <form action="login.jsp">

  - method : URL의 정보공개 유무 → <form method="post">

    · get : 정보공개

    · post : 정보비공개

 

    * tip : 단, A Tag를 이용하여 다음과 같이 링크시 method 값은 항상 get (정보공개)이 될 수 있다...라지만,

             자바 등에서 숨김이 가능하지 않을까 싶기도 하다. 일단 예시

             ex) <a href="http://www.naver.com/index.jsp?uid=abcd">네이버</a>

    * tip : 주소표시줄에 URL분석- 한글은 %등으로 알수없는 text로 변환되어 표시됨

             컴퓨터가 인식하여 출력하는 text의 기준과 사용자가 입력하는 text의 기준이 다름

 

* <input> Tag : 입력 Box 생성

 

  - type 속성

    · 값 : text, password 등이 있다. 추가적인 부분은 하단()에서 추가 기재

 

1-2. Html, Client Language의 한계성

* Login화면에 내용을 입력 하여 Sever Language인 login.jsp를 호출하는 것 까지만 가능

* <input type="file"> : 업로드할 파일이 어디에 있는지 표시하는 것 까지만 구현 가능

* 위 외에도 서버에 직접 접근 하는 것은 클라이언트 언어인 Html의 한계..

 

2. Form Tag 내에 기술되는 속성 Tag

 

* <form> Tag : form tag내에 기술되어 지는 tag는 서버로 보내지는 Data 덩어리라 보면 될 것 같다.

  - action : jsp파일을 호출하는 기능, 다음에 실행될 파일이나 명령어가(?) 정해지지 않았을 땐 일반적으로 #으로

                 표기한다 → <form action="mem.jsp">

  - method : URL의 정보공개 유무, → <form method="post">

 

2-1. <input type> Tag : type(속성)="OOOO(변수)" 방식으로 입력, input box의 유형

 

  - text : 회원가입시 ID, 이름 등 말 그대로 text를 입력하는 box → <input type="text">

 

  - password : 회원가입시 비밀번호 등을 입력하는 box → <input type="password">

 

  - radio : name을 같은 명으로 지정하여 같은 그룹으로 보므로 중복선택이 안되는 버튼(원형)이 된다...

                라고는 하지만 checkbox 또한 name을 같은 명으로 지정하는걸 보면 radio라는 type속성때문에

                중복으로 선택이 되지 않는지도 모르겠다.

                value값이 서버로 전달되어지는 값이며 input태그 바깥쪽에 radio버튼에 해당되는 text를 적어

                사용자의 식별을 돕는다. 미선택 후 submit 시 Null값이 전송된다.

                기본체크값 설정 : checked 입력 (속성없는 Tag)

                → <input type="radio" name="sports" value="농구">농구

                    <input type="radio" name="sports" value="축구">축구

                    <input type="radio" name="sports" value="배구">배구

 

  - checkbox : 위와 같은 속성Tag를 입력하나 type명만 다르다.

                      체크항목의 제한을 두거나 중복된 값으로 처리 되는 것은 Javascript에서 배열로써 처리가능

                      → <input type="checkbox" name="hobby" value="쇼핑">쇼핑

                          <input type="checkbox" name="hobby" value="시체놀이">시체놀이

                          <input type="checkbox" name="hobby" value="음주가무">음주가무

 

  - file : 업로드할 파일이 어디에 있는지 표시하는 것 까지만 구현 (Server전송: jsp)

             → <input type="file" name="filename" size="50">

 

  - reset : 입력된 값을 초기화.

                reset의 범위- reset이 포함된 <form></form> 사이의 값

                한페이지에 여러 폼이 있다면 reset 이 기술되어 클릭되어진 각자의 폼에만 영향을 준다 보면 된다.

                → <input type="reset" name="res" value="지우기">

 

  - image : submit과 같이 클릭되어지면 선택/입력된 정보를 서버로 전송하는 기능

                 → <input type="image" src="img\cafe_img\button_membership.gif">

 

  - submit : 클릭되어지면 선택/입력된 정보를 서버로 전송하는 기능

                  → <input type="submit" value="등록"> 

 

  - button : 외형은 submit과 같아 보이지만 아무런 기능이 구현이 안되며 자바스크립트에서 구현이 가능하다.

                  → <input type="button" value="등록">

 

  - hidden : 웹페이지상에서는 사용자의 화면(실행결과 화면)상에 안보이더라도 프로그램상에서 서버로 데이터를

                  가지고 가야 할 경우가 많이 있는데 이때 필요 속성만 hidden으로하여 그 데이터를 서버로 전송한다

                  → <input type="hidden" value="비밀자료임" name="secret">

  - maxlength : 최대로 입력할 수 있는 글자 수 제한- ex) 주민번호 입력시 자동으로 다음탭으로 이동되는 박스 생각

                     → <input type="text" maxlength="5">

  - readonly : 속성이 없는 태그- 사용자가 수정할 수 없도록 하는것 ex) 회원정보 수정시 id수정 불가

 

2-2. <textarea> Tag : 여러줄의 글 내용을 입력할 수 있다.

 

  - name : name은 C언어로 보자면 일종의 pointer 같다. 모든 form 내의 모든 data에 이름을 부여함으로 html내에 삽입되는

               스크립트에서 if 구문을 통한 data의 접근이 이루어 진다. → <textarea name="content">

  - rows : 한꺼번에 보여질 행의 수 → <textarea rows="10">

  - cols : 한꺼번에 보여질 열의 수 → <textarea cols="50">

 

  * tip : 코딩시 식별의 용이함을 위해 들여쓰기를 하는데, textarea같은 경우엔 끝태그를 시작태그에 붙여쓰지 않으면 들여쓰기

           공간만큼 화면에 공란으로 출력되므로 불필요한 공백까지 서버에 전송되거나 사용자 측에서 불편을 야기할 수 있으므로

            들여쓰기를 무시하고 꼭 끝태그를 붙여쓰도록 한다. 스크롤바는 글자 입력에 따라 자동으로 생성된다.

 

2-3. Select, option Tag : 드롭다운기능 구현

 

  - select : 드롭다운 되는 기능의 세로 사이즈와 name지정

    · name : 2-2에서 기술 → <select name="food">

    · size : 한번에 볼 수 있는 행 결정. 폭은 조절 불가하며 현재는 중복선택(개별:Ctrl+Click/범위:Shift+Click)이 안됨

               → <select size="1">

    · multiple : 속성이 없는태그, size를 1이상의 숫자로 설정 한 뒤, multiple입력시 목록갯수N의 N-1만큼 화면에 출력

                   → <select size="3" multiple>

  - option : 드롭다운기능에 펼쳐질 행의 내용을 입력한다. 이역시 value값(작성자만 알아볼 수 있는 값 또는 식별 가능한 값)

                으로 전송될 값을 입력하며 체크박스나 라디오버튼처럼 사용자가 식별이 가능하도록 <option></option>안에

                해당 text를 입력한다. 또한 default값을 선택해 놓고 싶다면 option에 selected를 입력한다.

                → <select name="food" size="1"> 

                    <option value="not">----선택----</option>

                    <option value="water">생수먹고배채울래</option>

                    <option value="soju" selected>소주마시고취할래</option>

                    <option value="beer">맥주마시고꺼어억</option>

                    <option value="susi">참치회엔역시소주</option>

                    <option value="chicken">치킨에는역시소맥</option>

                    </select>

 

# CODE

 

<form action="mem.jsp" method="post">

Text Box <input type="text" name="name" value="aaaa" size="10" maxlength="5" readonly>
<br>
<br>
Password Box <input type="password" name="pass">
<br>
<br>
Radio Button <input type="radio" name="sports" value="농구">농구
    <input type="radio" name="sports" value="축구">축구
    <input type="radio" name="sports" value="배구" checked>배구
<br>
<br>
Check Box <input type="checkbox" name="hobby" value="쇼핑">쇼핑
    <input type="checkbox" name="hobby" value="시체놀이">시체놀이
    <input type="checkbox" name="hobby" value="음주가무" checked>음주가무
<br>
<br>
File Upload <input type="file" name="filename" size="50">
<br>
<br>
Reset(취소) <input type="reset" name="res" value="지우기">
<br>
<br>
Image, Submit, Button, Hidden<br>
<br>
Image <input type="image" src="img\cafe_img\button_membership.gif"><br>
<br>
Submit <input type="submit" value="등록"><br>

<br>
Button <input type="button" value="등록"><br>

<br>
Hidden <input type="hidden" value="비밀자료임" name="secret"><br>
<br>
TextArea 태그 - 여러줄의 글 내용을 입력할 수 있다
<br>
 <textarea name="content" rows="10" cols="50">rows: 한꺼번에 보여질 행의 수
cols: 한거번에 보여질 열의 수
여기에 글을 쓰면 이 글이 초기값이 된다.</textarea>
<br>
<br>
Select, option Tag - 드롭다운기능 구현
 <select name="food" size="1"> 
  <option value="not">----선택----</option>
  <option value="water">생수먹고배채울래</option>
  <option value="soju" selected>소주마시고취할래</option>
  <option value="beer">맥주마시고꺼어억</option>
  <option value="susi">참치회엔역시소주</option>
  <option value="chicken">치킨에는역시소맥</option>
 </select>

 <br><br><br><br>
</form>

 

# 결과 

구현이 안되어 스크린샷으로 대체

 

3. 회원등록 폼 만들기 : 부연설명은 Code내에 주석문으로 처리 (Html + Javascript)

 

# CODE

 

<html>
 <head>
  <title> 회원등록 폼만들기 </title>
 </head>

 <body>
 <script language="javascript">
 // 자바스크립트 구문의 위치는 form 위에 있건 밑에 있건 관계 없다. 사용자가 입력 후 호출하는 것이므로..
 //함수생성 function 함수명(){.....}
 function memChk() //함수명은 변수 만들듯 내 맘대로
 {
  // 자바에서는 Body → Document 생략가능
  
  //데이타 입력유무 확인하는 기능 구현
  /*
   if문 : >, >= , <, <=, ==, !=(!는 not)
   형식
    if(조건식){

    }

  */
  if(document.frm.name.value == "") // = frm.nam.value , 확인:alert(변수) , 빈따옴표""는 내용이 없다는 뜻
  // 이름값이 없는 것이 True : True일 때 {}안 실행, False일 때 {}의 다음 구문 실행
  {
   alert("이름이 없는건가..") //확인 누르면 다음줄 명령어 실행
   document.frm.name.focus(); // name이란 이름이 있는 컴퍼넌트에 포커스(커서)를 맞춘다.
   return false; // form태그에 onsubmit="return memChk()"가 false가 되는 것: 다음페이지로 안넘어간다
  }
  if(document.frm.uid.value == "")
  {
   alert("아이디가 있어야겠지..")
   document.frm.uid.focus();
   return false;
  }
  if(document.frm.pwd.value == "")
  {
   alert("비밀번호도 있어야겠지..")
   document.frm.pwd.focus();
   return false;
  }
  if(document.frm.pwdChk.value == "")
  {
   alert("비밀번호 한번 더..")
   document.frm.pwdChk.focus();
   return false;
  }
  if(frm.pwd.value != frm.pwdChk.value) // document 생략
  {
   alert("까먹었나?");
   frm.pwd.value = ""; // 비밀번호가 틀렸을 때 pwd의 값 초기화
   frm.pwdChk.value = ""; // 비밀번호가 틀렸을 때 pwdChk의 값 초기화
   frm.pwd.focus(); // document.frm.pwd.focus(); 와 같다 → 커서 위치 이동
   return false;
  }
  if(frm.hand1.value == "Not") // hand1의 value값이 Not과 같다면 (Not은 밑에 =번호선택= 값)
  {
   alert("번호를 선택하세");
   return false;
  }
  if(document.frm.hand2.value == "")
  {
   alert("핸드폰도 없나..")
   document.frm.hand2.focus();
   return false;
  }
  if(document.frm.hand3.value == "")
  {
   alert("핸드폰번호 안넣으면 가입못함")
   document.frm.hand3.focus();
   return false;
  }
  // submit, image 일땐 return true; submit 실행
  // return true; // if값이 False일때 {}안의 내용을 건너뛰고 다음 구문인 이것을 실행
  
 document.frm.submit(); // *** 버튼으로 쓸 땐 return true; 대신 이걸 쓰고 form시작 구문에 onsubmit="return memChk()"
          //불필요하여 삭제 ***

 } // {}안에 데이타 입력유무를 확인하는 코드 입력!
 // 조건식에는 true / false 의 결과의 식을 입력
 </script> <!-- language="javascript"는 생략가능, script태그 안에 체크 항목을 입력해준다.
 체크항목: 이름/아이디/비밀번호(비밀번호끼리의 확인)/전화번호(첫자리(010)는확인필요없음) 누락없이 썼는지 확인 후 submit 기능 -->
           <!-- *** ↙ 요기에 입력되었던 onsubmit="return memChk()" 이 삭제: button submit -->  
<form action="memberOK.jsp" method="post" name="frm"> <!-- onsubmit="return memChk()" 설명:submit 이벤트가 발동되면 memChk()을 구현하라 -->
<!-- name은 자바스크립트에서 필요 --> 
<!-- action으로 자바스크립트로 이동하기전 이벤트(onsubmit, 작동이 일어나는 모든 요소) 발생 필요
클릭시: onclick
submit이 발생하면 : onsubmit,
페이지 로드시 : onload (onload alert - body tag에서 했었음)
-->
<table border="1">


 <caption><font face="굴림" color="#232323"><h2><b>회원등록</b></h2><font></caption>
  <tr>
   <td width="80" align="right">이 &nbsp;&nbsp;름</td>
   <td>
    <input type="text" name="name" size="16" maxlength="28"> <!-- 긴이름까지 생각해서 maxlength 설정 --> 
   </td>
  </tr>

  <tr>
   <td align="right">아이디</td>
   <td>
    <input type="text" name="uid" size="16">
   </td>
  </tr>

  <tr>
   <td align="right">비밀번호</td>
   <td>
   <input type="password" name="pwd" size="10"> &nbsp;&nbsp;비밀번호확인 <input type="password" name="pwdChk" size="10"> <!-- 비밀번호확인: input에 name만 다르게 -->
   </td>
  </tr>

  <tr>
   <td align="right">휴대전화</td>
   <td>
    <select name="hand1">
    <option value="Not">=번호선택=</option>
    <option value="010">010</option>
    <option value="011">011</option>
    <option value="017">017</option>
    <option value="016">016</option>
    <option value="018">018</option>
    </select>
     &nbsp;-&nbsp;
    <input type="text" name="hand2" size="5" maxlength="4">
     &nbsp;-&nbsp;
    <input type="text" name="hand3" size="5" maxlength="4">
   </td>
  </tr>

  <tr>
   <td valign="top" align="right">자기소개</td>
   <td>
    <textarea name="intro" rows="3" cols="50"></textarea>
   </td>
  </tr>

  <tr>
   <td colspan="2" align="center">
    <input type="button" value="등록" onClick="memChk()"> <!-- 클릭되면 memChk()라는 함수 호출(기능실행) -->
    <!-- <input type="image" src="img\cafe_img\button_membership.gif"> -->
    <!-- image로 input 버튼을 만들었을 때***와 submit으로 input버튼을 만들었을 때의 기능은 똑같다 -->
    <!-- <input type="submit" value="등록"> submit: 서버로 전송 -->
    &nbsp;&nbsp;&nbsp;
    <input type="reset" value="다시쓰기">
   </td>
  </tr>
</table>
</form>
 </body>
</html>

 

# 결과

 

 

4. CSS

 

* 스타일시트 표기법 → 속성명:속성값;

 

  1. inLine방식 : html 태그에 직접 적용, font-family:'폰트명1' '폰트명2' '폰트명3' → 1이 없다면 2, 2가 없다면3.

                       클라이언트의 운영체제에 해당 글자체가 없을 때를 대비하여 대체폰트 지정

                       → <font style="color:#0099cc;font-size:50pt;font-family:'궁서' '돋움' '굴림';font-style:italic">

                            스타일시트 inLine방식

                           </font>

                       → <p style="color:#0099cc;font-size:50pt;font-family:'궁서' '돋움' '굴림';font-style:italic">

                            낙성대역으로 오세요

                            </p>

                        ▲ 위에서 보듯 어떤 태그이건 간에 다 적용된다(테이블이건 어디건). 필요할때마다 구간별로 다 넣어야 해서

                            불편하다. 그래서 나온것이 2. style태그를 이용한 방식, 현시점에서 봤을 때 inLine방식>style방식: 별도

                            지정된 방식은 해당 구역에만 우선순위로 적용

 

# CODE

 

<font style="color:#0099cc;font-size:50pt;font-family:'궁서' '돋움' '굴림';font-style:italic">스타일시트 inLine방식</font>

<p style="color:#0099cc;font-size:50pt;font-family:'궁서' '돋움' '굴림';font-style:italic">낙성대역으로 오셈</p>

 

# 결과

스타일시트 inLine방식

낙성대역으로 오세요

 

  2. style태그를 이용한 방식 

   

    * style태그 기술 : <어떤 때에 무엇을 써야 하나 하는건 자꾸 해봐야 아는 법이라 한다...;

   

   2-1. head태그의 시작태그와 끝태그 안에 속성값 입력 : <style></style>

 

    2-1-1. 특정 태그명(통상적으로 대문자로 표기)에 정의하는 방법 : 같은 속성일 땐 - 대문자속성명1,대문자속성명2 

           이라 입력시 같은 기능이 된다.

           → FONT {color:red; font-size:25pt;}

 

    2-1-2. 클래스로 정의하는 방법 : 같은 속성에서 다른 스타일시트 적용

           → P.a {color:red; font-size:25pt} : 임의로 정한 클래스명 a - 태그명.클래스명

           → P.b {color:blue; font-size:20pt} : 임의로 정한 클래스명 b - 태그명.글래스명

           → .c {color:green; font-size:30pt} : 태그에 구애받지 않고 이 스타일시트를 적용하고 싶은 구간이라면 아무곳에나적용

 

    2-1-3. id로 정의하는 방법 : 위와 같으나 .이 들어가는 자리에 #이 들어간다. 자바스크립트에서 합쳐지면 능력발휘!

          자바 없이는 2-2. 클래스로 정의 방법과 결과는 같다. 태그에 적용시 id="클래스명"

          → #d {color:#ff9900; font-size:15pt} : 전체태그 사용 (2-2의 세번째 정의와 같다)

          → font#e {color:#ff99cc; font-size:20pt} : 특정태그에 사용

 

    2-1-4. 중첩태그에서 사용하는 방법

          → FONT B {color:ping; font-size:20pt} : 폰트태그 안에 있는 볼드에만 적용 - 태그명 태그명 {속성명:속성값; ...}

 

   2-2. body태그의 시작태그와 끝태그 안에 적용 코드 입력 : <body></body>

         → <p class="a">스타일시트 적용되나</p>
             <p id="d">스타일시트 진짜적용되나</p>
              <p >스타일시트 진짜적용되네</p>
              <font class="c">폰트태그에 스타일적용</font><br>
              <font>중첩태그에서 <b>스타일</b>적용</font><br>
              <b>그냥볼드</b>

 

# CODE

 

<head><style>

FONT {color:red; font-size:25pt;}

P.a {color:red; font-size:25pt}

P.b {color:blue; font-size:20pt}

.c {color:green; font-size:30pt}

#d {color:#ff9900; font-size:15pt}

font#e {color:#ff99cc;font-size:20pt}

FONT B {color:pink; font-size:20pt}

</style></head>

 

<body>

<p class="a">스타일시트 적용되나</p>
<p id="d">스타일시트 진짜적용되나</p>
<p >스타일시트 진짜적용되네</p>
<font class="c">폰트태그에 스타일적용</font><br>
<font>중첩태그에서 <b>스타일</b>적용</font><br>
<b>그냥볼드</b>

</body>

 

# 결과

 

 

 

 

 

  3. 외부파일로 만들기 : 2. style태그방식이 똑같이 적용된다 : style.css로 속성을 정의 후 html에서 link를 이용, 불러온다.  

 

   3-1. css파일 만들기 : 2. style태그방식을 참고하여 속성값이 정의 된 페이지를 만들고 style.css로 저장한다

          → P {color:#9900ff; font-size:40pt;}

              TABLE {font-size:1in;}
              DIV {background-color:#99cc00;letter-spacing:20px; font-size:1cm; font-weight:900; text-decoration:overline;

              width:800;}
              A {text-decoration:none}
              INPUT {background-color:#ffccff}

   3-2. html에 외부파일(style.css) 적용하기 : 물론 body의 시작태그와 끝태그 사이에 기술되며 상단에 다음과 같이 입력

          → <link rel="stylesheet" type="text/css" href="style.css"> : rel=relation, 스타일시트와 관계를 맺어보겠다는건가..

 

# CODE

 

<link rel="stylesheet" type="text/css" href="style.css">

<p>외부스타일 적용하기</p>
<div>외부스타일 적용하기2</div>
<a href="#">외부스타일 적용하기3</a>
<table>
 <tr>
  <td>아이디</td>
  <td><input type="text" name="id"></td>
 </tr>
 <tr>
  <td>비밀번호</td>
  <td><input type="password" name="pwd"></td>
 </tr>
 <tr>
  <td colspan="2" align="center">
   <input type="submit" value="전송">
   <input type="reset" value="다시">
  </td>
 </tr>
</table>

 

# 결과

 

 

 

* 글자속성: style.css 외부파일에 만들고 style2.html에서 실행

 

  0. color : 글자색
  1. font-size : 글자의 크기(pt:point) *pt단위 외에도 여러가지(cm, mm 등등 다양)
  2. font-family : 글꼴
  3. font-style : 글자유형(normal:기본, italic:기울임꼴)
  4. font-weight : 글자두께(normal, 100~900 사이의 값), bold(400), lighter(현재글꼴의 두께-100), bolder(+100)
  5. text-decoration : 글자선(none:기본, underline:밑줄, line-through:취소선, overline:윗줄
  6. letter-spacing : 글자간격,자간(px:pixel)
  7. background-color : 적용하는 태그의 배경색
  8. background-image : 적용하는 태그의 배경그림 ...인것 같은데 한개 가지고 끝나지 않으니 내일...

 

'Html/Jsp/Javascript' 카테고리의 다른 글

[Test] 회원가입 폼 만들기  (1) 2011.10.16
Html,Jsp,Css_05  (0) 2011.10.14
Html,Jsp,Css_04  (0) 2011.10.13
Html,Jsp,Css_03  (0) 2011.10.12
Html_02  (0) 2011.10.11
Html_01  (0) 2011.10.10