팡상닷컴

리스트 태그 < 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




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

티스토리툴바