form태그 이외의 태그들이 폼에 데이터를 적게된다.

 

input태그

형식을 지정함에 따라 여러 형태의 필드를 폼에 구성 할 수 있다.

 

 

 

형식 

속성

설명 

text

name 

필드를 구분하는 이름 

 

size

대문자 A를 기준 삼아 필드의 크기(개수) 

 

value 

텍스트를 지정한다 

 

 maxlength

필드에 입력할 수 있는 글자 수(개수)를 제한한다. 

 

 readonly

필드를 읽기 전용으로 지정한다. 

 password

name 

필드를 구분하는 이름 

 

 size

대문자 A를 기준 삼아 필드의 크기(개수) 

 

 maxlength

필드에 입력할 수 있는 글자 수(개수)를 제한한다.  

radio/checkbox

name

필드를 구분하는 이름 

 

value

데이터 값(텍스트)을 지정한다.

 

checked

현재항목을 확인할지 여부를 지정한다.

button/submit/reset/hidden

name

필드의 이름(텍스트)을 지정한다.

 

value

단추에 표시할 글자(텍스트)를 지정한다.

file

name

필드의 이름(텍스트)을 지정한다.

 

size

필드의 크기(숫자)를 지정한다.

 

readonly

필드를 읽기 전용으로 지정한다.

 

 input태그 속성

name
입력값에 대한 이름을 결정하는 속성입니다. 
나중에 프로그램으로 전달할때 변수명이 되므로 입력값마다 각기 다른 name을 정해줍니다.

※ Type 속성 값이 checkbox나 radio일 때는 각각의 name은 같게 하고, value를 다르게 합니다.
type
입력필드의 타입을 지정하는 속성입니다.
value
입력필드의 기본 값 지정하는 속성입니다.
size
입력 필드의 크기를 픽셀로 지정하는 속성입니다. 

※ Type 속성값이 text나 password일 때는 입력하는 문자의 수가 됩니다.
maxlength
입력필드에 입력할수 있는 문자의 최대값을 나타내는 속성입니다.
checked
Type속성값이 checkbox나 radio일 때 checked속성이 부여되면 해당 입력값이 선택된 상태로 설정됩니다.
src
Type이 image일 때, 사용될 그림 파일의 경로이다.
readonly
입력필드가 읽기 전용이 되는 속성입니다.
disabled
입력필드를 아예 비활성화 하는 속성입니다.
즉 사용자가 입력할수 없는 상태가 됩니다.
tabindex
속성값으로 숫자 값을 가지며 탭키를 사용해 마우스포커스를 옮길때의 순서를 정해줄수 있는 속성입니다.



form태그

자신의 태그내에 있는 데이터를 지정한 웹 경로로 전송해 준다.

 

method - 데이터를 전송하는방식(get,post)지정

name - 폼의 이름지정

action - 폼 내의 데이터를 가지고 이동할 위치(url,jsp같은 프로그램)지정

enctype - 대용량 파일의 데이터 속성(multipart나 form-data)지정

 

select 태그

목록 상자나 콤보박스로 폼을 구성할 때 사용하는 태그이다.

 

name - 필드의 이름(텍스트)을 지정한다.

size - 목록 상자에 보여지는 항목(item)의 개수(숫자)를 지정한다.

multiple - 필드에서 여러항목을 선택할 수 있게 해준다.

 

option 태그

select 태그가 만드는 필드의 항목을 만드는 태그이다.

 

value - 항목을 선택하였을 때 전송할 값을 지정한다.

selected - 기본적으로 선택되는 항목을 지정하게 해준다.

 

textarea 태그

게시판이나 메일처럼 여러줄에 걸쳐 데이터를 작성하고자 할 때 사용하는 태그이다.

 

name - 필드의 이름(텍스트)을 지정한다.

cols  - 대문자 A를 기준으로 개수 만큼의 너비(개수)를 지정한다.

rows -  대문자 A를 기준으로 개수 만큼의 높이(개수)를 지정한다.

readonly - 필드를 일기 전용으로 지정한다.


Label 태그


 

 

 

 

블로그 이미지

왕왕왕왕

,

<frameset>

웹페이지를 여러영역으로 나눌 때 사용한다.

 

rows - 페이지를 상하(픽셀이나%)로 나눌 때 사용한다.

