2024.03.21

영역태그

• span, div 태그

  - <span> : 데이터 까지만 영역 - 사용했을 때 줄이 변경되지 않는다.
    		한 줄에서 데이터를 구분하는 용도로 사용.
    		
    		나의 이름은 <span>진수현</span> 입니다.
    		- 진수현 : JavaScript이나 JSP에서 값을 동적으로 변경
    
  - <div> : web browser에 넓이 100%가 영역 - 사용했을 때 줄이 변경된다.
  				web page의 디자인을 설정할 때 사용.

HTML Form Control

- 사용자가 입력하는 값을 받기 위한 HTML에서 제공하는 객체들.
- <input>, <select>, <textarea> 3가지의 객체를 제공.
- <form>태그의 자식태그로 포함되어있을 때 접속자가 입력한 정보를 웹 서버로 전송할 	수 있다.
  - <input>
    - type속성에 따라 제공되는 객체가 다르다.
    - 공통속성 : name="이름", id="아이디", readonly="readonly", 
  				disabled = "disabled", value="값", type="사용객체",
  				class="클래스명"

• 

  	<input type="text" name="이름" id="아이디" class="클래스" size="넓이" maxlength="최대입력글자수" readonly="readonly" disabled="disabled" value="보여질 글자" placeholder="보여질 글자" placeholder="보여질 글자">

• 

  	<input type="password" name="이름" id="아이디" class="클래스" size="넓이" maxlength="최대입력글자수" readonly="readonly" disabled="disabled" value="보여질 글자" placeholder="보여질 글자">

• 

  	<input type="checkbox" name="이름" id="아이디" class="클래스" size="넓이" maxlength="최대입력글자수" readonly="readonly" disabled="disabled" value="back-end로 전송될 값" checked="checked">

• 

  	<input type="radio" name="이름" id="아이디" class="클래스" size="넓이" maxlength="최대입력글자수" readonly="readonly" disabled="disabled" value="back-end로 전송될 값" checked="checked">

• 

  	<input type="hidden" name="이름" id="아이디" value="back-end로 전송될 값">

• 

  	<input type="file" name="이름" id="아이디" class="클래스" size="넓이" maxlength="최대입력글자수" readonly="readonly" disabled="disabled">
    - 눈에 보이지 않게 값을 back-end로 전송할 때

button , reset, submit 은 form태그의 하위태그로 등록되었을 때만 일을 수행한다.

• 

  	<input type="button" name="이름" id="아이디" class="클래스" readonly="readonly" disabled="disabled" value="버튼의 라벨">
    - 버튼 모양 : 클릭했을 때 아무일도 일어나지 않는다.

• 

  	<input type="reset" name="이름" id="아이디" class="클래스" readonly="readonly" disabled="disabled" value="버튼의 라벨">
    - 취소버튼 : 클릭했을 때 <form>태그의 하위 HTML form Control 값들을 원래대로(초기화) 되돌린다.

• 

  	<input type="submit" name="이름" id="아이디" class="클래스" readonly="readonly" disabled="disabled" value="버튼의 라벨">
    - 제출버튼 : 클릭했을 때 <form>태그의 하위 HTML form Control 값들을 back - end로 제출(전송)한다.

<.form>

• back - end로 값을 전송하기 위해 사용하는 태그
• 

- <input type = "submit"이 존재하고, 클릭되어야 back-end로 값이 전송된다.>

- 사용 )
<form action = "값을 받을 back-end 페이지 URL" name="이름" id="아이디" method="값의 전송방식" enctype="페이지의 전송방식" enctype="페이지전송방식">
  - Parameter를 어떻게 전송할 것인지.
  - enctype = Parameter를 전송할 것인지, File을 전송할 것인지.
  
- CSS에서 숨김하여 의미적인 용도로 사용.
  - <filedset>
    - <form> 태그의 영역을 식별하기 위한 테두리 선.
  - <legend>
    - titled border
  - <label>
    - 라벨을 설정하는 태그

<.select>

• 

<select name="이름" size="보여줄 옵션의 개수">
  <option value="전송할 값" selected="selected">보여줄 값</option>
  <option value="전송할 값" >보여줄 값</option>
  <option value="전송할 값" >보여줄 값</option>
</select>
  - selected="selected" : 보여줄 옵션

• 

<textarea name="이름" id="아이디" class="클래스" rows="보여줄 수" cols="한줄에 쓸 글자수">보여줄 문자</textarea>

HTML5에서 추가된 태그들

• 

- <details> : 메시지를 제공하고 사용자가 메시지를 클릭하면, 숨겨놓은 제공할 내용을 열어서 보여주는 태그.
- <details>
  	<summary> 사용자에게 보여줄 메시지</summary>
  	<span> 사용자에게 보여줄 내용</span>
  </details>