HTML 기본 태그 - 폼 관련

앎/web 2014. 2. 13. 18:14 |

폼은 데이터를 전송할 때 주로 사용한다.


<form>

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

 속성

 설명 

 name

 한 페이지에 여러 개의 폼이 있을 수 있으므로 폼을 구분하기 위해 사용한다. 

 method

 데이터 전송하는 방식을 지정. 

 GET : 256 ~ 4096 바이트 정도의 작은 데이터 전송에 사용한다. Query String 형태. (?데이터1=값1&데이터2=값2&데이터3=값3...)

 POST : 대용량 데이터를 전송하는데 사용한다. 

 action

 폼 내의 데이터를 가지고 이동할 위치를 지정한다 (URL이나 JSP 프로그램).

 enctype

 파일 전송에 사용. 고정값으로 사용. "multipart/form-data" 


<input>

데이터를 입력 받기 위한 태그이다.

 type

 속성  

 설명

 text

 name

 필드를 구분하는 이름을 지정한다.

 

 size

 대문자 A를 기준 삼아 필드의 크기를 지정한다.

 value

 기본값을 지정한다. 텍스트

 maxlength

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

 readonly

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

 password

 name 

 필드를 구분하는 이름을 지정한다. 

 size

 대문자 A를 기준 삼아 필드의 크기를 지정한다.

 maxlength

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

 radio

 name 

 필드를 구분하는 이름을 지정한다.

 

 value

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

 checked

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

 checkbox

 name

 필드를 구분하는 이름을 지정한다. 

 value

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

 checked

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

 button

 name 

 필드의 이름을 지정한다.

 화면에서 벗어나지 않고 화면 안에서 처리하는 경우에 

 value

 버튼에 표시할 텍스트를 지정한다.

 submit

 name 

 필드의 이름을 지정한다.

 action 속성에 지정되어 있는 위치로 전송할 때 사용.  button과 같으나, 폼에 있는 내용을 전달하는 동작까지 포함한다.

 value

 버튼에 표시할 텍스트를 지정한다.

 reset

 name 

 필드의 이름을 지정한다. 폼 내의 데이터를 초기화 하는데 사용

 value

 버튼에 표시할 텍스트를 지정한다.

 hidden

 name 

 필드의 이름을 지정한다. 입력을 하지 않고 어떠한 데이터를 가지고 움직여야할 때 사용. 화면에는 보이지 않는다.

 value

 버튼에 표시할 텍스트를 지정한다. 

 file

 name 

 필드의 이름을 지정한다. 

 size

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

 readonly

 필드를 읽기 전용으로 지정


<select>

콤보박스로 폼을 구성할 때 사용한다. multiple 속성을 사용해 여러 개 선택도 가능하다.

 속성

 설명 

 name

 필드의 이름을 지정한다. 

 size

 목록에 보여지는 항목의 개수를 지정한다

 multiple

 여러 개의 항목을 동시에 선택할 수 있도록 한다. 


<option>

select 태그가 만드는 리스트의 항목을 구성하는 태그이다.

 속성

 설명 

 value

 항목을 선택 했을 때 전송할 값을 지정한다.

 selected

 기본적으로 선택되는 항목을 지정한다. 


<textarea>

여러 줄에 걸쳐 데이터를 작성할 때 사용한다.

 속성

 설명

 name

 필드의 이름을 지정한다. 

 cols

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

 rows

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

 readonly

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


'앎 > web' 카테고리의 다른 글

CSS (Cascading Style Sheet) - 속성  (0) 2014.02.17
CSS (Cascading Style Sheet) - 기본  (0) 2014.02.14
HTML 기본 태그 - 페이지 관련  (0) 2014.02.13
HTML 기본 태그 - 표 관련  (0) 2014.02.13
HTML 기본 태그 - 이미지, 사운드, 링크  (0) 2014.02.13
Posted by 후니아부지
:

HTML 기본 태그 - 페이지 관련

앎/web 2014. 2. 13. 17:09 |

<frameset>

body 태그 역할을 하며 화면 분할 하는데 사용한다.

요즘은 <div> 태그가 대부분 대신한다. (표준화)

