폼태그, 목록태그

*파일 가져오는 방법
- import->workspace 경로 찾아가기->나 같은 경우 'aaa'->반드시 프로젝트 목록에 내가 원하는 프로젝트가 보여야한다
(if 목록이 안나온다면, 폴더 잘못 선택 or 프로젝트가 깨진경우(치명적인 경우))


- 프로젝트를 USB, 외장HDD(SSD)에 workspace를 지정(USB는 비추천)


*웨장하드에 워크스페이스 지정방법
- Switch Workspace->other->새로운 폴더를 만든다('my workspace'폴더명은 가능하면 영어로)->재부팅->my workspace폴더에 프로젝트 aaa복사 
import project->General->existing projects into workspace->select root directory->my workspace폴더 안의 aaa 선택



목록태그
a. OL(순번을 사용한 목록 표시)
b. UL(기호를 사용한 목록 표시)
c. LI : ol, ul이 공통으로 사용하는 태그(List)
 - 실제 목록을 표시함


<ol start='100' type='1'>
     <li>백두산</li>
     <li>한라산</li>
     <li>설악산</li>
</ol>

start='1'(기본값) type='i'->로마자
                      type='a'->a,b,c...
                      type='A'->A,B,C...

해당 위치에 준하는 기호로 표시된다

<ul>은 start속성은 없고 type속성은 있다
1.circle - 속 빈 동그라미
2.disk - 검은 동그라미
3.square - 검은 사각형


OL 또는 UL의 중첩 사용 코딩방법

<h2>OL 또는 UL의 중첩사용 </h2>

<ol>
 <li>HTML5
  <ol>

<li>개요</li>
<li>글꼴 태그</li>
<li>문단 태그</li>
<li>앵커 태그</li>

  </ol>
 </li>

<li>CSS

  <ul>
    <li>글꼴 스타일</li>
    <li>문단 스타일</li>
  </ul>

</li>

</ol>



태그의 2종류
a. <시작>...</끝>->태그의 영역
b. <시작끝/>->영역은 만들어지지 않고 기능구현만 구현된다
- <font color='red'>나는 빨간색<font color='blue'>이 아닐걸~</font>정말?</font>
  결과->나는 빨간색/ 이 아닐걸~/정말?(빨/파/빨)



주석달기
<!--주석 내용--!>

*<!--
주석내용
--!>->이것도 가능 왜냐하면 <>영역 설정+HTML5은 줄바꿈이나 줄바꿔쓰기를 인식하지 못한다

*하지만 주석을 실무에서 쓰는건 비추
왜냐하면, 브라우저 오른쪽보기->페이지 소스보기->주석 내용이 보인다


Block mode
a. 오른쪽 공간이 비어 있어도 또 다른 태그가 올 수 없다
b. 넓이나 높이는 지정 될 수 있다

Inline mode
a. 오른쪽 공간이 비어 있으면 또 다른 태그가 올 수 있다
b. 넓이와 높이를 지정 할 수 있다

*CSS는 이러한 특징을 보완안  mode들이 다수 있다



폼태그 : 사용자 정보를 서버로 전달
- <form name='폼의 이름' method='전송유형' action='서버페이지'></form>


폼태그 특징
a. 하나의 페이지에서 1개 이상 사용 가능
- '폼의 이름'->접근을 원할하게 하는 속성
- '전송 유형'->종류가 많다 그 중 가장 많이 쓰는 2가지
 1) method='GET or POST'(대소문자 구분X)
   - GET : 브라우저의 주소 표시줄에 전달되는 값이 보인다, 길이 제한이 있다(ex.네이버의 뉴스 주소창 or 로그인 주소창 등)
   - POST : 전달되는 값이 보이지 않는다, 길이 제한이 없다

b. form 태그는 ☆중첩사용 불가☆->중첩되면 오류가 굉장히 많이 난다->오른쪽 클릭-> '페이지 소스보기'로 확인 가능->ctrl+f->검사창'form'검색

c. action='here.do'->form태그 안에 기술된 내용을 here.do에게 전달/'here.do'->서버페이지


<form name='frm_member' method='post' action='insert_result.jsp'> 

</form>

*Jsp(Java Server Pages)
자바 서버 페이지(JavaServer Pages)는 HTML내에 자바 코드를 삽입하여
웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이드 스크립트 언어



<label>제목</label>
    <input type='text' name='phone' value='010-1111-1111'/>
