간단 용어 정리.. Java 2011. 12. 19. 19:32

1. 인터페이스와 추상클래스

- 인터페이스
객체생성x
추상 메소드 만을 가짐 : 선언o 정의x
다중상속 지원(,구분)
개발시간 단축, 표준화 가능, 관계 없는 클래스들의 중개, 독립적 프로그래밍

- 추상클래스
객체생성x
구현된 메소드와 멤버변수 : 선언o 정의x
클래스와 메소드에서만 사용 가능
추상 클래스를 상속 받은 하위 클래스는 추상 메소드를 오버라이딩


2. MVC1 / MVC2

MVC : Graphical User Interface를 사용할 때, Model 계층과 View 계층 사이에 Control 계층을 만들어서 사용하는 것

- MVC1
개발시간 단축되나 html, javascript, jsp 로직이 한페이지에 쓰여 유지보수 어려움
디자이너와 개발자간의 충돌 야기

- MVC2
로직과 프리젠테이션의 분리로 유지보수와 확장 용이, 디자이너와 개발자간의 책임소재 명확
MVC구조에 대한 개발자의 이해 필요, 개발기간 증가


3. 프레임워크

어플리케이션 작성을 위한 '틀'
재사용 가능, 유지보수 용이한 프로그램 제작,
하위클래스/어플리케이션에 의해 직접 호출되어 상호 작용하는 클래스들의 집합


4. request / response

- request : 클라이언트의 요청 Parameter 읽어오기

- response : 응답 결과 클라이언트에게 전송하기


5. 서블릿의 라이프 사이클

- init() : 로딩(객체생성)시 단 한번 호출

- service() : 요청시마다 반복적으로 호출

- destroy() : 더이상 서비스를 하지 않을 때 메모리에서 제거(GC)



6. JDK 1.4, 5.0, 6.0의 차이점

- 향상된 for() 문 : 기존의 for문에서 for(String str : data) 식의 형식 가능

- Generics 기능 추가 : 컬렉션클래스에 형을 지정함으로 실행시 캐스팅 불필요

- AutoBoxing : 기본자료형(int, double..)에서 그 기본형의 랩퍼 클래스로의 변환 용이



7. Set, Map, List에 대하여 설명

- Set 인터페이스 : 중복이 없는 집합 객체 (Collection)

- List 인터페이스
순서가 있는 집합 객체, 중복허용, 상송받는 클래스중 가장 많이 사용하는 것은 Vector (Collection)

- Map 인터페이스 : 중복이 없는 하나의 키값에 대응하는 하나의 값을 갖는 자료구조


'Java' 카테고리의 다른 글

간단 용어 정리..  (0) 2011.12.19
문제...자바..  (0) 2011.11.06
Java_09  (0) 2011.11.03
Java_08  (0) 2011.11.02
Java_07  (0) 2011.11.01
Java_06  (0) 2011.10.31
개요 JSP 2011. 12. 7. 11:55

■ 웹 어플리케이션
   웹 브라우저의 요청에 대하여 처리해서 결과를 보여주는 프로그램을 의미

 ο 웹 어플리케이션의 구성요소
   1. 웹 브라우저
       사용자에게 화면(즉, User Interface)을 제공

    2. 웹 서버(WAS : Web Application Server)
       웹 브라우저를 이용하여 World Wide Web을 사용하는 클라이언트에게 미리 저장된 하이퍼 텍스트(Hyper Text)를 제공하는 서버로 유닉스 기반의 아파치 서버와 마이크로소프트 윈도우 기반의 IIS 서버와 등이 있다.

      [종류]
       Apache server, Apache-SSL server, IIS(Internet Information Server), jeus(tmax) 등

     3. 어플리케이션 서버
         처리 결과 값을 웹 서버에 전달

     4. 데이터베이스
        데이터 저장

      - DBMS 종류
        오라클, IBM(DB2+인포믹스(Informix)), Microsoft SQL Server, 사이베이스(Sybase), 티베로 RDBMS(티멕스), MySql 등


