[HTML] 사용자로부터 입력 받기 3

1. textarea 태그

  <h1>textarea 태그</h1>

  <label for="message">메시지를 입력하세요.</label> <br>
  <textarea id="message" cols="64" rows="5" placeholder="본문을 입력하세요."></textarea>
  
  <!--cols: 가로 크기, rows: 표시되는 줄 수 
  	  rows에 적힌 것보다 더 많은 줄 적을 수 있음! 
      (표시되는 줄 수보다 더 적으면 스크롤 생기고 밑으로 내릴 수 있음.)-->
      
  <!--placeholder적고 >< 사이를 띄어버리면, 
  그 사이 공백이 글을 쓴 것으로 간주되어 placeholder가 적용이 안됨.
  따라서 ></textarea>에서 >< 사이에 공백을 쓰지 않도록 주의 하자!-->
  
  <!--원래 input에서 미리 내용을 적어두기 위해 value란 속성을 사용했다.
  	textarea에선 그냥 >< 사이 (원래 텍스트 적는 칸)에 적어두면 된다.-->

2. 옵션을 사용하는 태그

(1) select,option 태그

  <h1>옵션들을 사용하는 태그</h1>

  <h2>select, option 태그</h2>

  <label for="lang">언어</label> <br>
  
  <select id="lang">
    <option value="">-- 언어 선택 --</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">자바스크립트</option>
    <option value="ts">타입스크립트</option>
  </select>
  
  <!--select안에 자식 태그로 option들이 들어가 있음.
  	option의 속성 value는 해당 옵션 골랐을 때 백엔드로 넘어가는 실제 값임.-->
    
  <!--<select id="lang" multiple> 이라 적으면 다중 선택이 가능함!
  		(shift + click으로) but 이건 사용자 친화적이지 않기 때문에 잘 쓰지 않음.-->


  <br><br>

(2) optgroup 태그

  <h2>optgroup 태그</h2>

  <label for="shopping">쇼핑 목록</label> <br>
  <select id="shopping">
    <optgroup label="과일">
      <option value="f_apl">사과</option>
      <option value="f_grp">포도</option>
      <option value="f_org">오렌지</option>
    </optgroup>
    <optgroup label="채소">
      <option value="v_crt">당근</option>
      <option value="v_tmt">토마토</option>
      <option value="v_ept">가지</option>
    </optgroup>
    <optgroup label="육류">
      <option value="m_bef">소고기</option>
      <option value="m_prk">돼지고기</option>
      <option value="m_ckn">닭고기</option>
    </optgroup>
  </select>
  
  <!--optgroup으로 묶어서 선택사항들간의 그룹화를 할 수 있음.-->

(3) datalist 태그

  <h2>datalist 태그</h2>

  <label for="job">현재 직업</label> <br>
  <input id="job" list="jobs">
  <datalist id="jobs">
    <option value="학생">
    <option value="디자이너">
    <option value="퍼블리셔">
    <option value="개발자">
  </datalist>
  
  <!--여기선 datalist의 id와 input의 속성 list에 적힌 값이 같아야 연결 된다.-->
  
  <!--select와 비교 해보면 option이란 자식태그의 형태가 다르다.
  	select는 <option value="실제 들어갈 값">사용자에게 보이는 값</option>--
    datalist는 <option value="사용자에게 보이는 값">>
    
  <!--해당 옵션 값들은 그저 추천이다. 사용자는 저것들 이외의 값을 입력할 수 있다.-->

3. 정도를 표현하는 태그

(1) progress 태그

  <h1>정도를 표현하는 태그</h1>

  <h2>
    progress 태그
  </h2>
  <progress 
    max="100">
    0%
  </progress>

<!--max는 해당 bar의 최대치를 나타내고, ><사이의 퍼센트는 명령어들과 아무 관계없고, 
	해당 시각 디자인을 못 보는 사람들, 인터넷 안 되는 사람들을 위한 안내용이다.-->

<!--progress란 태그는 동적인 진척도를 나타내기 위한 태그이다. 
	이를 제대로 쓰려면 백엔드 언어와 협업이 되어야 한다.-->

(2) meter 태그

  <h2>
    meter 태그
  </h2>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="50" value="20">
    20달러
  </meter>
  
  <!--min,max는 최대 최소값-->
  <!--low,high는 해당 최대, 최소 값 사이를 3등분 하기 위한 2개의 기준 선-->
  <!--optimum은 이상적인 값을 나타낸다. value가 optinum에 가까울 수록 초록색, 멀수록 빨간색이 된다.-->

4. 스스로 해보기

text area

오늘 먹을 음식
::음식을 골라주세요:: 라면 쌀밥에 김치 파스타 김치찌개

축구선수
::최애 선수를 골라주세요:: 김민재 손흥민 황희찬 해리 케인 해리 메과이어 라힘 스털링

원하는 직업은?

progress 태그

unknown

meter 태그

200달러 500달러 777달러