웹퍼블리싱(HTML) / 2

 

 

 

 

<html5에서 새로 추가된 입력 컨트롤들>

 

- input에 새로운 type들 date(날짜),color(색상지정),range(볼륨조절) 

 

- 볼륨조절은 min과 max를 넣어서 최소,최대음량 조절도 할수있다

(value 를 넣어서 현재 볼륨 설정도 가능)

 

- 다만 이것들은 브라우저마다 다르게 표현될수 있기 때문에 일관된 UI를 만들고 싶다면

라이브러리(미리 만들어진 것들)를 쓰는것도 방법 중 하나다

 

- input에 required를 넣으면 필수입력값이 자동으로 뜬다

(입력창에 커서 누르면 입력란을 입력하세요 라던가, 자동으로 전에 입력했던 아이디가 뜬다거나 하는)

 

- input name = age required type="number"하면 나잇값도 넣을수 있는데, min과 max로 입력할수있는 최연소 나이부터 

최대 나이까지 범위를 지정할수도 있다

 

- input name = phone 전화번호 받는 폼이고, 여기에 required placeholder를 넣으면 입력창에 흐릿하게 띄워져서

고객들한테 입력전 가이드라인을 제공한다

 

- 자동입력 끄고싶으면 input >type > autofocus autocapitalize="off" 

 

 

- datalist 태그로 이런 입력창을 만들수있다

datalist 밑에 option을 넣어서 저 선택지들을 만들수 있다.

 

 

 

 

<정규식을 이용한 유효성 검사>

 

- 아무리 입력값 가이드를 세워놓는다고 해도 사람들이 이상하게 입력하기 때문에 유효성 검사를 해야함

 

- 유효성 검사라는건 쉽게 그냥 모든 입력값을 가능성으로 두는것

 

010-1234-5678 이런 형태의 전화번호를 입력 받게 하는걸 만들려면
010-[01234556...]-[01234..] 0부터 9까지 모든 가능성이 있는 숫자를 다 넣어줘야함 (=패턴문자라고함)
그러면 너무 비효율적이고 불편하니까 또 줄이는데,
010-[0-9]-[0-9].... 이것도 비효율적이다
그래서 정수형을 나타내는 대체문자를 넣어준다.
010-\d[4] 정수형이 4번 반복된다 라는뜻.
그리고 혹시나 자릿수가 확실히 정해진것이 아니라면,
010=\d[3,4] 이런식으로 3개 아니면 4개 라고 표현해주면 된다.
이렇게 식을 만든것을, 정규식 이라고 한다.
(html,자바,자스 등등 다 쓰인다)

 

- html에서 사용법은 input > pattern 넣고 정규식 입력해주면 된다

ex) pattern="010-\d[4]-\d[4]"

만약 중간이나 마지막 자리에 3자리 넣거나 이러면 제대로 쓰라고 알림란 뜸

 

 

 

---

 

 

<표테이블>

 

 

- tr은 행을 만들고 td는 열을 만든다

 

- thead 테이블의 헤더 부분을 나타내는..div 쓰면 안됨! 그리고 단 하나만 존재할수 있음

 

- table의 body는 tbody

 

- 테이블 선은 table border로 넣으면 됨

 

- 데이터중 대빵 데이터는 th(data head)로 표시

 

- 테이블의 하단인 tfoot

 

- 항상 colspan 옵션값을 지정해줘야한다(가로로 몇칸을 쓸건지)

 

- rowspan은 세로로 쓸수있는 칸 옵션값

 

- thead와 tfoot는 단 하나만 존재할수 있지만 tbody는 여러개 존재 가능

 

- caption 테이블의 제목을 달수있는 태그

 

- colgroup 으로 col(컬럼)을 그룹핑해서 묶을수 있다

 

 

 

---

 

<엔티티>

 

- 문자열로 인식이 안되는걸 문자열로 인식되게 하는 

 

- figure : 이미지 / figure : 이미지 설명 태그

 

- blockquote : 인용구

 

 

 

---

 

 

<Emmet snippets>

https://docs.emmet.io/abbreviations/syntax/

Abbreviations Syntax

그..태그 한방에 쓸때 그게 어떤걸 의미하는지 알수있는...들가서 보면 몬말인지 알거임...