반응형 input9 HTML 실습 — 예약 정보 폼 만들기 완전 정리 Web Development · HTML PracticeHTML 실습 —예약 정보 폼 만들기지금까지 배운 폼 요소를 한 번에 — 손코딩 연습시작 실습 코드지금까지 배운 폼 요소들을 종합한 실습. 이름·휴대폰·이메일 입력 + 예약 버튼. 예약 정보 이 름 type="text"> 휴대폰 type="number"> 이메일 type="mail"> type="button" value="예약하기"> 실제 출력 결과예약 정보이 름 휴대폰 이메일 1 원본 코드의 개선 포인트원본 코드는 동작은 하지만 몇 가지 개선이 필요하다.원본개선안이유type="number" (휴대폰)type="tel"전화번호는 tel이 적합 — 모바일 전용 키보드, 하이픈도 OKtype="mail"type="email""mail"은 잘못된.. 2026. 5. 3. HTML input type · CSS 속성 셀렉터 완전 정리 — email · tel · url Web Development · HTML + CSSHTML input type 시리즈 +CSS 속성 셀렉터 완전 정리email · tel · url 자동 검증 + input[type="submit"] 셀렉터로 버튼만 스타일링시작 오늘 분석할 코드회원가입 폼에 email, tel, url 입력 타입을 활용하고, CSS의 속성 셀렉터로 submit 버튼만 골라 디자인하는 코드. type="email" id="mail"> type="tel" id="phone"> type="url" id="homep">1 input의 새로운 type — email · tel · urlHTML5에서 추가된 type들은 모바일 키보드 자동 전환 + 형식 검증을 동시에 제공한다.type모바일 키보드자동 검증email@ 강조 키.. 2026. 5. 2. HTML 날짜 입력 — input type=date 완전 정리 Web Development · HTML FormHTML 날짜 입력 —input type="date" 완전 정리예약·조회·생일 폼의 표준 · time, week, month까지시작 오늘 분석할 코드예약 시스템에서 "시작 날짜 ~ 종료 날짜"를 받는 가장 단순한 코드. 한 줄짜리 HTML이지만 브라우저가 완전한 캘린더 UI를 자동으로 만들어준다. 조회기간 선택 type="date" id="start"> type="date" id="end"> 실제 출력 결과조회기간 선택 용어 용어 정리type=date날짜만 선택 (yyyy-mm-dd)type=time시간만 선택 (hh:mm)type=datetime-local날짜 + 시간type=month월 단위type=week주 단위캘린더 피커브라우저 자동 제공 UI1.. 2026. 5. 2. HTML 회원가입 폼 — input email · password · minlength 완전 정리 Web Development · HTML Sign-up FormHTML 회원가입 폼 —email · password · minlength 완전 정리아이디·이메일·비밀번호 + 4~15자리 입력 검증시작 오늘 분석할 코드전형적인 회원가입 폼. 아이디(4~15자리), 이메일, 비밀번호, 비밀번호 확인 — 4단계로 구성된다. 각 input의 type과 길이 제한을 어떻게 지정하는지가 핵심. 아이디: type="text" id="user_id" size="10" minlength="4" maxlength="15"> style="color:red;"> 4~15자리 이내의 영문과 숫자 이메일: type="email" id="user_email"> 비밀번호: type="password" id="user_pwd.. 2026. 5. 2. 이전 1 2 3 다음 반응형