팡상닷컴

리스트 태그 < OL, UL, LI >

Programming/Web/2009. 5. 25. 21:06


리스트 태그는 문장을 정렬하는 데 사용됩니다. 주제, 소주제, 본문을 띄어쓰기로 띄워서 구분하는 것보다. 일정한 간격으로 띄워서 번호를 붙이거나, 불릿●)를 붙여서 사용하면 읽기도 편하고 짜임새있게 글을 작성할 수 있습니다. 이때 사용하는 태그가 리스트 태그입니다.

 순서가 없는 리스트 UL(Unordered List)
  

리스트 형식의 일반적인 형식이며 리스트 항목에 여려가지 불릿(●) 으로 나타낼 수 있습니다.
<UL></UL> 는 목록의 시작과 끝을 알려주며, <LI></LI> 는 목록의 항목을 구분할때 사용합니다.

<LI> 태그의 속성  <li type="disk">  : 속이 찬 원형 불릿(●)
  <li type="circle">  : 속이 빈 원형 불릿(○)
  <li type="squar">  : 사각형 불릿(■)


 LI TYPE
  출력형태
<ul>
    <li type="disk">구글</li>
    <li type="disk">야후</li>
    <li type="disk">다음</li>
</ul>		  
  • 구글
  • 야후
  • 다음
<ul>
    <li type="circle">구글</li>
    <li type="circle">야후</li>
    <li type="circle">다음</li>
</ul>		  
  • 구글
  • 야후
  • 다음
<ul>
    <li type="squar">구글</li>
    <li type="squar">야후</li>
    <li type="squar">다음</li>
</ul>		  
  • 구글
  • 야후
  • 다음


 순서가 있는 리스트 OL(Ordered List)
  

리스트 항목에 숫자, 영문 대문자, 영문 소문자, 로마자 대문자, 로마자 소문자로 구분할 수 있습니다.
<OL></OL> 는 목록의 시작과 끝을 알려주며, <LI></LI> 는 목록의 항목을 구분할때 사용합니다.

<LI> 태그의 속성  <li type="1">  : 숫자
  <li type="A>  : 영문 대문자
  <li type="a">  : 영문 소문자
  <li type="i">  : 로마자 소문자
  <li type="I">  : 로마자 대문자

 LI TYPE
 출력형태
<ol>
    <li type="1">구글</li>
    <li type="1">야후</li>
    <li type="1">다음</li>
</ol>		  
  1. 구글
  2. 야후
  3. 다음
<ol>
    <li type="A">구글</li>
    <li type="A">야후</li>
    <li type="A">다음</li>
</ol>		  
  1. 구글
  2. 야후
  3. 다음
<ol>
    <li type="a">구글</li>
    <li type="a">야후</li>
    <li type="a">다음</li>
</ol>		  
  1. 구글
  2. 야후
  3. 다음
<ol>
    <li type="i">구글</li>
    <li type="i">야후</li>
    <li type="i">다음</li>
</ol>		  
  1. 구글
  2. 야후
  3. 다음
<ol>
    <li type="I">구글</li>
    <li type="I">야후</li>
    <li type="I">다음</li>
</ol>		  
  1. 구글
  2. 야후
  3. 다음

저작자표시

야이노마

» Contact Me: yainoma00@gmail.com




JSP 개발 환경 설정

Programming/Web/2009. 5. 25. 15:36


 1. JDK(Java Development Kit) 설치
  

JSP는 자바를 기반으로 이루어졌기 때문에 JSP 개발환경을 만들려면 JDK를 설치해야 합니다.

자바 JDK 다운로드부터 경로설정까지 완벽 가이드  →  http://pangsan.tistory.com/107

 2. 톰캣(Tomcat) 설치
  

JSP는 서블릿으로 변환되는 작업을 하는 웹 프로그래밍 언어입니다. JSP 언어를 서블릿으로 변환해주는 작업을 하는 것이 웹서버의 역할입니다. 웹서버는 클라이언트와 서버의 중간에 위치해서 JSP를 서블릿으로 변환해야하며 그 역할을 톰캣이 하고 있습니다.
공부를 목적으로 한다면 큰 웹서버를 직접 사용할 필요는 없기 때문에 톰캣을 많이 사용합니다.

1. 톰캣(Tomcat) 다운로드
      

톰캣 다운로드  → http://tomcat.apache.org/




톰캣 사이트로 이동하면 좌측  Download 목록에 톰캣 버전이 있습니다. 자신의 JSP 개발 환경에 맞는 톰캣을 다운로드 받으시면 됩니다.