- value는 초기값을 뜻한다(<input>의 기본값을 지정한다)
-'phone'은 변수(프로그램에서 파라메터(parameter) 변수라고 함)




*파라메터(parameter)
a.국어사전 정의
- 두 개 이상의 변수 사이의 함수 관계를 간접적으로 표시할 때 사용하는 변수
- 사용자가 원하는 방식으로 자료가 처리되도록 하기 위하여 명령어를 입력할 때 추가하거나 변경하는 수치 정보
b.영어사전 정의
- (일정하게 정한) 한도
 ex) to set/define the parameters




    <input type='button' value='취소'/>
    <input type='submit' value='저장'/>
- button과 submit이 어떤 경로로 action='insert_result.jsp'로 가는지☆

*button의 속성값
a. type="submit" : <form>태그 내에 입력된 데이터를 서버로 전달
b. type="reset" : <form>태그 안의 작성 내용을 초기화하는데 사용
c. type="button" : 흔히 자바스크립트를 이용한 기능 구현에 많이 사용, 버튼 생성

*<input type=" ">의 속성
a. type="submit" : <input>을 form handler에 데이터를 제출하기 위한 버튼으로 지정
b. type="button" : <input>을 버튼으로 지정



*<button type="submit">과 <input type="submit">
공통점 : 데이터를 서버에 제출하기 위한 버튼이며, 모양도 똑같이 버튼으로 표현된다
차이점
a. <button>은 안에 내용을 표현 할 수 있다/<input>은 표현 할 수 없다
b. <button>태그는 여는 태그와 닫는 태그를 모두 갖지만, <input type="button">속성은 opening 태그만 사용한다
   즉,<img>, <svg>와 같은 노드를 추가할 수 없다



*<input> 태그의 'type' 속성을 'submit'이라고 지정해 주면(=<form>태그 안에 <input type="submit">지정)
a. 자동으로 데이터를 전송할 수 있는 버튼 생성
b.그 버튼을 클릭하면 지정된 URL로 <forms>태그 안에 입력된 값들이 'action'속성으로 지정된 서버 페이지로 전송
----------------
<form>
      ID : <input id='userid' type='text'/><br>
      비밀번호 : <input id='pwd' type='password'/><br>
      <input type='submit'>
</form>
---출력 화면---
ID : (   )
비밀번호 : (   )
"제출"버튼
-----------------
- 자동으로 '제출'이라는 버튼이 생성
- '제출'이라는 버튼을 변경하려면 <input type='submit' value='로그인'>->'로그인'이라는 버튼으로 변경
- <form>태그에 'action'속성을 추가하고(<form action='login_page.php'>) '버튼'을 누르면 
   해당 <form>태그 내에 지정된 값들이 'action'태그에 지정된 페이지로 넘어간다



*id와 name
공통점 
- id와 name 모두 html element의 속성(attribute)으로 두 속성 모두 element를 식별하는 용도로 사용

차이점 
a. id : 유일한 값으로 문서 안에서 오직 하나만 존재해야하며 주로 JavaScript에서 다룰려고 지정한다 
        또한 id로 설정된 값은 서버쪽으로 parameter로 넘어가지 않기 때문에 서버쪽에서 접근 할 수 없다
b. name : 문서 안에서 중복사용이 가능하며 action에 해당하는 페이지를 전달하는 parameter로 사용




<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>가 오류가 난다면?
- tomcat server가 오류
- 해결방법 : preference->runtime server environment->tomcat server추가/buil path에서 확인->tomcat서버가 없으면->classpath->add library->tomcat server 추가



오류해결 방법
- java version이 1.8일때는 facets가 3.0으로 바꿔야한다
  tomcat version과 java version충돌 
-'clean'->method,class rebuild



String abc = request.getParameter("mid");
<%=abc %>

- 해석 : "mid에 담겨있는 parameter를 가지고 오는 걸 요청하고, 그걸 문자열로 abc에 대입"
- request->요청정보(객체)
-'.'->~안에 있는, ~갖고 있는
- request.getParameter->Parameter변수를 가져오라는 의미->Parameter의 변수=mid
- 변수abc에서 변수 mid의 value값을 대입(저장)
- string->문자열을 의미(데이터 유형을 나타낸다), keyword(예약어, 명령어)이다
- <%=abc %>->저장 버튼을 눌렀을 때 변수 mid의 value값을 그대로 출력




http://localhost:555/web_project/member/insert_result.jsp?mid=hong&irum=~~~~(유니코드)&pwd=1111&phone=010-0000-0000&zip=&address=aaa&address_detail=bbbb

