표 컨텐츠 ,양식

• 표를 작성할때 사용하는 구조적인 tag= table(데이터표,표시) tr =행, 줄(table row) th,td=칸,열,셀 display가 block,inline요소가 아니다. 
• 표를 입력할 때 1. 설계할 표를 그린다. 2. 줄을 먼저 형성한다. 3. 줄안에 각각의 칸을 입력한다. 선과 여백을 없애는 방법은 css을 이용한다. 선의 경우 td와 th에 border을 삽입하여 몇px, 형상, 색상과 원하는 색상을 background-color로 설정한다. 여백을 없애는 경우 td와 th의 부모인 table에 입력을 하며 border-collapse: collapse;(여백없애기)를 입력하여 여백을 없애면 된다. css에서 부모요소는 항상위에 작성을 해야하며, td와 th위에 table을 작성하면 된다. 그리고 padding으로 내부안쪽 여백을 맞춰준다. 
• 테이블의 header에 해당하는 부분은 th로 입력한다. 두껍게 작성이 기본적인 설정
• 표의 영역은 table로 지정, 1. 줄을 입력, 2. 하나의 줄에 몇칸이 들어갈지 줄안에 작성, 헤더부분은 어디로 입력될지 요구사항 혹은 설계할 표를 미리 설계후 태그를 작성한다. 
• th= header를 작성한다. '머리글 칸'을 지정한다. (속성) abbr: 열에 대한 간단한 설명을 작성한다. headers : 다른 th와 연결이 되어 있을 경우 id값을 이용하여 연결한다. colspan: 열 부분 병합 =기본값은 1칸으로 조절한다. rowspan:행 부분 병합 ,scope:자신이 누구의 머리글 칸인지 명시함 :col(열)-column /row(행) 
• id의 경우 일반 명사를 사용하는 것을 추천하지 않는다. 종속된 곳에 작성하고 headers쪽에 작성한다. 
• td=table data로 일반칸을 의미한다. th와 마찬가지의 속성을 가지고 있으며, td의 headers의 경우는 th id에 종속되어있다. 굳이 id를 사용하여 연결할 필요는 없다. 
• table은 표를 시각적인 용도로 만들기 위함으로만 사용한다. css가 너무 잘되어 있기 때문에 꼭 사용할 필요는 없다

표를 보조하는 역활로 사용하는 tag

• caption=표의 제목을 설정, 열리는 table아래에 바로 삽입하는 tag , table당 하나의 caption만 사용가능하다. 
• col=표의 열들을 공통적으로 정의하는 column의 약어로 col과 그의 집합인 colgroup =3열일 경우 col이 3번 들어가고 혹은 col안에 span을 이용하여 본인부터 몇열까지 해당인지 설정할 수 있다. <col span ="2"><col>이렇게 설정하여 색상을 입력할 수 있다. colgroup은 열을 묶을때 사용할 수 있다. 
• table의 sub 역활 thead (머리글) , tbody(본문) , tfoop(바닥글)=기본적으로 레이아웃에 영향을 주지않는다. 그저 나누기를 위해 사용하는 태그

양식

