📌테이블 태그(table-layout)
- 셀의 width값을 지정하면 해당 크기에 맞게 화면에 표시된다.
하지만 영문일 경우 여백없이 길게 입력하면 셀의 width값은 무시되고 영문 내용은 한 줄로 길게 표현된다.
- 만약 width값을 고정하여 칸의 넓이를 적용하려면 table-layout을 사용한다. table태그에 직접 적용해야 한다.
[속성값]
- fixed : 칸에 적용한 width값을 고정한다. 한 줄로 영문이 길게 들어가더라도 무시하지 않는다.
- auto : 기본값으로 내용이 띄어쓰기없이 영문이 한 줄로 길게 들어가면 width값을 무시한다.✔️word-break
- table-layout을 적용하면 칸의 넓이가 고정되면서 길게 작성된 영문이 옆 칸을 뚫고 나갈 수 있다.
이때에는 word-break속성을 지정하여 칸에 맞춰 영문이 아래로 내려오도록 할 수 있다.
해당 속성도 table태그에 선언한다.
[속성값]
- break-all : 문자가 칸에 맞춰 아래로 내려온다.
- keep-all : 문자가 칸을 벗어나더라도 유지한다.
✔️vertical-align
- 표안에서 세로 중앙에 위치한 글자들을 top/middle/bottom 위치로 정렬
- 정렬하려면 text-align을 이용한다. vertical-align은 table태그안에서만 사용할 수 있다.
[속성값]
- baseline : 셀의 글자 기준선에 맞춰 글자의 기준선을 맞춘다.
- top : 패딩이 있을 경우 패딩영역을 제외한 칸의 윗쪽에 글자를 맞춘다.
- middel : 기본값으로 칸의 세로 중앙에 글자를 나타낸다.
- bottom : 패딩이 있을 경우 패딩영역을 제외한 칸의 아래쪽에 글자를 맞춘다.
📌form 태그(입력양식 태그)
✔️form
-
여러 입력 양식을 하나로 묶어주는 태그.
로그인, 회원가입, 배송지 입력과 같은 다양한 입력양식들을 묶어서 서버로 보내는 태그이다. -
block속성을 가진다.
[속성]
- name: 폼 양식의 이름을 지정한다.
- action : 입력데이터들의 전달 위치를 지정한다. 보통 서버주소 또는 #(임시경로)를 넣는다.
- method : 입력 데이터를 전달하는 방식.
1. get : 주소표시줄에 사용자가 입력한 내용이 그대로 표시되고,
256~4096byte까지의 데이터만 서버로 전송할 수 있다.
보안에 취약하고 서버 전송속도가 굉장히 빠르다.
보통 광고성 수신문자같은 내용을 보낼때 사용한다.
2. post★ : 대부분의 방식에 사용되며 사용자의 입력을 표준입력으로 전송하여
입력 내용 길이에 제한받지 않고 사용자가 입력한 내용을 주소표시줄에
노출하지 않는다.[기본형]
<form name="폼이름" action="서버주소" method="post" id="아이디값">
입력양식들
</form>
✔️label
- 폼 요소에 레이블(이름표)을 붙일때 사용하는 태그이다. input태그끼리 서로 구분하는 용도로
사용된다. - 폼요소를 서버로 넘길때 어떤 input과 세트인지 알려주는 역할을 한다.
또한 브라우저에서 세트인 input을 구별할때도 사용한다.
이때 for에 붙인 이름과 input에 있는 name속성값이 동일해야한다.
- lable태그는 inline속성이다.
[기본형]
1. <label for="폼요소 이름">
레이블 텍스트(폼요소 이름)
<input type="값" name="폼요소 이름"/>
</label>
2. <label for="폼요소 이름">레이블 텍스트(폼요소 이름)</label>
<input type="값" name="폼요소 이름"/>
📌form 태그(폼의 영역 만들기)
✔️fieldset, legend
- form 양식을 만들때 각 요소들을 그룹으로 묶어주는 fieldset태그와
해당 영역의 이름을 붙여주는 legend태그가 있다.
[기본형]
<fieldset>
<legend>사용자 정보</legend>
</fieldset>
📌input태그
-
input태그는 사용자의 정보를 입력받기 위해 사용하는 태그로 type속성값에 의해 모양과 기능이 결정된다.
-
input태그는 inline속성을 가지며, 박스형태의 type들은 inline-block속성을 가진다.
[기본형]
<input type='기능' name='폼요소의 이름(label과 연결)' id="아이디명"/>
input의 type속성값
✔️1. type='hidden'
: 화면의 폼에서는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할때
함께 전송되는 요소이다.
✔️2. type='text'★
: 가로로 짧은 글을 입력할때 사용하는 입력창. 아이디, 이름, 주소와 같은
내용을 입력받을때 사용한다.
✔️3. type='password'★
: 텍스트필드와 모양은 같지만 사용자가 입력하면 특수문자로 나타난다.
단, 패스워드 필드가 비밀번호 양식이 맞는지 확인해주지 않는다.
단순히 글자를 특수기호로 바꾸는 역할만 한다.
✔️4. type='search'
: 검색 필드를 만들때 사용한다.
검색 키워드를 입력하면 키워드를 지울 수 있도록 x아이콘이 함께 표시된다.
✔️5. type="url"
: 사용자로부터 웹 주소를 입력받을때 사용한다.
✔️6. type="email"★
: 메일 주소를 입력할 경우 email필드를 사용하면 실제 폼 양식이
동작했을 때 이메일 양식에 맞게 작성되었는지 브라우저 자체에서
체크한다.
✔️7. type='tel'★
: 사용자가 입력한 정보를 일반 텍스트가 아닌 전화번호로 인식하며 바로 전화번호를
입력할 수 있도록 숫자 키패드를 보여준다.
✔️8. type="number" min='최솟값' max='최댓값' step='증감값' value='초기값' ★
: 숫자 생성 양식을 만들때 사용한다. min은 최솟값을 말하고 max는
최댓값을 말한다. step은 증가하거나 감소하는 값으로 여기에 쓰인
숫자만큼 증가하거나 감소한다.
✔️9. type='range' min='최솟값' max='최댓값' step='증감값' value='초기값'
: 슬라이드 막대를 움직여 값을 입력하는 창.
✔️10. type='radio' name='폼요소이름' checked
: 라디오버튼은 짧은 항목에 대한 선택이 필요할 때 주로 활용되며 반드시 한 가지 항목만 선택해야 할 때 사용한다.
라디오 필드에서는 name값이 같아야만 같은 그룹으로 인식하여 한가지만 선택하게 만들 수 있다.
✔️ 11. type="checkbox" checked ★
: 체크박스는 여러 항목을 다중선택할때 주로 사용한다.
✔️12. type='color'
: 색상 선택 양식을 만든다.
선택 시 색상 선택 화면이 나타나고 색상을 선택할 수 있다.
✔️13. type='date'★ | type='month' | type='week'
: 생년월일과 같이 년/월/일에 대한 정보를 달력을 통해 선택할 수 있다.
month는 월과 연도를 선택할 수 있고, week은 연도와 주를 선택할 수 있다.
✔️14. type='time' | type='datetime' | type='datetime-local'★
: 시간을 지정할때 사용하는 type이다.
시간만 지정할 경우에는 time을 사용하고 날짜와 시간을 함께 지정할 경우 datetime, datetime-local을 사용한다.
✔️15. type='submit' | type='reset'
: 사용자가 입력폼에 입력한 내용을 서버로 전송할때 type='submit'을 이용할 수 있다.
입력 내용을 초기화할때는 type='reset'을 이용한다.
둘 다 버튼형태로 출력된다. 버튼 이름을 바꾸고 싶을때에는 value속성을 이용한다.
✔️16. type='file' accept='파일형식1, 파일형식2...' multiple ★
: 사용자가 가지고 있는 특정 이미지나 파일들을 첨부할때 사용한다.
만약 사용자가 첨부할 파일의 확장자를 제한하고 싶다면 accept 속성으로 파일을 제한 할 수 있고,
multiple속성을 사용하면 파일을 여러 개 첨부할 수 있다.