Servlet 2.5/JSP 2.1 환경 웹프로그래밍 → Tomcat 6.x
Servlet 2.4/JSP 2.0 환경 웹프로그래밍 → Tomcat 5.5
Servlet 2.3/JSP 1.2 환경 웹프로그래밍 → Tomcat 4.1
Servlet 2.2/JSP 1.1 환경 웹프로그래밍 → Tomcat 3.3

해당 톰캣 버전을 선택하시면 해당 톰캣 버전의 최신 버전을 다운 받으시면 됩니다.







2. 톰캣(Tomcat) 설치하기
      

다운로드 받은 파일이 압축파일이면 원하는 위치에 압축을 해제 시키면 되고, 인스톨 파일로 다운받으면 인스톨할때 원하는 위치에 설치하시면 됩니다.

 3. 이클립스 + 톰캣 연동
  

1. 이클립스 설치하기
      

JSP 웹 프로그래밍 작업 환경을 하는 방법은 여러가지가 있습니다. 그 중에서 이클립스 + 톰캣 연동방법에 대해서 알려드리겠습니다. 이제 이클립스를 설치하는 작업을 해야합니다.

이클립스 다운로드   →  http://www.eclipse.org/downloads/


이클립스 JEE 버전을 다운 받으시면 톰캣 연동에 필요한 모든 플러그인이 포함되어 있어서 따로 톰캣 설정할 필요가 없습니다. 자신의 운영체제에 맞는 이클립스를 설치하고 압축만 해제해서 사용하면 됩니다.

압축해제하시고 이클립스를 실행하는데 jvm terminated exit code = -1 에러가 발생하시면 아래 링크로 가시면 해결 방법이 나와있습니다.
이클립스 jvm terminated exit code = -1 에러  →  http://pangsan.tistory.com/134

2. 이클립스 톰캣 설정
      

이클립스에서 JSP, 서블릿을 작성하기 위해서는 동적 웹 프로젝트를 작성한 후에 만들 수 있습니다. 동적 웹 프로젝트를 하기 전에 먼저 톰캣서버를 설정해줘야합니다.


File →New  →Other 메누를 선택합니다.


Server → Server 항목을 체크하고 Next를 클릭합니다.


Server's host name : 호스트 이름을 입력하는 부분으로 기본적으로 localhost 를 사용합니다.
Select the server type : 서버 종류를 설정하는 부분으로 기본설정값은 IBM WebSphere v6.0 이 설정되어 있습니다. 톰캣과 이클립스를 연동하기 위해 전에 설치한 Tomcat v5.5 Server를 선택하고 Add 를 클릭합니다.


톰캣 서버를 설정하는 부분입니다. Browse 버튼을 클릭하여 톰캣이 설치되어 있는 디렉토리를 지정해주시면 됩니다.

JRE 설정에서 어떤 JRE를 사용해서 서버를 실행할 것인지를 지정해주면 됩니다. 그본값을 그대로 사용하거나 설치되 JRE로 변경도 됩니다.  Finish 버튼을 클릭하면 톰캣 설정을 완료됩니다.


톰캣 서버 설정을 완료하면 Project Explorer 에서 Tomcat v5.5 Server 가 설정되어 있는 것을 확인 할 수 있습니다.

3. 동적 웹 프로젝트 설정
      

JSP 웹프로그래밍을 하기 위해서는 동적 웹 프로젝트를 작성하여야 합니다.


File →New 의 목록을 확인하면 Dynamic Web Project 이 있습니다. 만약 없다면 Project 를 선택합니다.


New Project 에서 Web → Dynamic Web Project 를 선택합니다.


Project name : 프로젝트의 이름을 입력하는 곳으로 저는 TestProject 를 입력했습니다.


Project Explorer 에서 TestProject 이름으로 생성된  동적 웹 프로젝트가 생성된 것을 확인 할 수 있습니다. WebContent 부분이 JSP 파일이 위치합니다.

4. JSP 작성
      

JSP 파일을 작성하여 이클립에 톰캣이 제대로 연결되어있는지 확인을 하는 작업입니다.


WebContent 에서 마우스 우클릭을 해서 New → JSP 파일을 선택합니다.


File name : JSP 파일 이름을 입력합니다.

  jspfileTest.jsp<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!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>
</head>
<body>
    과연 성공했을까요??????
</body>
</html>

위와 같은 JSP 소스코드를 입력합니다.