cols - 페이지를 좌우(픽셀이나%)로 나눌 때 사용한다.

border - 나누어진 프레임의 테두리(0이나 숫자)를 지정한다. 기본값은 1이다.

bordercolor - 테두리 색(색상이나 색상코드)을 지정한다.

frameborder - 프레임을 구분하는 테두리를 화면에 표시할지 여부(yes,no)를 지정한다.

                   기본값은 yes이다. no의 경우 border 값을 0으로 해야 한다.

 

 

프레임분할 예

<frameset rows=" 50, 30, * ">

화면을 상하로 3등분하는데 크기는 50픽셀, 30 픽셀, 나머지로 분할한다.

</frameset>

 

<frameset rows=" 50%, 50% ">

화면을 상하로 50%씩 분할한다.

</frameset>

 

<frameset rows=" *, 2* ">

화면을 상하 2개로 분할하는데 아래가 위의 2배가 되도록 분할한다.

</frameset>

 

 

<frame>

<frameset>태그로 나누어진 영역들에 대하여 파일을 지정하는 태그이다.

 

name - 프레임의 이름을 지정한다. target 속성을 사용할 때 필요하다.

src - 프레임에 해당하는 파일(파일 경로와 파일 이름)을 지정한다.

noresize - 프레임을 고정하여 크기가 바뀌지 않게 지정한다.

scrolling - 프레임에 스크롤 막대가 표시되지 않게 지정(yes,no,auto)한다. 기본값은 auto이다.


<frame src = "about:blank"> - 빈페이지


frameset 에서 작성

<frame src = "frame1.htm" name = "f1"> 


frame2.htm 에서 작성

<a target = "f1" href = "www.naver.com">네이버바로가기</a>

이렇게 하면 frame2.htm에서 하이퍼링크(네이버바로가기)를 클릭했을때 frame1.htm에서 화면을 표시해준다.

 

<iframe>

다른 웹 페이지를 자신의 웹 페이지에 포함시키는 태그이다.  다른사이트를 자신의 웹페이지에 포함시키려고한다면 이 태그를 이용하면 된다.

 

name - 프레임의 이름을 지정한다. target 속성을 사용할 때 필요하다.

src - 프레임에 해당하는 파일(파일 경로와 파일 이름)을 지정한다.

scrolling - 프레임에 스크롤 막대가 표시되지 않게 지정(yes,no,auto)한다. 기본값은 auto이다.

align - 프레임의 정렬 방식(left,right,center)을 지정한다.

width - 프레임의 너비(픽셀)를 지정한다.

height - 프레임의 높이(픽셀)를 지정한다.

frameborder - 프레임을 구분하는 테두리를 표시할지 여부(0이나 숫자)를 지정한다.

bordercolor - 테두리 색(색상이나 색상코드)을 지정한다.


블로그 이미지

왕왕왕왕

,

 

 <table>태그

 표 를 만들 때 사용한다. 웹페이지 전체를 구성하기도함
   
    align - 정렬
    bgcolor - 배경색
    background - 배경이미지
    border - 테두리 두께
    bordercolor - 테두리색 

    bordercolordark  - 테이블의 그림자 
    cellpadding - 셀안쪽여백(픽셀)
    cellspacing - 셀과 셀사이 여백 (픽샐)
    width - 너비(픽셀)

    height - 높이 (픽셀)
    frame - 표바깥쪽 테두리 (above,below, border, box, ihs,rhs,hsides,vsides,void)
    rules - 표안쪽 테두리 (all,cols,rows,group,none)

    hspace/vspace - 테이블과 주변 글들과의 여백 지정

     

 

<table>

  <caption>표 제목</caption>

   <tr>  <-- 행구분

    <th>열의 제목</th>
    <td>셀의 내용</td>
   </tr>

<table>
 

 <tr>태그

 표에서 행을 관리할 때 사용한다.


 align - 행의정렬
 bgcolor - 행의 배경색
 valign - 행의 세로정렬방식(top,middle,bottom)
 height - 행의 높이
 rowspan - 행의 병합(개수)

<th>와 <td> 태그

표에서 열을 관리할 때 사용한다 특히 <th>태그는 열의 제목을 표시할 때 사용한다. 기본적으로 굵게,중앙 정렬이 적용된다. <td>태그는 열을 구분지을 때 사용한다.

 