frameset 내에 frameset이 올 수 있다.

 속성

 설명

 rows

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

 cols

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

 border

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

 bordercolor

 테두리 색을 지정한다. (색 or 색상코드) 

 frameborder

 프레임을 구분하는 테두리를 화면에 표시할지를 지정한다. (true or false)

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


<frame>

frameset 태그에 의해 분할된 각 영역에 표시될 프레임을 관리하는 태그이다.

속성 

 설명 

 name

 프레임의 이름을 지정한다. 

 src

 프레임에 해당하는 파일이름이나 경로를 지정한다.

 noresize

 프레임 크기를 고정한다.

 scrolling

 프레임에 스크롤이 표시되지 않도록 지정한다. (yes, no ,auto). 기본값은 auto이다. 


<iframe>

다른 웹페이지를 자신의 웹 페이지에 포함시키는 태그이다. 

테이블 내에서 웹 페이지를 표시하고자 할 때 사용한다. (frame 태그는 그냥 주소를 지정하면 웹 페이지를 포함할 수 있다.)

속성 

 설명 

 name

 프레임의 이름. target 속성 사용시 필요. 

 src

 프레임에 해당하는 파일경로나 이름을 지정. 

 scrolling

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

 align

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

 width

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

 height

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

 frameborder

 프레임을 구분하는 테두리를 표시할지를 지정한다 (숫자). 0이면 테두리가 없다. 

 bordercolor

 테두리 색을 지정한다. 색상이나 색상코드를 설정한다. 






'앎 > web' 카테고리의 다른 글

CSS (Cascading Style Sheet) - 기본  (0) 2014.02.14
HTML 기본 태그 - 폼 관련  (0) 2014.02.13
HTML 기본 태그 - 표 관련  (0) 2014.02.13
HTML 기본 태그 - 이미지, 사운드, 링크  (0) 2014.02.13
HTML 기본 태그 - 문단 관련  (0) 2014.02.13
Posted by 후니아부지
:

HTML 기본 태그 - 표 관련

앎/web 2014. 2. 13. 15:23 |

<table>

표를 만들 때 사용한다. 

웹 페이지 전체를 구성하는데도 사용한다.

 속성

 설명 

 align

 정렬 방식 지정 (left, center, right). 기본값은 left 이다.

 bgcolor

 배경색을 지정. 색상이나 색상코드를 사용한다.

 background

 배경 이미지를 지정한다.

 border

 테두리 두께 지정 (픽셀). 0이면 테두리가 없다.

 bordercolor

 테두리 색을 지정. 색상이나 색상코드를 사용한다.

 cellpaddin

 셀 안쪽 여백을 지정한다. 0 또는 픽셀

 cellspacing

 셀과 셀사이의 여백을 지정한다. 0 또는 픽셀

 width

 표의 너비를 지정한다. 픽셀

 height

 표의 높이를 지정한다. 픽셀

 frame

 표의 바깥쪽 테두리를 지정한다.

 above, below, border, box, lhs, rhs, hsides, vsides, void

 rules

 표의 안쪽 테두리를 지정한다.

 all, cols, rows, group, none


<tr>

표에서 행을 관리하는데 사용한다.

 속성

 설명

 align

 행의 정렬 방식을 지정한다. left, right, center. 기본값은 left이다.

 bgcolor

 행의 배경색을 지정한다. 색상이나 색상코드를 사용한다.

 valign 

 행의 세로 정렬 방식을 지정한다. top, middle, bottom을 지정한다.

 height

 행의 높이를 지정한다. (픽셀)

 rowspan

 행의 병합을 지정한다. (행 개수)


<th>와 <td>

표에서 열을 관리하는데 사용한다.

<th> 태그는 열의 제목을 표시하는데 사용한다. 기본 속성값으로 굵게 중앙정렬되어 있다.

<td> 태그는 열을 구분지을 때 사용한다.

 속성

 설명

 align

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

 valign

 셀에서 세로 정렬 방식을 지정한다(left, right, center). 기본값은 middle이다.

 background

 셀의 배경이미지를 지정한다. 

 bgcolor

 셀의 배경색을 지정한다. 색상이나 색상코드를 사용한다. 

 colspan

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

 nowrap

 셀안에서 줄바꿈이 안되도록 지정한다. 

 width

 셀 너비를 지정한다. 


