Form 입력 유효성 검사 및 실시간 피드백 구현 가이드
·
Programing
웹사이트나 웹 애플리케이션에서 사용자 입력(Form 입력)을 검증하는 것은 기본이자 필수입니다. 잘못된 데이터가 서버로 전송되는 것을 막고, 사용자 경험(UX)을 향상시키기 위해서는 입력 유효성 검사(Validation)와 함께 실시간 피드백(Real-time Feedback)을 적절히 구현하는 것이 중요합니다.이 글에서는 HTML5 기본 유효성 검사부터 JavaScript를 이용한 커스텀 검사, 실시간 피드백 처리 방법까지 초보자도 이해할 수 있도록 체계적으로 정리합니다.✅ 1. HTML5 기본 유효성 검사HTML5는 몇 가지 내장 속성만으로 간단한 유효성 검사를 수행할 수 있도록 지원합니다.📌 기본 속성required: 필수 입력type="email": 이메일 형식 검사min, max: 숫자, 날짜..
HTML <input> 시간 관련 타입 완전 정복: time, month, week, date, datetime-local
·
Programing/HTML
웹 폼에서 날짜와 시간을 입력받는 경우는 매우 많습니다. HTML5부터는 사용자 경험과 데이터 일관성을 높이기 위해 다양한 날짜/시간 입력 타입이 추가되었으며, 이들 타입은 기본적인 폼 처리뿐 아니라 예약 시스템, 달력 UI, 시간 기록 등 여러 실무 영역에서 핵심 기능으로 활용됩니다.이 글은 의 날짜/시간 관련 타입에 대해 기본 구조 → 고급 예제 → 자바스크립트 활용 → 심화 응용 순으로 설명하여 초보자도 글을 다 읽고 나면 준전문가 수준에 이를 수 있도록 구성했습니다.🕒 1. — 시:분 입력 전용✅ 기본 개념시간(시:분)을 입력받기 위한 입력 필드초 단위는 입력할 수 없음 (HH:mm 포맷)기본적으로 사용자의 로컬 시간대를 따름✅ 기본 사용 예예약 시간:💡 고급 사용 예 1: 최소/최대 시간 ..
🔤 HTML 특수 문자(Entity) 정리 가이드
·
Programing/HTML
HTML에서 , >, &, 공백과 같은 문자는 브라우저에서 특별한 의미를 가지기 때문에, 이를 문자 그대로 출력하려면 HTML 엔터티(Entity) 형식으로 변환해야 합니다. 이 글에서는 HTML에서 사용하는 모든 주요 특수 문자와 그 사용처를 정리하고, 표 형태로 설명 + 사용 예제 코드도 함께 제공합니다.✅ HTML 특수 문자란?HTML에서 문법 요소와 겹치는 기호나 특수한 의미를 가진 문자를 표현할 때 사용하는 코드입니다. 보통 &문자이름; 또는 &#코드; 형태로 사용됩니다.📋 특수 문자 종류 및 설명표현 문자숫자 표현문자 표현설명사용 예시 및 상황&nbsp;&#160;Non-breaking space줄바꿈이나 공백 제거를 방지하는 빈칸문단 정렬, 강제 공백 등&lt;&#60;less than: ..
🌐 메타 태그(meta tag) 종류와 사용법 정리
·
Programing/HTML
HTML 문서의 안에 사용되는 메타 태그(meta tag)는 페이지에 대한 정보를 브라우저나 검색 엔진 등 외부 시스템에 전달하는 역할을 합니다. 이번 글에서는 자주 사용되는 메타 태그들의 종류와 의미, 그리고 적절한 사용법을 예시와 함께 정리합니다.✅ 메타 태그 기본 문법📌 대표적인 메타 태그 종류와 설명1. 문서 인코딩 설정HTML 문서의 문자 인코딩 방식을 설정대부분 UTF-8을 사용하며, 이는 다국어 지원을 의미2. 문서 정보 제공author: 페이지 제작자description: 페이지 요약. 검색엔진에서 요약 문구로 사용됨keywords: 관련 키워드 (요즘은 SEO 영향 미미함)3. 검색 엔진 설정검색 엔진이 이 페이지를 색인(index)하고 링크를 따라가도록 허용noindex, nofol..
html target 옵션
·
Programing/HTML
_blank : 새창 _self : 현재창 _parent : 부모창 메모의 중요성-_- parent가 생각이 안나서 계속 검색한다 ㅠ_ㅠ