align - 셀의 정렬방식(left,right,center)을 지정한다. 기본값을 left이다.

valign - 셀에서 세로 정렬방식(top,middle,bottom)을 지정한다. 기본값을 middle이다.

background - 셀의 배경 이미지(이미지파일)를 지정한다.

bgcolor - 셀의 배경색(색상이나 색상코드)을 지정한다.

colspan - 셀의 병합(열의 개수)을 지정한다.

nowrap - 셀에서 중 바꿈이 되지 않도록 지정한다.

width - 셀의 너비(픽셀)를 지정한다.

 

<table> 태그 내에서 사용하는 태그들에는 다음과 같은 것들이 있다.

 

<caption> - 표의 제목이나 간단한 설명을 표시할 때 사용한다.

<col> - 모든 행에 대해 해당 열의 속성을 지정할 때 사용한다.

<colgroup> - 여러 열을 하나의 그룹으로 묶어서 속성을 한번에 지정하는 태그로 span속성을 사용해서 몇개의 열을 묶을지 표시하는 것이 가는 하다.

<thead> - 표 내부에서 또 다른 그룹을 지정한 경우 머리글을 지정해 준다.

<tfoot> - 표 내부에서 또 다른 그룹을 지정한 경우 바닥글을 지정해 준다. <tbody>태그보다 우선해서 적는다.

<tbody> - 표 내부에서 또 다른 그룹을 지정한 경우 본문을 지정해 준다.


블로그 이미지

왕왕왕왕

,

      <img>태그

 GIF,JPEG,PNG정도로 제한 로컬 경로는 바람직하지 못하다.
 http://서버의_IP_주소:8080/파일이름.확장자  웹경로로 사용하기에 적합하다.

 

  src 이미지 경로를 지정
  alt 이미지에 대한 설명텍스트
  align 이미지 정렬방식 left,right,top,middle,bottom
  border 이미지주위 테두리(숫자) 0일경우 테두리없음
  height 이미지높이(픽셀)
  width 이미지 너비(픽셀)
  hspace 좌우여백(픽셀)
  vspace 상하여백(픽셀)

 

 


<embed>태그
 src 경로
 autostart 웹페이지 열었을때 사운드 파일을 자동재샐여부 true,false
 hidden 미디어 플레이어를 화면에서 감출지 여부 true false
 width 미디어 플레이어를 화면에 보여줄 경우 너비를 지정
 height 미디어 플에이어를 화면에 보여줄 경우 높이를 지정
 loop 재생하는 반복횟수지정 true 무한반복 false 한번만 재생 
 
 <a>태그

 href 연결할 문서의 경로

<a href = "http://www.naver.com"> 네이버사이트로 접속

<a href = "aa.htm"> aa.htm 파일로 연결 

<a href = "a.gif"><img src = "a.gif"> a.gif 이미지 파일로 연결 

<a href = "mailto:a@naver.com"> 해당 메일 주소로 아웃룩 익스프레스 실행 

 

 name 동일문서 내 특정위치로 이동

<a name = "#top"> top이라는 이름으로 책갈피 설정


 

      target 링크된 내용이 열릴대상(_blank, _parrent,_self,_top)

  <a href = "aa.htm" target = _blank> aa.htm 파일을 새 창에서 보여줌

<a href = "aa.htm" target = _self> aa.htm 파일을 현재 창에서 보여줌

<a href = "aa.htm" target = _win1> aa.htm 파일을 win1 창에서 보여줌

 

      title 링크에 마우스를 올리면 설명문 보여줌

  <a href = "aa.htm" title = "설명문"> 링크에 마우스를 올리면 설명문 보여줌

 

 

 

블로그 이미지

왕왕왕왕

,

 [프로그래밍리스트종류]
 

순서를 부여하는 목록을 나열할 수 있는 태그 -  순서 목록(Ordered list)
 <ol type = "a"  >  // 이렇게 하면 a.b.c순으로 나옴

  <lh>목록의 제목</lh>
  <li>JAVA</li>
  <li>c</li>
  <li>c++</li>
 </ol><br/>
 

순서없이 목록을 나열할수 있는 태그이다. - 비순서 목록(Unordered list)

 <ul type = "square"> //기본값 disc이다. (한글 서식같은 느낌)

  <lh>목록의 제목</lh>
  <li>JAVA</li>
  <li>c</li>
  <li>c++</li>
 </ul><br/>
 

 

