HTML Eclipse style, select, optgroup, option, datalist, option, textarea, button, output, progress, meter 태그

 

 

style

 

 

<style>
.subm{  /* 버튼 스타일 */
  display:block;  /* 블록 레벨 요소 */
  background-color:#fff;  /* 배경색 */
  border:1px solid #dedede;  /* 테두리 */
  cursor:pointer;  /* 마우스 포인터 */
  padding:5px 10px 6px 7px;/* 패딩 */
}
.subm img{  /* 버튼 내 왼쪽 이미지 */
  border:0px;  /* 테두리 없음*/
  padding:0px;  /* 패딩 없음 */
  width:16px;  /* 가로 크기 */
  height:16px;  /* 세로 크기 */
}
.subm:hover {  /* 버튼 위로 마우스 포인터 올렸을 때 스타일 */
  background-color:#e6efc2;  /* 배경색 */
  border:1px solid #c6d880;  /* 테두리 */
  color:#529215; /* 글자색 */
}
</style>

 

 

select, optgroup, option

 

<select>, <optgroup>, <option>
여러 옵션 중에서 선택 – 드롭다운 목록
공간을 최소한으로 사용하면서 여러 옵션 표시 가능

 

select 태그 속성
size - 화면에 표시될 드롭다운 메뉴의 개수
multiple - 여러개 항목 선택 가능.

 

option 태그의 속성
value - 값
selected - 기본 선택옵션 지정.

 

optgroup 태그 
여러 항목을 그룹을 묶을 때 사용
label 속성을 사용해 그룹 제목을 붙임

 

optgroup의 속성
value : 값
label : 브라우저에 표시할 레이블

 

<fieldset>
<legend>select, optgroup,option</legend>
<select id="class" size="6" multiple >
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>

<select id="class">

<optgroup label="공과대학">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer">컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</optgroup>

<optgroup label="인문대학">
<option value="history">사학과</option>
<option value="lang">어문학부</option>
<option value="philo">철학</option>
</optgroup>
</select>          
</fieldset>

 

 

 

datalist, option

 

<datalist>, <option>
데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨

 

데이터 목록에 id를 이용해 이름을 붙이고,
<input> 태그의 list 속성에 데이터 목록 id를 지정함. 

 

 

기본형
<input type="text" list="데이터목록 id">
<datalist id="데이터목록id">
<option>....</option>
<option>....</option>
<option>....</option>
    ..........
</datalist>

 

 

<fieldset>
<legend>datalist, option</legend>
<input type="text" id="interest" list="choices">
<datalist id="choices">
<option value="naver.com" label="문법"></option>
<option value="daum.net" label="어휘"></option>
<option value="google.com" label="회화"></option>
<option value="listening" label="리스닝"></option>
<option value="news" label="뉴스청취"></option>
</datalist>
</fieldset>

 

 

textarea

 

: 텍스트 영역 ; 여러 줄의 텍스트 입력 
게시판의 게시물 입력 창, 회원 가입 양식의 약관 등

 

기본형

<textarea>내용 </textarea>

<textarea>태그 속성
 name : 이름
 cols : 가로너비 ; 문자단위로 지정.
 rows : 세로길이 줄단위

 

 

<fieldset>
<legend>textarea</legend>
<textarea name="text" cols="20" rows="5">????</textarea>
</fieldset>

 

 

 

button

<button>
다양한 형태의 버튼 삽입
화면 낭독기에서 버튼임을 정확히 전달할 수 있음
CSS를 이용해 원하는 형태로 꾸밀 수 있음

 

 

기본형

<button type="submit | reset | button(기본값)">내용 </button>

 

 

<fieldset>
<legend>button</legend>
<form>
<button type="submit" class="subm">
<img src="images/tick.png" alt=""> 전송하기
</button>
</form>
</fieldset>

 

 

 

output

 

 

<output>
계산 결과를 브라우저에 표시
브라우저 화면에 다르게 표시되는 것은 아니지만 

<output> 태그로 묶인 부분이 일반 텍스트가 아니라 계산의 결과값이라는 점을 
웹 브라우저가 정확히 인식할 수 있다

<fieldset>
<legend>output</legend>
<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
<input type="number" name="num1" value="0">
+<input type="number" name="num2" value="0">
=<output name="result" for="num"></output>
</form>
</fieldset>

 

 

 

progress

 

<progress>
작업 진행 상태를 브라우저에 표시
값에는 특별한 단위가 없고 단위를 표시하지도 않음

 

 

progress의 속성
value : 작업진행 상태를 나타냄 ,부동 소수점으로 표현..
max : 작업이 완료되려면 얼마나 많은 작업을 해야하는지 부동소수점으로 표현 -->

 

 

<fieldset>
<legend>progress</legend>
<label>10초 남음</label>
<progress value="50" max="60"> </progress>

<label>진행률 30%</label>
<progress value="30" max="100"></progress> 
</fieldset>

 

 

 

meter

 

<meter>
전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용
예) 하드 디스크 사용량, 유권자 투표율 등

 

 

meter의 속성
min - 최소값 값을 정하지 않으면 0
max - 최대값 값을 정하지 않으면 1
value - 범위내에 차지하는 값
low - 이정도면 낮다하는 값지정.
high - 이정도면 높다하는값 지정.
optimum - 이정도면 적당하다할정도의 범위 지정.

 

 

<fieldset>
<legend>meter</legend>
<label>점유율 0.8 </label>
<meter value="0.8"></meter>

<label>사용량 64%</label>
<meter min="0" max="100" value="64"></meter>

<label>트래픽 초과</label>
<meter min="1024" max="10240" low="2048" high="8192" value="9000"></meter>        

<label>적절한 트래픽</label>
<meter value="0.9" low="0.4" optimum="0.6" high="0.8"></meter>
</fieldset>