■ 서블릿 개요
 ο 개요
    서블릿은 Java 언어를 기반으로 하여 동적인 컨텐츠를 생성하며 Java 코드 안에 HTML 태그가 혼재되어 있어서 그 효율성이 떨어진다.

    - 서블릿은 멀티쓰레딩에 의해 사용자 요구를 처리하고 가공해서 이에 대한 결과를 전달한다.
    - JSP 는 주로 UI(사용자용 뷰) 의 구현에 사용되고 서블릿은 UI와 프로그램 로직사이를 제어해주는 역할에 주로 사용 되어 진다.


 ο Servlet의 장점
   - 요청 시 마다 새로운 Process를 생성하지 않는다.
   - 서버의 Overhead를 줄일 수 있다.
   - 각 요청을 thread로 동작시키기 때문에 좀 더 효과적인 다중작업(multi-tasking)이 가능하다.
   - Servlet은 모든 요청에 대해 최초 한번의 Memory Loading을 한다.
   - Platform에 독립적이다.
   - 보안모델을 사용할 수 있다.


 ο 작성 방법
  1. 첫번째 방법
     서블릿은 Servlet 인터페이스를 구현한 GenericServlet 추상클래스를 상속 받아 service() 메소드를 재정의한다.

  2. 두번째 방법
     - GenericServlet 클래스를 상속 받은 http 프로토콜에 맞게 확장한 HttpServlet 클래스를 상속 받아 doGet(), doPost()등의 메소드를 재정의 한다.
     - HttpServlet 클래스의 주요 메소드는 service(), doGet(), doPost(), doHead() 등이 있다.


 ο Servlet Container
  1. 개요
     - 웹 서버는 JSP와 서블릿 자체를 실행하지 못하므로 JVM을 내장한 컨테이너라는 서블릿 실행환경이 필요하다.
     - 대표적인 웹 컨테이너
       자카르타 톰켓, Resin, 웹 로직 등

  2. 역활
     - Servlet 을 탑재, 인스턴스 화 및 초기화 등 Servlet의 생명주기를 관리한다.
     - 웹 응용 프로그램을 위해 보안, 병행 성 관리, 라이프 사이클 관리 등의 서비스를 제공한다.
     - 보안(security)은 사용자 인증과 제한된 사용자만 접근할 수 있도록 지원
     - 병행 성 관리(Concurrency Management)는 여러 개의 작업이 동시에 이루어지는 경우에 스레드를 통하여 작업이 보다 효과적으로 이루어지도록 지원
     - 라이프 사이클 관리(Life Cycle Management)는 웹 응용 프로그램이 생성되고, 실행되고, 삭제되는 라이프 사이클 전 과정을 지원


 ο Servlet Life Cycle
    - init(), service(), destory()의 세 개의 메소드에 의한 생명주기를 갖는다.

    - 처음으로 서블릿의 요청이 들어 왔을 때 해당 서블릿은 서블릿 컨테이너에 의해 자동으로 메모리에 로딩 되어 진다.
      메모리로 서블릿 클래스가 로딩 된 후 바로 객체를 생성하게 되며 객체 생성과 동시에 init() 메소드를 호출하게 된다.
    - 서블릿이 로딩 될 때 단 한번 init() 메소드를 호출한다.
    - init() 메소드까지 호출 하였다면 service() 메소드를 수행하여 클라이언트의 요청에 반응한다.
    - 서블릿 객체가 더 이상 서비스를 하지 않고 있는 경우 메모리에서 제거되며 이때 호출되어지는 메소드는 destroy() 메소드이다.
       destroy() 메소드가 호출되면 가비지콜렉터는 객체의 메모리를 제거하게 된다.
    - init() 과 destroy() 는 단 한번 호출하게 되며 클라이언트의 요청에 따라 service() 메소드는 요청이 있을 때 마다 호출하게 된다.


 ο 서블릿의 동작 순서
   - 클라이언트의 요청
   - 서블릿 Handler 에서 요청 받음
   - 서블릿 컨테이너에서 해당 서블릿 검색
   - 해당 서블릿이 비지니스 로직 처리
  -  모든 작업이 완료 되었다면 응답으로 결과를 전송 한다.


 ο 디플로이먼트 디스크립터(deployment descriptor, 배포 설명자)
   1. 개요
      - 톰켓 에서의 Deployment Descriptor(배치 기술서)는 web.xml로 각 어플리케이션의 환경을 설정하는 부분을 담당
      - WAR 파일이 패키지 될 때 같이 포함되고, root directory 밑에 /WEB-INF 디렉토리에 위치한다.

   2. servlet과 servlet-mapping 태그
      - web.xml 문서의 servlet과 servlet-mapping 태그는 서블릿을 매핑 하는 것으로 보안과 주소를 간략화 하기 위해 사용한다.

      <servlet>
           <servlet-name>서블릿_이름</servlet-name>
           <servlet-class>패키지를 포함한 클래스_명</servlet-class>
       </servlet>
       <servlet-mapping>
         <servlet-name>서블릿_이름</servlet-name>
         <url-pattern>경로패턴</url-pattern>
       </servlet-mapping>

     - url-pattern은 어떠한 URL 경로로 접근할 수 있는지를 명시한다.

    3. deployment descriptor 이점
      - 이미 테스트된 소스 코드에 대한 수정을 최소화 한다.
      - 소스 코드 없이 애플리케이션을 목적에 맞게 수정할 수 있다.
      - 코드 변경이나 컴파일을 하지 않고도 서버 자원(DB 등등)을 바꿀 수 있다.
      - 접근 제어 목록, 보안 역할과 같은 보안에 관련된 업무도 관리할 수 있다.
      - xml 파일로 되어 있으므로 프로그래머가 아닌 사람도 설정할 수 있다.


 ο Servlet 인터페이스
  서블릿 프로그램은 init(), service(), destroy()의 세 가지 메소드에 의해서 초기화, 서비스, 파괴의 과정을 거치는데 이 세 메소드는 javax.servlet.Servlet 인터페이스에 선언되어 있다.


 ο GenericServlet abstract 클래스
    ServletConfig Interface, Servlet Interface, Serializable Inteface를 구현한 클래스로 네트워크 통신에 적합한 새로운 클래스로 Servlet과 ServletConfig는 서블릿 통신을 할 때 필요한 기본적인 메소드를 가지고 있으며, GenericServlet 에서 모두 구현하고 있다. 하지만 GenericServlet은 abstract 클래스이기 때문에 그 자체로는 사용할 수 없으며 반드시 상속해야만 사용할 수 있다.


 ο HttpServlet 클래스
    GenericServlet 클래스를 상속 받은 클래스로 일반적으로 웹 클라이언트로부터 온 요청을 받아서 처리하고, 그 결과를 다시 웹 클라이언트에게 되돌려 주는 작업을 수행한다.


 ο ServletRequest와 HttpServletRequest 인터페이스
   서블릿 엔진이 클라이언트로부터 온 요청에 대한 정보를 서블릿에게 전달하기 위해 사용하는 기능을 정의하고 있다.(client -> server)


 ο ServletResponse와 HttpServletResponse 인터페이스
   클라이언트 요청에 대한 응답을 MIME 자료 형태로 반환하는 데 사용하며, Binary Data의 전송을 위해서는 ServletOutputStream 형태의 getOutputStream() 을 사용하고, 일반 text data를 전송하시 위해서는 PrintWriter object 형태의 getWriter() 를 사용한다. Text data나 Binary data의 혼합형태(Multipart Response) 처리를 위해서는 ServletOutputStream을 이용해야 한다.(server->client)

   - MIME(Multipurpose Internet Message Extensions)
     Internet Message를 통해서 여러 가지 내용을 보낼 수 있도록 확장한 규격이다. 예를 들어 SMTP는 ASCII 문자로된 RFC 822 형식의 메시지만 전송 가능하다. 한국어와 같이 2바이트로 구성되는 다중 언어, 실행 파일, 그림 파일과 같은 이진 파일도 SMTP로 전송될 수 있도록 ASCII코드로 변환하는 코드변환 방식을 MIME라 한다.


