[HTML] Matching a Pattern
안녕하세요 동기 여러분! 오늘은 사용자가 개발자가 정해 놓은 패턴의 입력값을 적도록 하는 방법에 대해 알아봅시다.
Matching a Pattern
신용카드를 적는 칸에 사용자가 문자를 넣으면 에러가 뜨게 하고 ID를 적는 칸에 한글을 넣으면 에러가 나는 그런 경우를 본 적이 있으실 겁니다. 바로 오늘 알아볼 기능 때문인데요, Matching a Pattern을 하기 전에 개발자라면 반드시 알아야 하는 정규 표현식(regex=regular expression)에 아주 간단히 알아봅시다.
정규 표현식(regex=regular expression)
게임을 하던 웹 사이트를 이용하건 개발자들은 방대한 정보들을 수집합니다. 그 엄청난 정보들 중에 특정한 규칙이 들어 있는 친구들을 찾아내려면 상당히 복잡하고 힘이 드는데 이를 쉽게 많들어 주는 기능이라 할 수 있겠습니다. (함정은 정규 표현식도 처음엔 어려움ㅋㅋㅋ)
오늘은 아주 기본적인 부분만 포스팅 해보겠습니다ㅋㅋㅋㅋ
| 부호 | 설명 | 예 | 예시 설명 |
| [ ] | 부호의 세트 | [a-z] | a부터 z까지 |
| { } | 사용될 글자 또는 숫자 갯수 | {3} | 세 글자 또는 세 숫자 |
더욱 자세한 내용을 알아보고 싶으신 분들은
1. 생활코딩 https://opentutorials.org/course/909/5143
2. 잔재미코딩 https://www.fun-coding.org/DS&AL3-4.html
: - 잔재미코딩
프로그래밍 연습(생각만 해보기) 다음 코드를 실행해보고, 이름 정보를 통해 남자인지, 여자인지, 기타인지(남녀 구별 불가)를 확인할 수 있는 방법 생각해보기 import openpyxl # 엑셀파일 열기 work_b
www.fun-coding.org
정규표현식 패턴들 - 생활코딩
본 수업은 zvon의 정규표현식 tutorials를 이용한다. 실제 강의는 동영상을 참고하자. zvon은 아래의 URL을 통해서 접근 할 수 있다. http://zvon.org/comp/r/tut-Regexp.html#Pages~Contents 아래는 인터렉티브하게 정
opentutorials.org
생김새
<!DOCTYPE html>
<html>
<body>
<form action="/ex.html" method="post">
<label for="phonenum">휴대폰 번호를 입력해주세요 (10자리~11자리)</label>
<br>
<input type="text" id="phonenum" name="phonenum" pattern="[0-9]{10,11}" required>
<br>
<input type="submit" value="보내기">
</form>
</body>
</html>
코드 설명
- <form action="/ex.html" method="post"> → post 방식으로 ex.html로 form을 보내자!
- <label for="phonenum">휴대폰 번호를 입력해주세요 (10자리~11자리)</label> → 휴대폰 번호(10자리~11자리)를 입력해 달라고 label을 달아줌
- <br> → 줄 바꿈
- <input type="text" id="phonenum" name="phonenum" pattern="[0-9]{10,11}" required> → input 타입은 문자로, id는 위에 있는 label과 짝을 지어 주기 위해 for의 값과 같게 해줌, name은 식별을 쉽게 하기 위해 phonenum으로 설정, pattern은 사용자에게 0에서 9까지([0-9])의 숫자를 사용하게 하되 10자리나 11자리({10,11})를 입력하도록 설정, required를 달아 이와 같은 입력을 하지 않을 경우 에러가 뜨게 만듦
- <input type="submit" value="보내기"> → 보내기 버튼
실행 화면
문자를 사용한 경우
숫자 아홉 자리를 입력한 경우
오늘의 느낌
갑자기 몸살이 와서 진짜 무서웠다. 타지에서 혼자 아프니까 너무 불안... 혹시 몰라서 COVID-19 테스트를 받고 왔다 ㅠ ㅠ