• form =웹서버에 정보를 제공하기 위한 정보 여러양식을 form태그로 범위를 지정하고 전송하여 사용 (속성) action : 전송할 정보를 작성 , autocomplete: 사용자 입력 자동 완성 여부 (on,off)  method : 서버에 전송할 http 방식(기본값으로는 GET,post가 있다. home :고유한 양식의 이름 novalidate :서버전송시 양식 데이터 유효성 검사하지 않도록 설정(test시에 사용) target : 서버전송시 응답받을 방식: _self,_blank 형식으로 결정 : display는 block요소 이다. 

• 

 

• input type =어떤방식으로 넣을 것인지 설정 함.  email.은 이메일 주소처럼 @와 . 이 들어가야 다음으로 넘어갈 수 있다. novalidate를 설정하면@ 와. 를 입력하지 않고 넘어갈 수 있으며, test 환경에서 사용한다. 이렇게 이메일과 password를 입력하고 로그인 버튼을 누르면 action으로 전송이 된다.  /login으로 전송이 되었다. method의 get의 경우 입력정보가 그대로 노출 된다. post의 경우 노출이 되지 않게 조절한다. post를 사용한다고 하더라도 완전히 가리기 어렵기 때문에 암호화로 변경후 전송을 한다. target 은 _self 기본창으로 유지를 할 것 인지, _blank로 새로운 창을 띄울 것 인지에 대한 것이다. _self로 기본값 설정이 되어있다. 
• <input/>=사용자에게 입력받을 데이터 양식 설정이다. (속성) autocomplete:자동완성기능을 사용할 것 인가?on이 기본값이다. autofocus : 로드될 때 자동으로 포커스, checked : 양식이 선택되고 type인 속성은 audio와 checkbox만 가능하다. 
• name은 양식의 이름 이다. input의 양식을 설정하는 type 은 중요하다, 입력받을 데이터의 종류는 value로 설정한다. 큰 것 들은 button(일반 버튼 - input으로 만들며, java sp으로 구현기능이 가능하다. checkbox는 동의 버튼으로 사용한다. file의 경우 email과 password를 설정할 때 사용을 하며, text는 입력, submit은 제출을 의미한다. max length로 글자수를 제안 할 수 있다. 
• input type = "button" value ="로그인" === <button>로그인</button> 직관적으로 사용이 가능하다.

  

• 읽기만 하고 입력값은 받기 싫을 경우 readonly 속성을 이용한다. disable :비활성화-->포커스조차 될 수 없게 만든다. 
• form으로 rapping 하며, action을 입력, method 입력,  name을 입력하여 데이터 전송 값을 어떻게 입력할 것 인지 정할 수 있음
• input후 어떤 방식으로 입력해야하는 지 나오도록 힌트 값을 주고 싶다면, placeholder="원하는 값 text"를 작성해준다.  min :최소치 max:최대치 함께 적는 다면 그 이상 그이하가 되지 않도록 작성 할 수 있다. step 속성을 이용하여, 몇의 배열로 증자, 감소가 될 지 정할 수 있다. type :checkbox check가 되어있지 않은 박스를 출력할 수 있다. 기본값은 없이 ,checked를 설정하면 체크된 상태로 출력이 가능하다. 

• input type file:파일선택 brouser의 파일을 선택받게 입력, 여러개를 동시에 선택시 multiple속성을 입력 input type "image" src =설정할 .png alt"대체 text" 입력으로 이미지 입력가능 , form action =/login으로 삽입을 한다면, 이미지를 제출 버튼으로 활용 가능하다. radio : 설문지에서 여러가지 선택안으로 주는 박스의 형태로 출력가능, 기본적으로 해제가 되지않아 여러개로 작성해야한다. 설문 항목이 여러가지라면 name으로 전체 묶음처리로 사용이 가능하다. 1번 선택후 2번해제===무조건 그중에서 1개만 선택해야하는 값 . 처음의 선택이 된 값으로 출력을 원할시 checked로 설정가능하다. 
• reset속성은 form내에 있는 애들을 전부 초기화를 시키지만, 밖에 있는 input은 초기화 시킬 수 없다.
• label =라벨 가능 요소의 제목, text를 선택해도 박스가 선택됨, 제목으로 input부분에 효과를 준다. inline요소로 for에 id에 연결되어 인식할 수 있게 만든다. input type을 label로 rapping하면 브라우저가 인식할 수 있게 만들고, for로 id로 묶어주어 연결하여 사용할 수 있게 해줌으로 참조콘텐츠를 추출할 수 있게 해준다. 
• botton=선택가능한 버튼(속성) autofocus:문서내에 고유, 자동으로 포커스를 줌, disable :버튼을 비활성화,form:id속성값 name:form데이터와 함께 전송되는 버튼의 이름 type:버튼의 타입 button 버튼, reset 초기화 , submit 제출 버튼의 경우 기능이 포함되지 않으며, java를 이용하여 기능을 첨가 할 수 있다.
• 위 이미지 사진이 java strip을 실행한 모습이며, 버튼을 누르면 doit()실행하려는 문구를 입력할 수 있다. 알림창이 뜨게 만든다 
• textarea =여러줄의 일반 text양식 1줄인 경우 input tag를 사용한다. 몇줄을 입력할 것인지 rows라는 속성이 추가되며 rows의 기본값은 '2'이다. 글씨영역이 들어가는 text의 칸이 출력되며, 오른쪽하단의 작은 부분으로 확대와 축소의 크기를 조정가능하게 한다. placeholder의 속성으로 힌트를 줄 수 있게 입력이 가능하다. 
• fieldset= 양식을 그룹화 시킴 disable의 속성으로 그룹내 모든 요소를 비활성화시킴이 가능하며, form=id로 속성 활용이 가능하고, name으로 데이터랑 상관없이 그룹의 이름을 지정할 수 있다. 
• legend =제목을 지정함  
• select =선택메뉴, 옵션을 선택하는 메뉴이다. option을 rapping하여 선택할 수 있게 출력되게 한다. 
• datalist = 자동완성기능 (속성) autocomplete:자동완성기능 disable : 기본값은 on으로 비활성화 시킴 form:id multiple:다중선택가능 name:이름 size: 선택된 옵션으로 여러개로 보일 수 있음. select : name:선택하는 칸이 나옴 
• optgroup = option의 그룹화로 option을 rapping한다. label로 이름화시킨다. disable로 비활성화 하는 그룹부분만 비활성화가 가능하다. 
• option =빈태그로 사용이 가능하다. 선택메뉴를 옵션, 자동완성에서 사용옵션으로 사용가능하다. label 보여지는 값으로 설정, value =server로 보내지는 값을 의미하는데 <option></option>내에 입력을 하면 label의 역활과 value의 역활을 전부 수행할 수 있다. 그렇기 때문에  label과 value의 값이 생략되면 텍스트와 값으로 사용된다. selected 옵션이 선택되었음을 표시한다. 
• datalist =자동완성기능을 제공한다. input에게 정의된 옵션을 지정하며, list인 전제를 보여준다. text를 선택하게 , 자동완성은 java script없이 사용이 가능하다. input =양식 list=id값을 동일 연결하면 option으로 선택한다. 
• progress =작업의 완료 진행율을 표시하며, 로딩바처럼 보여진다. max로 작업의 총량을 설정 ,value값으로 작업의 진행량을 설정, java를 이용하여 설정, progress value="진행도" max="총량" max를 적지 않을 경우 0과 1사이의 숫자를 작성해야한다. (소수점으로 %값을 입력하는 것 ex>70% = 0.7) 

• 

  scrip적용시 

  1초에 1번씩 진행이 되는 모션이 나온다. 진행률이 max가 되면 정지함.

 

전역속성 (global attributes) =모든 html 요소에서 공통적으로 적용 가능한 속성을 이야기한다.

• class는 별칭으로 공백으로 구분된 요소들의 별칭을 지정하며 css와 java scrip요소 선택시를 통해 선택하여 접근하고, 하나에 태그에 별칭으로 지정이 가능하다. 즉 별명! 
• id =1개의 문서에 고유한 식별을 의미한다. 이름으로 고유해야함,  1곳에 1개만 사용이 가능하다. 
• <div class = section ><div>입력시 .section으로 자동입력이 가능하다.class는 중복사용가능하다. id는 고유하기때문에 중복사용 불가능 
• style 은 class는 "."+"선택자" id는 "#"+"선택자"의 모양이다.