■ JSP(Java Server Pages) 개요
 ο 개요
    자바를 서버환경에서 사용하는 스크립트 방식의 언어로 단일 스레드로 클라이언트의 요청에 서비스한다. 요청이 있을 때마다 프로세스를 생성하는 기존의 CGI와는 달리 하나의 메모리를 공유하면서 서비스되는 원리는 서버 측에 부하를 줄여주며, JSP 내부에는 보여주는 코드만 작성하고, 직접 작업하는 부분은 자바 빈으로 구성하여 분리 할 수 있다. 이것은 서로 영향을 주지 않고 수정할 수 있는 장점을 가지고 있으며, JAVA의 장점인 재사용성을 높일 수 있다.

    - 동적(dynamic)인 웹 페이지를 쉽게 만들 수 있는 방법을 제공하는 자바를 기반으로 하고 있는 스크립트 언어(Server Side Script)
    - JSP 2.0은 J2EE(Java2 Enterprise Edition) 1.4 규약에 포함되어 있다.
    - 자바 엔터프라이즈 어플리케이션에서 UI(User Interface)영역을 담당
    - JSP를 최초로 요청할 때 서블릿으로 변환되고, 컴파일 되어야 하는 약점을 개선하기 위해 서블릿 컨테이너에서는 JSPC(JSP Precompiler)기능을 지원한다
      이는 서버에서 서비스하기 전에 일괄적으로 모든 JSP를 서블릿으로 변환시키기 때문에 최초로 페이지 요청이 들어와도 빠르게 응답할 수 있다.


 ο JSP 동작원리
    URL → DNS서버 → 웹 서버(JSP 페이지요청) → 웹 서버는 *.jsp 로 들어온 요청에 대해서 JSP 컨테이너로 전송 → JSP 파일 파싱 → 서블릿 생성 → 생성된 서블릿 컴파일 → 컴파일 된 클래스 파일을 메모리에 적재 → HTML 형태인 응답을 사용자에게 전송 →사용자의 브라우저에서 HTML 실행

 


 

'JSP' 카테고리의 다른 글

이클립스 환경설정 (Server / JSP Servlet)  (0) 2011.12.07
내부 객체와 폼 처리  (0) 2011.12.07
서블릿 참고 페이지 외  (0) 2011.12.07
개요  (0) 2011.12.07
Html,Jsp,Css_04 Html/Jsp/Javascript 2011. 10. 13. 23:45

전일에 이어 스타일시트 글자속성 중 background img 부터..

style.css 수정 후 link로 style.css파일을 import하는 tag가 입력되어 있는 style2.html에서 확인

 

8. background : 배경 설정 스타일시트

 

 8-1. background-image : 스타일 시트를 적용하는 구간 : Document, 즉 Body

 

        → BODY {background-image: url(..\HTML\img\ Untitled-1_02.gif);}

        ▲ 이미지 가져오기

 

 8-2. background-repeat : 반복여부 결정

 

        → BODY {background-repeat: no-repeat;}

                  ▲ no-repeat: 반복없이 한번만 백그라운드 이미지 사용

 

        → BODY {background-repeat: repeat;}

             ▲ repeat: 전체 무한반복 (기본값)

 

        → BODY {background-repeat: repeat-x;}

             ▲ 상단 X축 한줄만 무한반복

 

        → BODY {background-repeat: repeat-y;}

             ▲ 좌측 Y축 한줄만 무한반복

 

 8-3. background-attachment : 배경고정

 

        → BODY {background-attachment: fixed;}

             ▲ 스크롤바를 내려도 배경은 고정

 

 8-4. background-position : 배경이미지의 위치지정

 

        → background-position:50% 100%;}

             ▲ 이미지의 중심점을 기준으로 X좌표와 Y좌표를 백분율(%)로 표시

          꼭 백분율(%)이 아니라 left, center, right, top, middel, bottom값으로도 표시가능

 

 8-5. 속성의 그룹화 (8-1~8-4) : background 라는 속성명이 같아 그룹화 가능

 

        → BODY {background: url(..\HTML\img\ Untitled-1_02.gif) no-repeat fixed 50% 100%;}

        ▲ 각 속성값의 순서는 바뀌어도 관계 없음

 

# CODE

 

- 그룹을 풀어 놓은 소스

 

BODY {

             background-image:url..\HTML\img\Untitled-1_02.gif);

             background-repeat:no-repeat;

             background-attachment:fixed;

             background-position:50% 100%;

             }

 

- 그룹화 소스

 

