개발하자

모달(Modal)은 새창을 띄우지 않고 기존의 브라우저에서 레이어가 하나 생기 듯 새로운 창이 보이는 것을 말한다. 기존의 페이지와 부모- 자식 관계이며 새창 제어 옵셩에는 전혀 영향을 받지 않는다. 목적 프로모션을 진행, 서비스에 대한 공지, 안내문 등 새로운 창을 통해 기존의 브라우저에 영향을 줘야할 때 실제 프로젝트에 사용한 것은 모달창이 뜨면 게시판 검색 버튼을 통해 ajax로 데이터를 불러와 데이터가 표출되며, 게시글 클릭 시 원하는 값을 선택할 수 있도록 구현하였다. 여기서는 간단하게 버튼을 클릭하면 모달창이 뜨며, 모달의 내용에는 기본 게시판이 보여지도록 구현하였다. 1. STYLE 2. HTML 모달창 버튼 × 모달창 게시판 검색항목 모달이름 모달분류 검색어 입력 검색 번호 모달이름 모달설..

INPUT 속성 type 속성의 기본값은 "text" input 요소의 필수 속성은 아니지만 항상 명시하는 것이 좋음 INPUT 속성 값 모음 속성값 설명 button 버튼 checkbox 체크박 color 색 선택 (color picker) date 날짜 선택(year, month, day) datetime-local 날짜와 시간 선택(year, month, day, hour, minute) month 년도 월 선택(year, month) time 시간 선택(hour, minute) week 일주일 선택(year, week) email 이메일 file 파일첨부 hidden 숨겨진 입력 필드 image 이미지 number 숫자 password 비밀번호 radio 라디오 버튼(선택 버튼) range 슬라이..

input pattern 정규식 웹 개발을 하다보면 정규식(Regular Expression)을 자주 사용하게된다. 보통 자바스크립트를 사용하거나 서버 사이드 스크립트를 이용해 처리를 했었는데 html5 이후 input 태그의 pattern 속성에 정규표현식을 넣으면서 유효성 검사를 위한 입력 값 제한을 비교적 간단하게 구현할 수 있다. 보안과 안전한 입력 값 컨트롤이 필요하다면 서버 사이트 스크립트에서 처리하는 것이 좋지만 pattern은 간단하게 처리가 가능하다. * pattern 속성이 제대로 동작하는 input 요소의 type 속성값 : data, email, password, search, tel, text, url 속성값 문법 설명 정규 표현식 요소의 값을 검사할 때 사용하는 정규 표현식 in..

생년월일 입력하면 자동으로 만 나이 계산 이용자가 생년월일만 입력하면 만나이가 자동으로 입력되도록 구현해보자 ▼ 만 나이 구하는 계산 ▼ 1. 올해년도 - 태어난년도 = 나이 2. 나이 - 1 = 만 나이 3. 생일이 지나면 만 나이 + 1 1. HTML INPUT ··· 생략 ··· *생년월일 만 세 ··· 생략 ··· 신청 2. SCRIPT 생년월일을 입력하면 올해년도와 작성한 년도를 빼고, 올해가 생년월일보다 크면 나이에서 1을 더한다 (생년월일이 오늘날짜를 지났다는것을 의미) 그리고 나이에서 1을 빼준다 (만 나이) 이렇게 구현하면 생년월일만 넣어도 자동으로 만나이계산 3. TIP 나이 제한 알림창 공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다. 고쳐야하는 부분있다면 댓글 남겨주시면 수정하..