TestProject 프로젝트 웹 프로젝트에서 Run As → Run on Server 을 클릭합니다.


설정한 톰캣 서버를 선택하면 됩니다. 여러개의 서버를 설정했다면 목록에 다른 서버도 나옵니다.


Configured projects 의 목록에 선택한 동적 웹 프로젝트가 추가된 것을 확인 할 수 있습니다. Finish 버튼을 클릭하시면 톰캣 서버가 시작합니다.


http://localhost:8080/TestProject/jspfileTest.jsp 으로 연결하여 jsp 코드가 제대로 나온다면 톰캣과 이클립스의 연동이 제대로 되었다는 것을 나타냅니다.

http://localhost:8080/TestProject/jspfileTest.jsp
http://호스트이름:포트번호/동적 웹 프로젝트/JSP파일

저작자표시

야이노마

» Contact Me: yainoma00@gmail.com




FORM 태그의 구성 및 사용법

Programming/Web/2009. 5. 24. 23:51

HTML 내에서 사용자와의 상호작용을 통하여 사용자가 어떤 내용을 원하는지, 사용자의 요구사항은 무엇인지를 파악할때 가장 많이 사용하는 것이 바로 FORM 입니다. HTML에서는 Form을 사용해서 여러가지 파라메터 값을 하나로 묶어서 사용할 수 있습니다. From 태그는 단독으로 쓰여지지 않고 From 태그 안에 여러가지 파라메터 값을 입력하여 사용합니다.


Form 태그 형식
<FORM NAME=" " TARGET=" " ACTION=" " HETHOD=" " ENCTYPE=" " onReset=" " onSubmit=" ">  파라메터 </FORM>


FORM의 구성 요소

    ● NAME : Form의 이름을 나타냅니다.

    ● ACTION : <FORM></FORM> 안의 파라메터를 전송할 곳을 지정합니다.

    ● METHOD : <FORM></FORM> 안의 파라메터를 전송할때의 방식을 지정합니다.(GET/POST)

    ● TARGET : 폼에서 보내주는 응답의 실행프레임을 결정하는 속성입니다.


1. INPUT 파라메터
      

INPUT 타입을 변화시켜서 원하는 형태의 출력결과를 얻을 수 있습니다.


 태그모양

 태그형식
  출력결과
 버튼

 <input type="button" value="버튼">  
 체크박스

 <input type="checkbox" >사과
 <input type="checkbox">수박
   사과 수박
 숨겨진 입력 양식

 <input type="hidden">
 
 파일 업로드

 <input type="file">  
 이미지

  <input type="image">  
 암호

  <input type="password">  
 라디오 버튼

  <input type="radio" name="sex">남자
  <input type="radio" name="sex">여자
   남자 여자
 리셋버튼

  <input type="reset" value="Clear">  
 서브미트

  <input type="submit" value="전송">  
 텍스트

  <input type="text">  


2. TEXTAREA 파라메터
      

TEXTAREA 상자안에 원하는 문장을 입력할 수 있습니다.
TEXTAREA의 WRAP 속성은 기본적으로 off 되어 있지만, soft/hard 로 적용할 수 있습니다.
WRAP="off"  : 엔터없이 문장을 입력할 시 수평 스크롤바가 생기고, 옆으로 계속 문장이 입력됩니다.
WRAP="soft"  : 엔터를 입력하지 않아도 텍스트라인 끝에서 자동 개행됩니다.
WRAP="hard"  : soft 상태와 비슷하며 실제 내용을 서버에 전송할때 캐리지 리턴 문자를 전달합니다.

태그형식
  출력결과
<textarea cols="15" rows="4">
팡상닷컴
야이노마
놀러오세요!</textarea>		  

3. SELECT
      

SELECT 태그는 리스트상자의 목록을 선택하는 것 입니다.
<select> </select>태그 안에 <option></option> 태그를 삽입하여 원하는 목록을 추가할 수 있습니다.
multiple 속성을 추가하면 리스트 상자의 목록을 ctrl 키를 눌러 여러개를 선택할 수 있습니다.

 태그형식  출력결과
 <select size=5 multiple>
  <option value=0 seleted>수박</option>
 <option value=1>참외</option>
 <option value=1>딸기</option>
</select>		  
 <select size=5 multiple>
  <option value=0 seleted>수박</option>
 <option value=1>참외</option>
 <option value=1>딸기</option>
</select>		  

저작자표시

야이노마

» Contact Me: yainoma00@gmail.com




1

티스토리툴바