BODY {

           background: url..\HTML\img\Untitled-1_02.gif) no-repeat fixed 50% 100%;

          }

 

- body 적용 소스 (style2.html)

 

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

 

배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>

<p>외부스타일 적용하기</p>

<div>외부스타일 적용하기2</div>

<a href="#">외부스타일 적용하기3</a>

 

 

# 결과 ▽

 

 

 

* 스타일시트를 외부에서 불러오기로 위와같이 (style.css에 속성값 저장 후 style2.html에서  <link rel="stylesheet" type="text/css" href="style.css"> 소스를 입력하여 import 하는 방식으로) 테스트 하는데 불편함이 있어 style3.html 을 작성 후 전일 기술했던 1. inLine방식(body안의 태그에 직접입력)  2. style태그를 이용한 방식(head안에 <style>TAG</style>)으로 바로 실행 결과를 볼 수 있도록 한다.

 

A. 스타일시트 (box) : <head>와 </head>사이에 <style>입력</style>

 

 1. box의 여백(margin)설정

 

1-1. 풀어진 소스

 

        → .margin1{margin-top:50px;}

             ▲ .클래스명{속성명:크기} : 본문 위쪽 기준 50px 여백 설정

 

        → .margin1{margin-right:50px;}

             ▲ .클래스명{속성명:크기} : 본문 오른쪽 기준 50px 여백 설정

 

        → .margin1{margin-bottom:50px;}

             ▲ .클래스명{속성명:크기} : 본문 아래쪽 기준 50px 여백 설정

 

        → .margin1{margin-left:50px; }

             ▲ .클래스명{속성명:크기} : 본문 왼쪽 기준 50px 여백 설정

 

1-2. 합쳐진 그룹소스

 

        → .margin2{margin:50px 20px 50px 20px;}

             ▲ .클래스명{속성명:top right bottom left;} : top기준 시계방향

 

# CODE

 

- 그룹을 풀어 놓은 소스

 

.margin1{

                margin-top:50px;

                margin-right:50px;

                margin-bottom:50px;

                margin-left:50px;

              }

 

- 그룹화 소스

 

.margin2{

                margin:50px 20px 50px 20px;

               }

 

- body 적용 소스 (style3.html)

 

<p class="margin1" style="background-color:#ffff66">margin1 p</p>

<div class="margin2" style="background-color:#ffcc00">margin2 div</div>

 

# 결과 ▽

 

 

 

 

 2. box의 border(선)설정

 

2-1. border-style : 선의 전체 모양

 

         → .border1{border-style: dotted;} : 점선 ▽

          

 

         → .border1{border-style: solid;} : 실선 ▽

          

 

         → .border1{border-style: dashed;} : 긴 점선 ▽

          

 

         → .border1{border-style: double;} : 이중 실선 ▽

          

 

         → .border1{border-style: groove;} : 오목하게 들어간 선 ▽

          

 

         → .border1{border-style: ridge;} : 볼록하게 나온 선 ▽

           

 

         → .border1{border-style: inset;} : 왼쪽에 빛이 비춰져 오목한 모양의 명암 ▽

         

 

         → .border1{border-style: outset;} : 왼쪽에서 빛이 비춰져 볼록한 모양의 명암 ▽

          

 

              ▲ .클래스명{속성명: 선종류;} : 상하좌우 그룹화

 

  ※ 시계방향 속성이 적용되며 1개 입력시 전체적용 / 2개 상하 좌우 / 3개 입력시 상 우좌 하 / 4개 입력시 상 우 좌 하 적용 : 스타일시트내 그룹화 소스에 적용되나 그룹의그룹(2-7) 에는 각 그룹의 한 속성까지만 가져올 수 있어 불가능하다

 

2-2. border-방향-style :  선의 일부 모양

 

         → .border1{

                              border-top-style: solid;

                              border-right-style: dashed;

                              border-bottom-style: double;

                              border-left-style: groove;

                              }

              ▲ 상 : 실선 / 우 : 긴 점선 / 하 : 이중 실선 / 좌 : 오목하게 들어간 선.

                  그룹을 풀어 놓은 형태

 

# 결과

 

 

 

 

2-3. border-width : 선의 전체 두께, 대개는 1px로 사용

 

         → .border1{border-width:10px;}

              ▲ .클래스명{속성명:선두께;} : 상하좌우 그룹화

 

2-4. border-방향-width : 선의 일부 두께

 

         → .border1{

                              border-top-width: 5px;  

                              border-right-width: 20px;

                              border-bottom-width: 5px;

                              border-left-width: 20px;

                              }

              ▲ 상 : 5px / 우 : 20px / 하 : 5px / 좌 : 20px.

                  그룹을 풀어 놓은 형태

 

# 결과  (style은 solid적용)

 

 

 

 

2-5. border-color : 선의 전체 색상

 

         → .border1{border-color: red;}

             ▲ .클래스명{속성명:선색상;} : 상하좌우 그룹화

 

2-6. boder-방향-color : 선의 일부 색상

 

         → .border1{

                              border-top-color: #ffcc00;

                              border-right-color: #ff9900;

                              border-bottom-color: #cc9900;

                              border-left-color: #ccff33;

                              }

             ▲ 상 : 5px / 우 : 20px / 하 : 5px / 좌 : 20px.

                  그룹을 풀어 놓은 형태

 

# 결과

 

 

 

 

2-7. 선(border)의 색상/두께/모양의 그룹화 : 그룹의 그룹이라 해야 될까.....?

 

       → .border1{border: green 10px solid;}

           ▲ .클래스명{속성명:색상 두께 모양} : 순서는 관계 없으나 속성은 한가지씩!

 

