20240620 THU, HTML
html (HyperText MarkUp Language)
- 웹 문서를 만드는 언어
1시맨틱 태그
1.1 웹 문서 구조를 만듬. 헤더, 사이드바, 푸터 영역,
1.2 태그
- header
- nav (네비게이션)
- main
- section
- footer
- atricle, aside, div 등
- form 태그
2.1 back end 와 연동이 되어서 서버와 통신을 하게 됨.
ex) 로그인 페이지 (form 태그로 만들어짐.)
2.2 속성1
- method
+ 사용자가 입력한 내용을 서버쪽 프로그램으로 어떻게 보낼 것인가를 지정. (전송방법)
+) get 방식
-> 전송 데이터량의 제한이 있음 (256 ~ 4096 byte)
-> 보안에 취약함. 웹 브라우저의 URL 입력부분에 데이터가 노출됨.
+) post 방식
-> 입력한 내용의 길이에 제한이 없음.
-> 사용자가 입력한 데이터가 노출이 되지 않음.
- name
+ 자바스크립트로 폼을 제어할 경우에, 사용되는 폼의 이름을 지정해준다.
- action
+ 입력된 데이터를 전송받아서 처리해줄 서버의 프로그램을 지정해준다.
+ (전송되는 곳은 back end)
- target
+ 현재 윈도우가 아닌 다른 위치에서 열도록 하는것을 설정.
2.3 속성2
- autocomplete
+ 입력 항목에서 입력한 데이터가 자동 완성을 해주는 기능. default 가 on임 !
2.4 항목 구성 태그
- fieldset
+ 하나의 form 안에서, 여러 구역을 나누어 표시하는 경우에 사용. (구역을 나눠벌겟다 !!)
- legend
+ fieldset: 태그로 구분한 영역에 대해서 제목을 붙이는 경우에 사용.
2.5 input 태그 (사용자 입력을 위한 태그)
- type 속성
+ text: 한 줄짜리 텍스트 입력을 할 수 있는 텍스트 박스
+ password: 비밀번호를 입력할 수 있는 필드
+ email: 이메일 주소를 입력할 수 있는 필드
+ tel: 전화번호를 입력할 수 있는 필드
+ checkbox: 2개 이상 선택할 수 있는 체크박스 필드
+ radio: 주어진 여러 항목 중 한 개만 선택할 수 있는 라디오 버튼
+ reset: 입력된 내용을 초기화
+ button: 일반적인 버튼
+ file: 파일을 첨부할 수 있는 버튼
+ hidden: 사용자에게 보이지 않지만, 서버로 넘겨주는 값이 있는 필드.
- type 속성 중에서 checkbox, radio 의 중요한 속성
+ value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정.
이 값은 영문이거나 숫자이어야 하고, 필수임.
+ checked : 기본으로 선택해 놓고 싶은 항목에 대해서 지정.
- radio의 중요한 속성
+ 여러개의 라디오 버튼에서 하나의 버튼만 선택할 수 있게 하려면,
모든 라디오 버튼의 name 값을 똑같이 지정을 하면 됨.2.6 select 태그
- drop down list
- 속성
+ value : 해당 항목을 선택할 때 서버로 전달할 값을 지정 (back end와 연동)
+ selected : 기본적으로 선택해서 보여줄 항목을 지정.
2.7 button 태그
- type 속성
+ submit : form tag 의 입력된 데이터를 서버로 전송. (back end 와 연동)
와 같이 사용.
+ reset : 폼에 입력된 데이터를 초기화.
와 같이 사용
+ button : 버튼 형태만 만들 뿐 자체 기능은 없음.
기능을 구현하려는 경우, javascript 로 구현.
와 같이 사용
button 의 click event 발생을 모니터링 해서, 동작 및 기능을 구현.
onClick 과 같은 event 를 활용. => javascript