※ 빈 셀을 만드려면 &nbsp; 로 공백을 넣어주어야 한다.


<caption>

제목이나 간단한 설명을 나타낼때 사용한다.


<thead>, <tbody>, <tfoot>

표 내에서 그룹지어 머리글, 본문, 바닥글로 지정해준다.









'앎 > web' 카테고리의 다른 글

HTML 기본 태그 - 폼 관련  (0) 2014.02.13
HTML 기본 태그 - 페이지 관련  (0) 2014.02.13
HTML 기본 태그 - 이미지, 사운드, 링크  (0) 2014.02.13
HTML 기본 태그 - 문단 관련  (0) 2014.02.13
HTML 기본 태그 - 본문 관련  (0) 2014.02.13
Posted by 후니아부지
:

코드 삽입 테스트

앎/et cetera 2014. 2. 13. 14:04 | 
    
/**
 * SyntaxHighlighter
 */

#include <stdio.h>

int main(int _argc, char** _argv)
{
    printf("코드 삽입 테스트\n");
    return 0;
}

'앎 > et cetera' 카테고리의 다른 글

검색 사이트에 블로그 등록하기 - 빙(Bing)  (0) 2014.03.01
애드센스(AdSense) 광고 코드 삽입하기  (0) 2014.02.27
검색 사이트에 블로그 등록하기 - 구글(Google)  (0) 2014.02.25
주소를 영문으로 변환하기 (영문 주소)  (0) 2014.02.20
블로그에 소스 코드 보기 좋게 넣기 (SyntaxHighlighter, 코드 구문 강조, 티스토리)  (0) 2014.02.16
Posted by 후니아부지
:

HTML 기본 태그 - 이미지, 사운드, 링크

앎/web 2014. 2. 13. 12:22 |

이미지, 사운드, 링크 태그는 웹의 리소스를 사용기 때문에 리소스의 경로를 지정해줘야 한다.

경로의 표현은 절대경로, 상대경로가 있다. 


상대 경로는 HTML 파일이 있는 폴더를 기준으로 한다. 

동일 폴더 : 파일이름.확장자

상위 폴더 : ../파일이름.확장자

하위 폴더 : 폴더이름/파일이름.확장자


절대 경로는 웹 경로를 의미한다. 

http://서버IP주소:8080/파일이름.확장자

or

/파일이름.확장자


<img>

이미지를 표현한다.

속성 

설명 

 src

 파일의 경로나 URL 지정 

 alt

 이미지에 대한 설명

 align

 정렬 방식 지정. right, top, left, middle, bottom

 border

 테두리 두께를 지정(숫자). 0은 테두리 없음

 height

 이미지의 높이를 지정 (픽셀)

 width

 이미지의 너비를 지정 (픽셀)  

 hspace

 좌우 여백 지정 (픽셀)

 vspace

 상하 여백 지정 (픽셀)


<embed>

사운드 파일을 삽입할 수 있다.

 속성

설명 

 src

 사운드 파일의 경로를 지정 

 autostart

 웹 페이지를 열었을 때 자동 재생 여부를 지정. true, false 

 hidden

 미디어 플레이어를 화면에서 감출지 지정. true, false  

 width 

 미디어 플레이어를 표시할 때, 너비를 지정. (픽셀) 

 height

 미디어 플레이어를 표시할 때, 높이를 지정. (픽셀) 

 loop

 재생할 때 반복할 횟수를 지정. 횟수(숫자), true, false


<a> 

특정 경로의 웹페이지로 이동할 수 있는 링크를 생성 

 속성

설명 

 href 

 연결할 문서의 경로나 URL을 지정.

  • #name : 동일 문서에 name으로 지정한 곳으로 이동
  • mailto:받는_사람_메일_주소?subject="제목" : 메일 보낼 떄의 링크를 지정
  • 기타 : 소리나 내려 받을 파일을 지정 

 name

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

 이동 시킬 위치에 <a name="이름" /> 형태로 만듬.

 <a href="#이름" /a> 와 같이 사용. 

 target

 링크된 내용이 열릴 대상을 지정.

 _blank : 새창

 _parent : 자기를 띄운 부모창

 _self : 자기 자신

 _top : 최상위 프레임








'앎 > web' 카테고리의 다른 글