# 결과 ▽

 

 

 

B. 스타일시트 : <body>와 </body> 사이에 inLine방식입력

 

 1. div style

 

1-1. 객체의 위치설정 : static(기본값), relative(인접객체와의 상대위치설정), absolue(본문기준의 절대위치설정)

 

         → <div style="position:absolute; top:100; left:100; background:white; width:350; height:500">

             <img src="..\html\img\week\sun.jpg"></div>

             ▲ background는 설정하지 않아도 기본이 투명이라 없게하고 싶다면 
                 white라도 적용 해야 한다.
객체의 위치값에는 음수도 입력 가능

# 결과 ▽

 

 

 

 

  1-2. Exam : 공통속성=solid외곽선 박스의 사이즈 가로세로 200

                        다음과 같은 형태를 구현하라

 

 

         → <head>와</head>사이에 <style>여기에 입력</style>

         → DIV {position:absolute; width:200; height:200; border:solid 1px black;}

             .one {top:100; left:100; z-index:731564832145967;}

             .two {

                      top:250; left:160; text-align:center; vertical-align:50%;

                      background:#3399cc; font-size:30pt; letter-spacing:10px;

                      z-index:731554832145967; vertical-align:bottom}

              .three {top:180; left:50; z-index:730554832145967}

             ▲ 레이어의 순위설정 : z-index:양의 정수, 값이 클 수록 위쪽

                레이어의 표시여부 결정 : visibility=visible(보임), hidden(숨김)

 

         → <body>와</body>사이에 div 태그 입력

             <div class="one">

              <table border="1" width="100%" height="100%">

              <tr>

                           <th align="center">좋아하는<br>과일이름</th>

                           <th align="center">싫어하는<br>과일이름</th>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              </table>

              </div>

 

              <div class="two">

              <br><br><br><br><br><br><b>엄기백</b>

              </div>

 

              <div class="three">

              <img src="..\html\img\week\sun.jpg" width="200" height="200">

              </div>

 

# 결과 ▽

 

 

 

  1-3. Exam : 1-2. Exam 의 style소스를 수정하고 input 태그를 넣어 버튼을 활성화 후

         이미지를 보이거나 숨기는 버튼을 만들어본다.

 

         - 함수에 클래스명을 쓸 수 없어 아이디로 style태그의 id명과 body태그도
            class대신
id로 수정하고 body태그내에 input태그로 버튼을 만들되
            onClick이벤트에
onClick="함수명('상수','상수')" 를 넣고 script함수
            선언시 변수를 두개 선언한다.

 

         - 이유인즉, body의 onClick시 실행되는 함수의 상수가 스크립트내에 함수명()
            괄호안에 변수값에 저장되며
if else 구문으로 두번째 값인 1,2 가 즉 n이
            1과 같을때 visible(보이기)을 실행하도록 하고
그것이 아닐때 hidden(숨기기)
            을 실행하도록 짜 놓은 스크립트....-_-a 인것 같다.

           
설명을 들어도 잘 이해가 가지 않아 그냥 그렇겠거니 한 결론..

 

         → #one{top:100; left:100; z-index:731564832145967;}

              #two{

                           top:250; left:160; text-align:center; vertical-align:50%;

                           background:#3399cc; font-size:30pt; letter-spacing:10px;

                           z-index:731554832145967; vertical-align:bottom}

              #three{top:180; left:50; z-index:730554832145967}      

             ▲ <head>내의 <style> 태그 수정

 

         → <script language="javascript"> // language="javascript"는 생략가능

              function show(p,n){

                           if(n==1){

                           document.all[p].style.visibility = "visible"; // 스타일시트 적용은 자바스크립트에서 .all['이름'].

                           }else{

                           document.all[p].style.visibility = "hidden"; // 함수명(변수,변수)

                                    }

                           }           

              </script>

              ▲ <head>내의 <script> 태그 수정 

 

         → <input type="button" value="이미지보이기" onClick="show('three','1')"> <!-- 함수명('상수','상수') -->

             <input type="button" value="이미지숨기기" onClick="show('three','2')">

             <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

             <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

             <input type="button" value="표보이기" onClick="show('one','1')"> <!-- 1번을 show, 2번을 hidden의

              역할로 지정-->

             <input type="button" value="표숨기기" onClick="show('one','2')">

             <input type="button" value="글자보이기" onClick="show('two','1')">

             <input type="button" value="글자숨기기" onClick="show('two','2')"> 

              ▲ <body>내에 <input> 태그 입력

 

         → <div class="one">

              <table border="1" width="100%" height="100%">

              <tr>

                           <th align="center">좋아하는<br>과일이름</th>

                           <th align="center">싫어하는<br>과일이름</th>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              </table>

              </div>

 

              <div class="two">

              <br><br><br><br><br><br><b>엄기백</b>

              </div>

 

              <div class="three">

              <img src="..\html\img\week\sun.jpg" width="200" height="200">

              </div>

             ▲ <body>내의 <div> 태그 수정

 

# 결과 ▽

 

 

 

C. 스크롤바 스타일시트 : <style>태그 (<head>사이에 입력)

 

 1. 속성 : face(전체), shadow(그림자:오른쪽아래), hightlight(밝은곳:왼쪽위),
                track(스크롤트랙),