순서없이 목록나열할수 있으나 자식태그로 제목과 설명형태의 목록을 구성할수 있다.

 <dl>
  <dt>제목</dt>
  <dd>내용</dd>
 </dl>

 

 

인용문

<blockquote>

 

인용문

 

</blockquote>

 

 

목록태그 속성

start - 시작번호지정

value - 해당목록의 시작번호 지정

type - 목록 번호 스타일지정

블로그 이미지

왕왕왕왕

,

<font>태그의 속성

 

color 색상

face 글씨체

size 글씨 크기


  <b>굵은 글씨</b>


  <i>글씨 기울이기</i>


  <sub>아래첨자</sub>


  <sup>위첨자</sup>


  <u>글씨 아래 줄</u>


  <s>글자취소</s>


  <strike>최소선 표시</strike>
 
  <tt>타이핑체</tt>
 
  <big>한단계 크게</big>
 
  <small>한단계 작게</small>


  <address>경기도 수원시 권선구</address><br/>


  <blockquote>문단 들여쓰기</blockquote><br/>


  <pre>
  글자 그대로 이안에 쓰면 그래도올라감
  </pre>
 
  <xmp>
 <pre>와 비슷하지만 <xmp>는 태그 까지 다 보여줌
 <pre>,<xmp> 둘다 태그가 끝나는 시점에서 개행함
  </xmp>
 
  <marquee behavior="slide" >글자 움직임</marquee><br/>

블로그 이미지

왕왕왕왕

,

body 태그

 

background -  배경 이미지(파일 이름이나 URL)을 지정

bgcolor - 배경색(색상이나 색상코드)을 지정한다. 기본값은 흰색이다.

text -  글꼴색(색상이나 색상코드)을 지정한다. 기본값은 검은색이다.

link - 링크색(색상이나 색상코드)을 지정한다.

vlink - 방문했던 링크 색(색상이나 색상코드)을 지정한다.

alink - 링크를 클릭하는 순간의 색(색상이나 색상코드)을 지정한다.

topmargin  - 위여백

leftmargin - 왼쪽여백

bgproperties - 배경이미지 고정

scroll - 스크롤바 비활성화

 

<p>태그는 HTML은 공백(스페이스)과 엔터를 여러번 입력하더라도 하나의 공백으로만 인식합니다.

 

<h1>~<h6>  헤드라인 숫자가 커질수록 작아진다.

 

<hr> 태그는 문단과 문단 사이를 구분할 때나 간단한 시각적 효과를 줄때 문성의 중간에 입체감을 주는 수평선 태그이다.  

 

 특수 문자

&lt;  여는괄호

&gt; 닫는괄호

&copy; 저작권표시

&trade; 상표표시

&nbsp; 공백문자

&reg; 등록상표 표시

&smp; &기호 표시

&#163; 프랑표시

&#165; 엔표시

&quot; 쌍따옴표 

블로그 이미지

왕왕왕왕

,

이클립스 왼쪽상단에 JAVA, JAVA EE 등등

 

1. Open Perspective

-JAVA EE 선택

 

2. 프로젝트 생성

-Dynamic Web Project

 

 

기본구성

 

<html>   

 

<head>

<meta charset="EUC-KR" />

<title>홈페이지 제목</title>

</head>

 

<body>

 

</body>

 

</html>

 

html  작성 규칙

'<' 와 '>' 사이에 태그명 작성

시작태그와 끝태그가 쌍으로 존재 (예외존재  ex.<meta />)

시작태그와 끝 태그가 하나로 표현될 수 있다.

태그명은 대소문자를 구별하지 않는다.

태그는 중첩되어 사용될 수 없고 포함 관계여야 한다.

white Character를 표현할때 <xmp> <pre> 태그를 이용한다.

<pre>는 태그까지 인식은 안되지만  <xmp>는 태그까지 인식한다.

 

파일 확장자로 .html 이나 .htm을 사용한다

(리눅스에서 확장자사이즈 3개까지만 인식하는 경우가 있으므로 호환성을 생각해서 htm 사용 추천)

'JAVA > 개발환경' 카테고리의 다른 글

개발환경 JDK 환경변수  (1) 2015.08.11
개발환경 웹서버 톰캣 설치  (0) 2014.06.22
블로그 이미지

왕왕왕왕

,