HTML 기본 태그 - 페이지 관련  (0) 2014.02.13
HTML 기본 태그 - 표 관련  (0) 2014.02.13
HTML 기본 태그 - 문단 관련  (0) 2014.02.13
HTML 기본 태그 - 본문 관련  (0) 2014.02.13
Apache Tomcat 소스 버전 사용  (0) 2014.02.11
Posted by 후니아부지
:

HTML 기본 태그 - 문단 관련

앎/web 2014. 2. 13. 11:53 |
<font>

글꼴 지정. 속성은 face(글꼴), color, size


<b>, <strong>

글자를 굵게 표현하여 강조


<i>, <em> 

글자를 기울임


<u>

밑줄


<s>

취소선


<sup>

윗 첨자


<sub>

아래 첨자


<address>

(집)주소 표현에 사용


<blockquote>

이 영역에 포함된 내용을 들여쓰기로 하나의 묶음처럼 표현


<pre>

이 영역의 모든 내용을 보이는 그대로 웹브라우저상에 표현


<xmp>

pre 태그와 같으나 차이점은 태그도 표현할 수 있다


<ol>

'ordered list'의 약자로 순서를 부여하여 표시한다. 목록의 항목은 <li> 태그를 사용한다.

속성 

 설명

 type

각 목록 앞에 붙는 표식을 지정한다. (I, i, A, a, 1) 

 start

시작 번호(숫자)를 지정한다. 

 

<ul>

unordered list 약자로 순번 없는 목록으로 정렬할 때 사용한다. 목록의 항목은 <li> 태그를 사용한다.

속성 

설명 

type 

각 목록 앞에 붙는 표식을 지정한다. (disc, circle, square). 기본값은 disc이다.


<dl>

dictionary list의 약자. <ul> 태그와 비슷하게 순번 없는 목록으로 정렬할 때 사용한다.

항목은 <dt>태그를 사용하고, 항목 설명은 <dd> 태그를 사용한다.


'앎 > web' 카테고리의 다른 글

HTML 기본 태그 - 표 관련  (0) 2014.02.13
HTML 기본 태그 - 이미지, 사운드, 링크  (0) 2014.02.13
HTML 기본 태그 - 본문 관련  (0) 2014.02.13
Apache Tomcat 소스 버전 사용  (0) 2014.02.11
Apache Tomcat 포트 변경  (0) 2014.02.11
Posted by 후니아부지
:

HTML 기본 태그 - 본문 관련

앎/web 2014. 2. 13. 01:25 |
  • 태그 기본 형식

<태그명 속성="값" 속성="값" ...> ... </태그명>


  • 태그 약식

<태그명 속성="값" 속성="값" .../>


  • <body> 본문

속성

 설명

 background

 배경이미지 지정 (파일이름 or URL)

 bgcolor

 배경색 지정 (색상 or 색상코드), 기본은 흰색

 text

 글꼴색 지정 (색상 or 색상코드), 기본은 검은색

 link

 링크색 지장 (색상 or 색상코드)

 vlink 

 방문했던 링크색 지정 (색상 or 색상코드)

 alink

 링크를 클릭하는 순간의 색상 지정 (색상 or 색상코드)


  • 주석

<!-- 내용 -->


  • 영역 구분 태그

&nbsp;

build-in entity 예약된 특정 값을 의미.

'&'와 ';' 사이에 예약할 단어를 기재한다.

'&nbsp;' 는 한 칸 공백을 의미한다.


<br>

한 줄 개행을 표현


<p>

문단을 표현. align 속성으로 내용 부분의 위치를 변경할 수 있다.

left, center, right


<h1> ~ <h6> 

헤드라인 글꼴 크기를 표현한다. 숫자가 작을 수록 폰트 크기가 크다.


<hr>

구분선을 표현


<font>

글꼴 지정. 속성은 face(글꼴), color, size


<b>, <strong>

글자를 굵게 표현하여 강조


<i>, <em> 

글자를 기울임


<u>

밑줄


<s>

취소선


<sup>

윗 첨자


<sub>

아래 첨자


<address>

(집)주소 표현에 사용


<blockquote>

이 영역에 포함된 내용을 들여쓰기로 하나의 묶음처럼 표현


<pre>

이 영역의 모든 내용을 보이는 그대로 웹브라우저상에 표현


