기초, Form_HTML

HTML과 CSS의 정의

• css는 브라우저에게 웹사이트가 어떻게 보여야하는지에 대해 알려준다
  css는 색상, 사이즈등/ 살을 붙여놓은 웹사이트
• html은뼈대만 있는 웹사이트
  html은 브라우저에게 웹사이트의 컨텐트(내용)가 무엇인지에 대해 알려준다

• (커서 동시 선택 = art키)

< head>
사이트의 제목, 설명, 부가정보, 기술적 내용이 들어가는 부분

• <meta charset="utf-8">: 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 한다
• <meta name="viewport" content"width=device-width">:디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다.
• <title>repl.it</title>: 브라우저 탭에 보이는 페이지 이름이다. index.html에 작성된 코드는 지금 보고있는 웹페이지 자체의 index.html 파일이 아니라서 수정을 해도 적용안됨

id

• body안에 어떤 태그에든 넣을 수 있는 attribute
• element당 하나의 id만을 가질 수 있다 (중복된 id를 사용하면 안됨)
• css가 태그를 지정하여 꾸미기 위해 id가 필요함

form

스타일이 아주 다양해서 찾아보며 만들기 = form mdn 구글링
default값 -> submit

< form name = "폼 이름 입력" action = "웹 프로그램 페이지" method = "전달방식">
< input type = "폼 모양과 기능" name = "폼변수입력" value = "전달값">
</ form>  

• type: 폼의 모양과 기능결정
• name: 폼의 이름 결정

• action: 사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램(ASP,PHP,JSP등)의 페이지지정

method

웹 서버와 클라이언트 간의 통신방법 지정(GET방식, POST방식)

• get 방식
  url 뒤에 파라미터를 붙여서 데이터를 전달하는 방식
  사용자가 보내는 데이터는 이름과 값이 결합된 문자열 형대로 전달
  각 이름과 쌍은 & 기호로 구분
  url을 보면 어떤 데이터를 전송하고자 하는지 알 수 있기 때문에 보약에 취약
  default값 : enter
• post방식
  http request 헤더에 파라미터를 붙여서 데이터를 전송하는 방식
  서버로 보낼수 있는 글자수 제한없음
  get 방식과 비교하여 보안상 우위에 있음

input

• type
• • radio: 여러개의 보기중 선택할수 있음
• • checkbox
• • button
    < textarea row="" cols=""> < /textarea> 텍스트 작성하는 공간
    < fieldset> < /fieldset> 입력폼이 여러개 있을때 경계선을 그려서 하나의 그룹으로 만듦
    (fieldset 안에 제목(legend), 이름,학교 summit ...)
    < option value="1~" selected> 내용 < /option> 펼침목록에서 한가지 선택할 수 있는양식

input button과 button속성

공통점

submit: 폼을 제출하는 이벤트를 발생시킴
reset: 폼 안에 작성된 내용을 초기화 시킴
button: 자체로는 아무 이벤트가 없고, click이벤트와 연결시켜 자바스크립트를 활용하는 방법을 사용

차이점

• button

1. form에서 활용
2. non self closing
3. 즉, 하위태그를 추가할 수 있다 (img 등)

• input

1. self closing
2. 즉, 하위태그를 추가할 수 없다(background-img 사용)

• img는 img 태그를 사용하는것이 검색엔진 최적화등에 도움이 된다.

button

▪︎ button의 기본 type은 submit이다
▪︎ button에 타입을 명시하지 않아도 큰 문제는 없다..... form 내부에서 쓰이지 않으며, 하위 IE가 아니라면!
▪︎ form 태그 내에 타입 명시 없는 버튼은 submit으로 동작하므로 클릭 시 새로고침된다.
▪︎ IE10 이하에서 form 밖의 input에서 엔터 입력은 submit 버튼과 연결된다.
▪︎ 명확한 구분을 위해 submit이 아닌 버튼에는 type="button"을 지정해주는 것이 좋다.

• 막대그래프 양식
  < meter> 지정된 값을 표현하기 위해 사용
  < progress> 다운로드 상태 표시같이 현재 진행률이 어떻게 되고 있는지를 나타낼때 사용
  '<>태그에 사용하는 속성' 구글링

input tag use

• label을 사용한 텍스트
• button속성과, value속성을 이용한 버튼
• text/password 태그를 이용한 입력박스
• radio/checked/name/checkbox/option/select/reset/submit/file/textarea 태그이용
• 작성된 텍스트를 선택하면 해당 텍스트에 해당하는 텍스트박스외 영역이 선택됨
• 사용하는 글자수를 제한
• 버튼에 들어가는 문구
• 선택지에서 자동적으로 선택되어 있게 한다
• 복수의 선택지 중에서 한가지만 선택하는 경우 (ex 성별)
• 선택지가 있는 엘리먼트에서 다른 영역에 있는 엘리먼트와 혼동되지 않도록 name속성으로 묶어줌
• 다수외 복수 선택을 할 때 사용 (ex 취미선택)
• 선택리스트 생성
• 리스트 목록작성
• 서버로 전송하는 효과를 주는 버튼(ex 로딩바 게이지)
• 버튼을 누르면, 작성한 내용이 모두 지워짐
• 파일을 찾을 수 있는 창이 뜸
• 장문을 작성할 수 있는 텍스트 영역을 생성. 스크롤바
  

select / option
-ex) 여러개의 state를 하나로 묶어서 사용할때 키값으로 불러올 수 있다
const a,setA = useState({b:'',c'',d''})
value={a[id]}