3일 차 학원 가는 길인데 비 오는 날에 출근철을 타니 사우나를 다녀온 기분이랄까....
비 오는 날 출근철 타시는 분들은 같은 생각을 하시는 분들이 있을 것이다.....
살... 려... 줘.....ㅠ
지난번에 이어 input에 관한 속성을 배우는 것으로 시작하였다.
input속성
*1) placeholder: 필드에 힌트표시
한글자라도 치면 힌트 사라짐.
다 지우면 다시 힌트 나타남.
(value와 다름)
password에서도 글씨로 나옴
*2) autofocus: 자동으로 커서 표시
같은 문서에 중복으로 있는 경우 첫 번째 요소에만 적용된다.
3) readonly: 해당 필드를 읽기 전용으로 표시
4) disabled: 해당 필드를 비활성화
5) required: 해당 필드를 빈칸불가 </form>
* form태그 안에서 submit 버튼 눌렀을 때만 동작
6) maxlength: 단위-정수
해당 필드가 가질 수 있는 최대 글자 수
7) minlength: 단위-정수
해당 필드가 가질 수 있는 최소 글자 수
* form 태그 안에서 사용가능
*8) checked: radio, checkbox에서만 사용
※-placeholder :지난 시간에 한번 정리한 개념이라서 한마디로 정의하고 넘어가려고 한다. (무슨 칸인지 알기 쉬움!)
-autofocus: 실행 시 자동으로 autofocus 있는 칸이 커서가 깜빡인다. (여러 개 있으면 제일 위에 있는 속성이 실행된다.)
- readonly: 마우스로 선택 가능한데 , 문자를 바꿀 순 없고 읽기만 가능하다.
- disabled: 비활성화 상태로 만들어 선택도 가능하지가 않다.
- required: 보통 form태그에 submit버튼을 누를 시 확인가능한데 해당칸이 빈칸인 상태면 메시지가 뜬다.
- maxlength: 5를 설정해 놓으면 입력글자를 5개까지만 가능하다.
(-minlength는 보통 form태그서 가능하다 - 최소 글자설정하는 것)
- checked: 맨 처음 실행 시 check 돼있는 상태를 말한다.
select태그
select: 여러 개의 옵션을 리스트처럼 나열하고 그중에 선택할 수 있게 표시
부모로만 사용 가능
inline 레벨
option: 자식으로만 사용 가능
1) multiple: select 태그에 적용
리스트를 펼쳐서 여러 개를 선택할 수 있게 해 준다(보이는 것도 여러 개.)
2) selected: option 태그에 적용
checked처럼 해당 요소가 기본으로 표시됨.
3) value: option 태그에 적용
실제값
4) name: select 태그에 적용
정보 넘길 때 사용사용
※그나마 중요하다 싶은 게 selected이다
-selected가 선택돼 있으면 맨 처음에 보이는 란이 selected가 있는 '웹 2'로 보인다.
select결괏값
fieldset태그
fieldset: 구역을 표시해 줌
부모로만 사용 가능
block 레벨
legend: 자식으로만
해당 영역의 제목
※그림과 같이 fieldset 구역을 부모로 사용하여 자식으로 legend 영역으로 묶어서 해당영역의 제목(무엇 적는 칸인지)을 설정한다. 그리고 블록레벨이라 legend테두리 박스가 오른쪽으로 길게 끝까지 연결돼 있는 것을 볼 수 있다.
form태그
form태그: 정보를 전달할 수 있는 태그
*form태그 안에 있는 name과 value를 가지고 있는 요소들의 정보를 넘긴다.
block레벨
정보를 넘길 때는 무조건 submit 버튼 사용
- 속성 -
*1) action: 정보를 보낼 페이지의 경로
*a, img 태그의 경로 잡는 법과 동일
별도의 이동이 없는 경우 #(임시링크) 걸어둔다
*2) method: 정보를 보내는 방식
GET: 기본값, URL을 통해서 정보전달
POST: 숨겨서 전달
3) target: 정보 전달 시 현재탭/새 탭으로 정보 전달 결정
(a 태그때와 동일)
_self, _blank
4) autocomplete: 기록이 있는 경우 리스트 보여줌
on: 기본값, 리스트 보여줌
off: 리스트 안 보여줌
※오늘 처음으로 그럴듯한 박스구조를 갖춘 '상품주문서'를 만들어보았다.
처음 배우는 거라 좀 여러 가지 대입하면서 하느라 시간이 걸렸지만,
나름 다 만들고 나니 뿌듯한 기분이 들었다. --이게 코딩의 맛이 아닌가!! 크....
※보통 form태그 안에서 여러 (input요소)들을 사용할 시 'name'을사용하여 정보를 데이터베이스에 전달할 수 있게끔 해준다.
radio나 checkbox시 label을 이용하여 체크포인트와 글자와 연결시켜 글자를 눌러도 체크되게끔 해줄 수 있다.
'국비교육' 카테고리의 다른 글
| 국비지원 6일차 (0) | 2023.07.24 |
|---|---|
| 국비교육 5일차(text~) (0) | 2023.07.22 |
| 국비교육 4일차(오늘은 css....) (0) | 2023.07.22 |
| 국비교육 2일차 (하늘이뚫렸나..비가) (0) | 2023.07.22 |
| 국비교육 1일차 (Html멀까?) (0) | 2023.07.21 |