arrow(화살표)

     → BODY,TEXTAREA {

                                        scrollbar-face-color:white; /* 전체 색깔 */

                                        scrollbar-shadow-color:black; /* 그림자 색깔 */

                                        scrollbar-highlight-color:gray; /* 밝은곳 왼쪽 위 빛 */

                                        scrollbar-track-color:white; /* 스크롤 트랙 */

                                        scrollbar-arrow-color:#cc0000; /* 화살표 */

                                        }

        ▲ A,B와 같은 속성이겠지만 C라 따로 적었다. 자세한 설명은 필요 없을 듯.

 

# 결과 ▽

 

부분적용 face ▽

 

 

부분적용 shadow ▽

 

 

부분적용 highlight ▽

 

 

부분적용 track ▽

 

 

부분적용 arrow ▽

 

 

전체적용 ▽

 

 

 

D. A링크 스타일시트 : <style>태그 : <head>사이에 입력 후 적용 html tag <body>사이 입력

 

 1. 속성 : link(기본값), visited(방문이력이있는링크), hover(마우스롤오버), 
               active(클릭시)

 

     → A:link {color:gray; text-decoration:none;} /*기본 값☆ */

         A:visited {color:gray; text-decoration:none;} /*이미 방문 */

         A:hover {color:green; text-decoration:underline;} /*마우스 롤오버*/

         A:active {color:red; text-decoration:underline;} /*클릭했을 때*/

 

         DIV {

                 position:absolute; width:200; height:200;

                 border:solid 1px black;          

                }

        ▲ A,B,C와 같은 속성이겠지만 D라고 따로 적었다. 자세한 설명은 필요 없을 듯.

           순서(link→visited→hover→active)도 영향을 받는다.        

           : ←는 가상요소. 즉 소스☆를 읽어보면 "링크라는 A태그의 가상요소(링크된
           객체의 속성지정)"

           위 태그는 <style>태그로 <head>사이에 입력되는 소스

 

     → <a href="http://www.naver.com/" target="_blank">A링크 테스트 A링크 네이버</a><br>

         <a href="http://www.daum.net/" target="_blank">A링크 테스트 A링크 다음</a><br>

         <a href="http://www.paran.com/" target="_blank">A링크 테스트 A링크 파란</a><br>

         <a href="http://www.chol.com/" target="_blank">A링크 테스트 A링크 천리안</a><br>

         <a href="http://www.yahoo.co.kr/" target="_blank">A링크 테스트 A링크 야후</a><br>

         <a href="http://www.google.co.kr/" target="_blank">A링크 테스트 A링크 구글</a><br>

        ▲ 위 태그는 <body>사이에 입력되는 소스

 

# 결과 ▽

 

기본값 (=이미 방문) ▽

 

 

마우스 롤오버 ▽

 

 

클릭했을 때 ▽

 

 

 

E. document : <script>와 </script>사이에 입력

 

 1. write : 화면상에 값을 출력하는 태그이며 주석문으로 전체 내용 기술함

 

 <script>

  a = 10+'20'; // 자동으로 형선언

  document.write("<b>"+a+"<b>"+'<font color="red">홍길동</font>') // body에 출력 / 문자는 ""안에 / 숫자+문자=숫자문자 연결된다,

   // 즉 +는 연결하는 기호다

   // 자바스크립트안에서 html 태그를 입력하기 위해서는 반드시 "" 안에 들어가야 한다. 위에서 속성값을 "red"로 쓰니 오류 나네..

   // 따옴표를 쓰면 안되지만 죽어도 해야겠다 하면 바깥이 '싱글따옴표일때 해당구간을 "더블로 바깥이 "더블이라면 반대

   // 변수는 ""따옴표 안에 들어가면 안된다. // 스크립트에서만 해당되는것: " 와 ' 중 무엇을 써도 관계 없다. 자바에서는 안됨

 

   document.write("<br><img src ='..\HTML\img\blog_img.jpg' style='border:solid 1px green'>"); // 경로에 역슬러쉬x는 스크립트 오류 발생.

   // 16진수를 표시하는 0x라는 수식 때문인듯 한다지만 \x 라는 말이 붙음으로 오류가 나는건 이해가 잘 안됨.. \n 이라면 모를까

   // \n은 오류 없음 , \0은 오류 없고 이미지 표시만 안됨.. 프로그램 창시자가 8진수에 안좋은 추억이 있는듯?

   // 특정 이미지명 + 역슬러쉬 = 스크립트 오류. 결론은 경로에 역슬러쉬를 쓰지 말고 만약 쓴다면 x라는 단어가 폴더나 파일명에 첫글자로 오지 않게 할것;;

 

   b="<br><img src = ../HTML/img/blog_img.jpg style='border:solid 1px green'>"

 

   document.write(b);

 

   // 연산자 (+, -, *, /, %(나머지), ++(1씩증가), --(1씩감소) )

 

   num=5;

   num += 1; //num=num+1; //num++;

   num -= 1; //num=num-1; //num--; 대입연산자(+=, -=, *=, /=, %=, =): 4칙연산이 다 된다.

 

   document.write("<br><br>"+num);

   //관계연산자 ( >, >=, <, <=, ==, != )

   c=10>20;

   document.write("<br>"+c);

 

   //논리연산자 ( &&(and), ||(or), !(not))

 

   //조건연산자 if문없이 조건을 비교 후 둘중 참 또는 거짓을 출력하는 연산

   //result = (조건식)? 조건식의결과가True일때 : 조건식의결과가False일때 ;

   result=(num>5)? num*2: num;

   document.write("<br>"+result);

   </script>

 

# 결과

 

 

 

F. if ~ else : 만약에 OO하다면 if 다음을 실행하고 그렇지 않다면 else 다음을 실행

 