<xmp>

pre 태그와 같으나 차이점은 태그도 표현할 수 있다


<ol>

'ordered list'의 약자로 순서를 부여하여 표시한다. 목록의 항목은 <li> 태그를 사용한다.

속성 

 설명

 type

각 목록 앞에 붙는 표식을 지정한다. (I, i, A, a, 1) 

 start

시작 번호(숫자)를 지정한다. 

 

<ul>

unordered list 약자로 순번 없는 목록으로 정렬할 때 사용한다. 목록의 항목은 <li> 태그를 사용한다.

속성 

설명 

type 

각 목록 앞에 붙는 표식을 지정한다. (disc, circle, square). 기본값은 disc이다.


<dl>

dictionary list의 약자. <ul> 태그와 비슷하게 순번 없는 목록으로 정렬할 때 사용한다.

항목은 <dt>태그를 사용하고, 항목 설명은 <dd> 태그를 사용한다.


※ <img>, <embed>, <bgsound>, <a> 태그는 웹의 리소스를 사용기 때문에 리소스의 경로를 지정해줘야 한다.

경로의 표현은 절대경로, 상대경로가 있다. 

상대 경로는 HTML 파일이 있는 폴더를 기준으로 한다. 


동일 폴더 : 파일이름.확장자

상위 폴더 : ../파일이름.확장자

하위 폴더 : 폴더이름/파일이름.확장자


절대 경로는 웹 경로를 의미한다. http://서버IP주소:8080/파일이름.확장자



 









'앎 > web' 카테고리의 다른 글

HTML 기본 태그 - 표 관련  (0) 2014.02.13
HTML 기본 태그 - 이미지, 사운드, 링크  (0) 2014.02.13
HTML 기본 태그 - 문단 관련  (0) 2014.02.13
Apache Tomcat 소스 버전 사용  (0) 2014.02.11
Apache Tomcat 포트 변경  (0) 2014.02.11
Posted by 후니아부지
:

Apache Tomcat 소스 버전 사용

앎/web 2014. 2. 11. 15:22 |

http://tomcat.apache.org 로 접속 한다.


왼쪽 편에서 원하는 버전을 클릭


Binary Distributions 부분의 Core에서 사용하려는 버전을 다운로드한다.

(Installer를 제외한 나머지가 소스버전임)


다운받은 파일을 압축을 풀면 apache-tomcat-6.0.39 라는 이름의 폴더가 나올 것이다.
(다운로드 한 버전에 따라 다를 것이다.)

이를 적당한 곳에 옮겨 놓는다.

GUI 형태의 설정 화면이 없으므로 모두 직접 수정해야 한다.
포트는 conf 폴더의 server.xml 파일에서 Connector port를 변경한다.

서버 구동은 bin 폴더의 startup.bat 를 실행한다.
콜솔화면이 뜨면서 실행이되는데 이를 닫으면 서비스가 종료되니 닫지말고 그대로 놔둔다.

웹브라우저로 접속해본다.


'앎 > web' 카테고리의 다른 글

HTML 기본 태그 - 표 관련  (0) 2014.02.13
HTML 기본 태그 - 이미지, 사운드, 링크  (0) 2014.02.13
HTML 기본 태그 - 문단 관련  (0) 2014.02.13
HTML 기본 태그 - 본문 관련  (0) 2014.02.13
Apache Tomcat 포트 변경  (0) 2014.02.11
Posted by 후니아부지
:

Apache Tomcat 포트 변경

앎/web 2014. 2. 11. 14:28 |

톰캣 서비스를 중지

톰캣 설치 경로로 이동

하위 폴더 중 conf 폴더에 'server.xml' 이라는 파일 수정

내용 중 Connector port 부분을 원하는 포트로 변경

톰캣 서비스 시작



'앎 > web' 카테고리의 다른 글

HTML 기본 태그 - 표 관련  (0) 2014.02.13
HTML 기본 태그 - 이미지, 사운드, 링크  (0) 2014.02.13
HTML 기본 태그 - 문단 관련  (0) 2014.02.13
HTML 기본 태그 - 본문 관련  (0) 2014.02.13
Apache Tomcat 소스 버전 사용  (0) 2014.02.11
Posted by 후니아부지
:


티스토리툴바