on
Web Programming(웹 프로그래밍) chapter3. Table과 Form 복습 내용
Web Programming(웹 프로그래밍) chapter3. Table과 Form 복습 내용
본 게시글은 대학강의를 기반으로 작성한 글입니다.
- HTML Tables
: 행과 열로 이루어진 하나의 set
: table은 HTML에서 하나의 element에 대응된다.
: 많은 종류의 데이터들을 표현하는데 이런 table이 사용된다.
- Tables Basics
: 행은 로 표현, 열은 로 표현
-> 이 parent 가 child (ppt 예제 참고)
: Table의 제목을 표현할 때는 를 사용한다.
-> 별다른 스타일을 선언하지않아도 bold(굵게)가 기본으로 되어있다.
-> 대신 를 사용해야 다른 사용자가 코드를 볼 때 이것이 타이틀이라는 것을 알 수 있다.
(semantic 정보(크롤링할때 많이 사용되는 정보이다.)를 주기 위함)
- span
: 몇개의 컬럼과 로우를 차지할 것인지를 알려주는 것
: colspan, rowspan
- table 안에 table을 사용하는 경우.
- table과 관련된 몇가지 tag들
: -> 표에대한 간단한 설명을 나타내기 위함
: , -> 첫번쨰 컬럼에 뭐가 들어오냐에따라 다른 스타일을 쓰려고할때
즉, 컬럼마다 독자적인 스타일을 적용하고 싶을때 css와 함께 사용된다.
: -> table의 헤더
: -> table의 가장 마지막에 위치하는 것
: -> table의 중간부분에 위치하는것.
- HTML Forms
: 서버와의 상호작용을 위해 사용되는 인터페이스
-> Text, Password 등의 입력을 기록해서 서버에 전송을 한다.
-> 데이터를 담아서 보낼 때 Form이라는 형식으로 보낸다.
- Form Structure
- Form이 서버와 상호작용하는 과정
1. 회원가입을 위한 요청
2. 서버에서는 회원가입을 위한 html문서를 사용자에게 반환
3. 사용자는 자신의 정보를 입력
4. submit을 누르면 form이 전달된다.
5. 서버가 그 요청을 처리하고 데이터베이스에 사용자정보를 추가한다.(처리방식은 php에 따른다.)
- Query(요청) Strings
: 사용자의 입력을 서버로 요청을 보낼 때.
- element
: action과 method의 attribute를 가진다.
: action은 요청을 어떻게 처리할 것인지
: method는 정보를 어떠한 방식으로 전송할 것인지.
-> get과 post의 차이 : get은 title과 where이 url에 담겨서 전송이된다.
post는 url은 보통 헤더에 위치하게되는데 헤더에 위치하는 것이아닌 헤더 다음에 나오는
실제 내용에 저장되어 전송이 되게된다.
-> get : address bar를 한눈에 볼 수 있다.(어떤식으로 전송이 되었는지 확인쉽다.)
브라우저의 캐쉬나 히스토리에 관리되어 나중에 더 쉽게 확인이 가능하다.
bookmark 될 수도 있다.
요청정보가 헤더에 위치하게되고 헤더는 브라우저에따라 길이제한이 있다.
보안문제에 문제가 될 수 있다. url주소에 개인정보 들어있으니 조심해야함.
url에 저장되기때문에 전송형태가 모두 string이 되어야한다.
-> post : body부분에 데이터가 저장된다. (binary형태 데이터도 전송가능하다.)
정보가 유저에게 숨겨진다.
캐쉬,히스토리,북마크에 따로 제출되지않아서 보안성이 높다.
- Form control(Form-Related HTML) elements
: Text Input Controls
-> 입력에 text입력을 받는 몇가지의 예제 코드
text -> 한줄짜리 텍스트의 입력을 받겠다.
textarea -> 여러줄의 텍스트 입력을 받겠다.
password, search, email, tel, url 같은 여러종류의 입력을 받을 수 있다.
: text input 예제
-> 다음에 텍스트값을 넣어놓으면 기본적으로 텍스트가 저장이된다.
placeholder -> 여기에 어떤내용을 입력하세요 이런식으로 힌트를 주는 것
password -> ...이런 형식을 사용해서 다른사람이 볼 수 없도록하는 것.,
search,eamil,url,tel등 (기본 형태가 있고 거기에 맞는 입력인지 체크해준다.)
- Pattern attribute
: 특정한 패턴을 지정해 줄 때
-> 비밀번호 만들때 특수문자 꼭 넣어라 이런식의 패턴을 지정하고 체크해주는 것
- datalist
: 텍스트 입력하는동안 해당알파벳과 매칭되는 단어를 미리 보여주는것.
- Select Lists
: element와 함께 사용이된다.
-> 아무것도 선택하지않았을때 기본적으로 선택되는 것.
-> 사용할 옵션들의 개수가 많을경우 화면에 다 표현하는것이아닌 보여지는 개수조정
-> 옵션들을 그룹화할때, 대륙별로 나라이름 그룹화 등.
- value attribute(select말고 다른 element에서도 사용된다.)
: 해당 옵션을 클릭했을때 어떤 값을 서버로 전송할것인지 알려주는 attribute이다.
: -> first를 선택해도 숫자 1이 전송된다.4
- Radio Buttons
: 여러개의 리스트중 하나의 아이템을 선택할 때 사용한다.(select와 유사하다.)
: 여러개의 아이템중 하나만 선택이 가능하다.
: value attribute를 사용가능하다.
-> 아무것도 선택하지않았을때 기본적으로 선택되는 것.
- Checkboxes
: 여러개의 아이템중 중복선택이 가능하다.
: -> 체크하면 on에 체크했는지가 전송이된다. (별도의 value나 text가 없으면 on/off전송)
- Button Controls
: submit -> form의 입력된 값을 서버에 전송하고자할때 사용하는 버튼
: reset -> form에 입력된 값을 초기화 하는 것.
: button -> 특정 동작을 하는것이아니라 사용자가 원하는 동작을 하게하고자 하는 경우
-> 버튼을 눌렀을때의 동작을 사용자가 지정할 수 있다.(자바스크립트를 사용해서 동작지정)
: image -> 버튼의 이미지를 바꿀 수 있다.
: -> input이아닌 아예 element를 사용하면 이미지,텍스트,스크립트 등을
커스터마이징할 수 있다.
- 숫자와 범위(Number and Range)
: 옛날에는 숫자가 서버로 넘어가면 서버가 그 숫자의 범위를 체크하는 그런 식으로 했었음.
: 요즘에는 서버에서 검증을 하는것이 아닌 클라이언트자체에서 검증하는 식으로 많이한다.
: HTML5자체가 입력된 값을 체크하는 기능이 있다.
- Color
- 날짜와 시간(Date and Time) Control
: 해당 날짜를 년,월,일을 표현하는 방식을 지정할 수 있다.
: date -> 특정 날짜를 입력받을 수 있다.
: time -> 시간을 입력받을 수 있다.
: datetime -> 날짜와 시간을 동시에 입력받을 수 있다.,
: datetime-local -> 시간대를 고려하지않고 날짜와시간을 입력받을 수 있다.
: month -> 월까지만 입력받을 수 있음
: week -> 특정 주를 입력받을 수 있다.
- Web Accessibility
: 사용자가 웹페이지에 표현된 내용들을 볼 수 없는경우 음성재생, 글자크기키우는 등 접근성을
높이는 것을 말한다.
: 글자를 잘 볼 수 없는 경우 -> 음성, 심볼등으로 교체
: 내용을 여러형태(복잡한 형태, 단순한 형태)로 구분
: 마우스 사용불가할 때 키보드로만 입력가능
: 사용자가 웹페이지내에서 navigate나 특정 내용을 찾는것을 도와줌
을 통해 테이블의 제목을 알려주고, th로 컬럼의 제목을 알려주는 등
: label을 잘 사용해서 현재입력이 무엇을 하는것인지를 잘 알려줘야한다.
-> for과 id attribute를 잘 이용해서 두개가 서로같아야지만 label이 해당 input의 label임을 명시
-> 예를 들어, 사용자가 name:[Text box] 에서 for와 id를 통해 name과 텍스트 박스가
서로 연결되어있다고하면 name을 클릭했을 때, 자연스럽게 text box에 커서가 이동한다.
-> 즉, label이 input에 연결되어있다는 의미이다.
* 본 게시물은 부산대학교 권동현 교수님의 강의내용과 자료를 바탕으로 만들어졌습니다.
from http://commencer-y.tistory.com/22 by ccl(A) rewrite - 2021-09-08 15:26:33