<script>

num = prompt("1~100사이의 값을 입력하세요..","") // 사용자가 입력할 수 있는 대화상자

// 입력한 값이 짝수 인지 홀수 인지 구별해서 결과 출력

if(num%2==1){ //참

                                                     document.write(num+"은(는) 홀수입니다.....");

                                        }

else{ //거짓

                  document.write(num+"은(는) 짝수입니다.....");

             }

</script>

 

# 결과 ▽

 

 

 

G. eval : 문자열의 속성이 가지고 있는 값으로 자동으로 형 변환

 

<script>

                  result = eval(prompt("수식을 입력하세요..",""));

             // eval위치 : 아래에 위치해도 위와 아래 둘다 같은 의미, 적용은→ write((eval(result));

            document.write(result);  // 화면상에 출력을 원하지 않을 땐 삭제

</script>

 

# 결과 ▽

 


'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
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
Html_01 Html/Jsp/Javascript 2011. 10. 10. 22:37

기본적인 Tag만 알고 있는 상태였지만 금일 기점 시작한 학원 강의에서 다시한번 되뇌이는
부분과 새롭게 알게된 Html의 수업내용을 정리해 본다.

Html의 기원: 미국방성의 텍스트위주의 정보교환을 위해 만들어졌다. (Hyper Text Markup Language) 

css: 스타일시트, 페이지별 공통속성이라던가 외부에서 작성되어져 삽입되거나 Body tag / Style tag등에 사용된다.

JavaScript: 첫수업은 html로, javascript에 대해선 깊게 들어가지 않았으나 여타 다른 언어들에 비해 코드 작성의 문제로 인한 Error발생시 알려주지 않는 경우가 많아 매우 까다롭다.

 

* Web Language 설명: 아래와 같은 언어로 코딩하여 Web Browser로 클라이언트가 접속하여 페이지를 볼 수 있게 된다.

 1. JSP(Java)

  - 실행을 위해 Tomcat이라는 Server가 필요하며 서버 언어로 구분된다.

  - Windows / Linux(Dos스타일이라 함) 운영체제에서 실행 가능

 2. PHP

  - 실행을 위해 Apache라는 Server가 필요하며 서버 언어로 구분된다.

  - Windows / Linux 운영체제에서 실행 가능

 3. ASP

  - 실행을 위해 IIS라는 Server가 필요하며 서버 언어로 구분된다.

  - Windows 운영체제에서만 실행 가능

 4. Html

  - 실행을 위해 Server가 없이도 테스트가 가능하여 클라이언트 언어로 구분된다.

 

* Java계열은 Tool, Compiler 모두 Open / Free.. 쉽게 한국말로 공짜란다.

* Cafe(goguma777)에 Dos 및 Linux 등에 익숙해질만한 자료가 있으니 참고 바란다고 함.

* 게시판(Jsp, Php, Asp 등으로 만들어진)에 입력된 자료가 DB에 저장된다.

* DB→Oracle / MySQL

 

Html 코딩 Tool로 주로 EditPlus를 사용한다.

프로그램 다운로드 하여 사용시 30일 쉐어웨어 버젼이다. 크랙을 사용하거나 정품 라이센스를 사거나 하는 건 판단에 맡김

외에 윈도우 기본프로그램인 메모장 / 워드패드를 사용하여도 무방하나 불편할 것이다.

타 언어 코딩시 Eclipse, iflatform 등의 프로그램도 사용한다 한다.

 

* Tip: Edit plus 브라우저보기:Ctrl+B / 편집화면보기:Ctrl+E

 

* Hyper Text

  - 링크로 이루어진 언어

  - Tag로 이루어져 있다.(명령어)

  - 대체적으로 시작태그 <code> 와 끝태그 </code>로 이루어져 있다.

  - 시작태그로만 이루어져 있는 경우도 있다. ex) <br>

  - 끝태그를 생략 가능한 경우도 있다. ex) <p></p>

  - 링크를 클릭시 현재창(기본값)외 새창(_blank)으로도 열 수 있다. ex) <a href="링크주소" target="_blank">text</a>

 

# 보통문서에 입력하여 html저장 시 body tag에 입력됨을 확인

 1. 보통문서에 Text 입력 후 index.html 로 저장

 2. HTML페이지에서 <body>와 </body>사이에 Text 입력후 index2.html 로 저장

 

 ▲ 결과가 같음을 확인 한다.

 

# 페이지의 제목 입력하기

<html>
 <head>
 <title>페이지의 제목</title>
 </head>

 <body>
 
 </body>
</html>


▲ 위와 같이 head tag사이에 <title>페이지의 제목</title>으로 입력한다.

 

* Tip: EditPlus에서 .bak 확장자의 백업파일이 불필요할시- 도구-기본설정-항목(파일) 체크 해제

 

* Font 속성Tag

 - Color

  · 색상의 종류는 256*256*256 (16,777,216)가지라 한다. RGB코드표 참고

  · <font color = "#색상코드">text</font>

  · 속성 태그는 속성을 지정하지 않을 땐 아무런 기능이 없다.

    ex) <font color = "">text</font>

    그러므로 필요 없다면 생략

 - Size

  · html에서만 글자크기에 제한이 있다. (작고)1~7(크다)

  · 기본값은 3이며 스타일시트에서는 더 크게 가능하다

  · <font size="1~7숫자">text</font>

 - Face

  · 쉽게 말해 글꼴

  · <font face="돋움">text</font>

  · Tip: 돋움은 글자폭이 가변 / 돋움'체'는 글자폭이 고정이다.

 