- http://localhost:555/web_project/member/insert_result.jsp->uri
- parameter뒤 '?'->시작됐다
- parameter 변수 mid
- hong이라는 변수를 mid에 넣어라
- '=' ->같다X->우변의 값을 좌변에 있는 변수의 대입해달라는 뜻
- 5=hong 은 X '5'는 변수가 아니기 때문에 불가능/mid=hong은 가능 'mid'가 변수이기 때문에
- '&'(엠퍼센트)->parameter의 연결자



*URI(Uniform resource identifier)
은행계좌는 계좌번호, 버스는 노선번호, 사람은 주민등록번호로 구분되듯 웹 서버의 리소스 또한 각자의 이름이 있다. 
(클라이언트가 요청할 때 찾아야하니까, id같은 고유한 식별값이 있어야겠지!) 
이때 서버 리소스 이름(식별자)을 uniform resource identifier(통합 자원 식별자), URI

*리소스(Resource)
웹 서버는 웹 리소스를 관리하고 제공한다. 어떤 종류의 콘텐츠도 리소스가 될 수 있다.
 리소스는 텍스트 파일, html파일, 워드, JPEG 이미지 파일 등의 정적 파일이 될 수도 있고, 주식거래, 인터넷 검색엔진 등 요청에 따라 콘텐츠를 생산하는 프로그램도 모두 리소스(동적 콘텐츠 리소스)가 될 수 있다.


*유니코드(Unicode)
숫자와 글자, 즉 키와 값이 1:1로 매핑된 형태의 코드
다시말해, 아스키코드로 표현할 수 없는 문자들을 유니코드라는 이름 아래 전 세계의 모든 문자를 특정 숫자(키)와 1:1로 매핑한 것



String abc = request.getParameter("mid");
String irum = request.getParameter("irum");
String pwd = request.getParameter("pwd");
String phone = request.getParameter("phone");
String address = request.getParameter("address");
String addressDetail = request.getParameter("address_detail");

- abc, irum, pwd, phone, address, addressDetail은 임의의 변수
- '<%'->시작을 의미(하나의 명령어), 변수는 하나밖에 올 수 없다(태그나 또다른 요소는 올 수가 없다)->출력문장
- '%>'->끝을 의미



html에서 넘기는 코드나 과정은 총 세가지이며 c가 제일 많이 쓰인다(jsp은 거의 안 씀) 
a. jsp(제어)
b. servlet(자바코드로 받는다)
c. spring(제일 중요)



<label>성별</label>
     <input type='radio' value='남자' name='gender'>남자
   
- radio는 선택박스가 생긴다->반드시 '버튼' 부분에 와서 체크해야하기 때문에 불편하다->name='gender'로 통일했을 때 세 개 중 하나 선택 가능
  해결방법=><label>로 감싼다
<label>성별</label>

     <label>
     <input type='radio' value='남자' name='gender'>남자
     </label>



-  <label>
         <input type='radio' value='남자' name='genderA'>남자
     </label>
     
     <label>
         <input type='radio' value='여자' name='genderB'>여자
     </label>
     
     <label>
         <input type='radio' value='혹시' name='genderC'>혹시
     </label>
결과->버튼이 모두 선택가능하다
         왜냐하면, <input type='radio'>에서 name값을 다르게 지정하면 다른 그룹으로 인식하기 때문이다
         이와 반대로 name값을 동일하게 지정하면 하나의 그룹이 된다



input type='radio'
a. name 값을 동일하게 지정하면 하나의 그룹이 된다
b. 버튼이나 텍스트를 클릭해도 라디오 버튼이 선택되게 하려면 버튼과 텍스트를 <label/>로 감싸준다



성별<br>
     <input type='radio' name='gender' value='female'/>여성
     <input type='radio' name='gender' value='male'/>남성
<br>
좋아하는 과일
<br>
     <input type='radio' name='fruits' value='apple' checked/>사과
     <input type='radio' name='fruits' value='banana'/>바나나
     <input type='radio' name='fruits' value='orange'/>오렌지
<br>
     <input type='submit'>

- 같은 분류의 라디오버튼은 같은 이름으로 지정해준다
- 'value'에 지정된 값(속성)들이 '제출(submit)'버튼을 누르면 서버로 전송된다
- 'checked'라는 속성은 화면이 처음에 로딩 될 때 해당 항목은 기본으로 선택이 된 채로 보여진다