* Tip: RGB코드표- 16진수로 이루어져 있으며 F가 15로 흰색에 가깝고 0은 검은색에 가깝다. 궂이 외울 필요는 없다.

색상코드 앞에 #을 붙이지 않아도 실행되나 코딩시 다른 명령어와의 식별의 용이함을 위해서나 오류 방지를 위해

#을 붙이는 것이 일반적이다. 따옴표(")도 같은 의미에서 권장.

 

* Tip: EditPlus, 보기-도구모음-html도구모음 을 활성화시 HTML 색상코드를 기본 제공한다.

""따옴표 사이에 커서를 두고 선택하면 해당코드가 자동 립력되며 확장버튼으로 더 많은 색을 선택 가능하다.

Java 문서등에서도 필요시 html도구모음에 색상 참조 가능함(Java에선 기본이 비활성화 되어 있음)

 

* Body 속성tag 

  · bgcolor : 배경색 <body bgcolor="#색상코드">

  · background : 배경그림 <body background = "이미지경로">

    (경로지정시 현html파일의 위치를 기준으로 하위폴더는 "하위폴더명\파일명.확장자" 이고(상대경로)

     상위폴더는 "..\파일명.확장자"이다(이 또한 상대경로). 전체경로를 입력해도 된다(절대경로).

  · background > bgcolor : 포토샵으로 보자면 레이어 개념. bgcolor와 background 를 중복하여 입력시

    background의 투명인 부분이 있을 때 bgcolor가 보인다 보면 된다.

    <body bgcolor="black" background="img\img.jpg">

  · text : 기본 글자색 <body text="#색상코드">

  · link : 아직 방문이력이 없는 하이퍼링크가 적용된 텍스트/이미지(외곽선)등의 색깔

  · alink : active link, 하이퍼링크가 적용된 텍스트/이미지를 마우스 왼쪽 버튼을 클릭 후 놓지 않은 상태에의 색깔

  · vlink : visited link, 방문 이력이 있는 하이퍼링크가 적용된 텍스트/이미지등의 색깔

  · a href : 이미지나 텍스트에 하이퍼링크를 걸 수 있다. <a href="링크주소">이미지/텍스트</a>

  · 최상단에 있는 이미지의 좌측과 우측 여백 조절

    leftmargin, topmargin <body topmargin="숫자" leftmargin="숫자">

  · onLoad : Javascript 호출 ex) <body onload="alert('메시지');">

    단, onLoad는 body tag외에도 <style></style>이나 기타 다른 부분에도 삽입이 가능하다.

 

  ▲ 위와 같은 body 속성 tag는 페이지별로 다 적용해야 한다는 단점이 있다. 그래서 나온 것이 스타일시트다.

     타 페이지에 작성하여 외부요소로 불러오기가 가능하다. 라지만 아직 수업에서는 배우지 않았다.

 

 - Img 속성tag

  · 이미지 삽입 : <img src="이미지경로">

  · 이미지에 링크 : <a href="링크경로"><img src="이미지경로"></a>

  · 링크된 이미지의 외곽선 사이즈 변경 : border → <a href="링크경로"><img src="이미지경로" border="0"></a>

    border에 값으로 입력된 숫자는 pixel이며 page내 모든 이미지의 속성을 변경하는 tag로 적용하는 실사례가 많다.

    ex) 쇼핑몰의 상품 사진

  · 이미지 툴팁 : 이미지에 마우스롤오버시 tag에 입력된 글이 사용자에게 보이게 된다- alt

    <img src="경로" alt="text">

  · 이미지 크기조절: width(가로), height(세로)이며 <img src="경로" width="숫자" height="숫자"> 물론 숫자는 픽셀단위

  · 이미지 정렬: align → top, bottom, right, left가 있다. 대개 테이블 작성 후 그 안에서 적용한다.

    <img src="경로" align="top">

  · 공간 띄우기 : vspace(세로 공간 띄우기), hspace(가로 공간 띄우기) <img src="경로" vspace="숫자"> 물론 픽셀단위

 

* 단락태그 (속성이 없다)

- <br> : 줄바꿈, 여러번 사용시 N개수의 N-1만큼 빈줄생성.

- <nobr></nobr> : 브라우저의 폭을 무시하며 줄을 바꾸지 않음 (기본값: 브라우저 크기에 맞춰 자동줄바꿈)

- <wbr> : nobr 안에서의 줄바꿈

- <p></p> : 줄바꾸고 한줄 띄우기, 문단구분, align속성(left, right, center), </p>를 생략가능하지만 문단범위 설정시 유용함

- <center></center> : 가운데 정렬

- <pre></pre> : 입력한 그대로 나타남, 엔터, 스페이스 적용

- <xmp></xmp> : 위와 같은 맥락이나 태그외 특문까지 그대로 나타남

- <blockquote></blockquote> : 문단구분 및 들여쓰기, p태그와 같으나 들여쓰기 됨

- <div></div> : 스타일시트와 자바가 합쳐져 같은자리에 여러 문단 서식 적용가능, align속성

   ex) 같은 영역에 마우스 롤오버나 기타 액션으로 다른 내용표시 (포털사이트)

 

* 특수문자

- &, Ampersand → &amp;

- Nonbrakespace, 공백, 띄워쓰기 → &nbsp;

- Quotation mark("), 따옴표 → &quot;

- Copyright (ⓒ), ㅁ한자에도 있다 → &copy;

- ~보다 작다, Less Than (<) → &lt;

- ~보다 크다. Greater Than (>) → &gt;

'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