본문 바로가기

개발 공부/HTML15

[HTML] input 입력창에서 한글만 입력받는 법 (pattern 속성 활용) 💡 이름, 별명 입력란에 한글만 입력받고 싶다면?회원가입, 설문조사 등에서 이름 입력란을 한글로만 제한하고 싶을 때가 있어요.이럴 때는 input 박스에 pattern 속성을 이용해서한글만 입력 가능하도록 제한할 수 있습니다.🛠️ 한글만 입력받기: 코드 예제와 설명✅ 기본 예제 (pattern 활용) 제출✅ 위 코드에서:pattern="^[가-힣]+$" 👉 한글만 허용 (가~힣 유니코드 범위)+ 👉 하나 이상 입력해야 함title="한글만 입력하세요" 👉 잘못 입력 시 안내 메시지 표시🎯 포인트 설명pattern 속성은 정규식을 사용해서 입력값을 검증해요.^[가-힣]+$:^ → 시작[가-힣] → 한글 범위+ → 하나 이상$ → 끝소문자, 숫자, 영문, 특수문자는 입력해도 submit 시 .. 2025. 5. 16.
[HTML] input 입력창에서 영문 대문자만 입력받는 법 (pattern 속성 활용) 💡 영어 대문자만 입력받는 입력창을 만들고 싶다면?회원가입 시 닉네임을 영어 대문자만 받는다거나, 코드 입력란을 제한할 때input 박스에 영문 대문자만 입력되도록 설정할 수 있습니다.이럴 때는 HTML의 pattern 속성을 활용하면 간단하게 제한이 가능합니다.🛠️ 영문 대문자만 입력 제한: 코드 예제와 설명✅ 기본 예제 (pattern 활용) 제출✅ 위 코드에서:pattern="[A-Z]+" 👉 영문 대문자만 허용 (A부터 Z까지)+ 👉 하나 이상 입력해야 함title="대문자만 입력하세요" 👉 잘못 입력 시 나오는 안내 메시지🎯 포인트 설명pattern 속성은 정규식(Regular Expression)을 사용pattern="[A-Z]+": A부터 Z까지 대문자만 허용소문자, 숫자, .. 2025. 5. 15.
[HTML] input 입력창에서 숫자만 입력받는 법 (type="number" 활용) 💡 숫자만 입력받는 입력창을 만들고 싶다면?전화번호, 나이, 금액 입력란 등에서는문자가 아닌 숫자만 입력받게 제한해야 할 때가 많아요.이럴 때 HTML input 태그의 type="number" 속성을 사용하면 간단하게 숫자만 입력받을 수 있습니다.🛠️ 숫자만 입력받는 입력창: 코드 예제와 설명✅ 기본 예제 (type="number")✅ 위 코드처럼 type="number"를 사용하면스마트폰에서는 숫자 키패드가 자동으로 나오고,영문·특수문자는 입력되지 않습니다.🎯 포인트 설명type="number" 👉 숫자만 입력 가능기본적으로 양수, 음수, 소수점까지 입력 가능문자 입력 시 자동으로 막지는 않지만, submit 시 validation 발생모바일 환경에서는 숫자 키패드 제공 → UX 향상!⚡ 최소.. 2025. 5. 14.
[HTML] input 입력창에 최대 글자수 제한하는 법 (maxlength 속성 활용) 💡 input 박스에 최대 몇 글자까지 입력할 수 있게 제한하고 싶다면?회원가입, 전화번호 입력, 닉네임 입력란 등에서는최대 글자수 제한을 두어야 하는 경우가 많아요.이럴 때는 maxlength 속성을 사용하면 간단하게 최대 입력 가능한 글자수를 설정할 수 있습니다.🛠️ 최대 글자수 제한: 코드 예제와 설명✅ 기본 예제 (maxlength 속성 사용)✅ 위 코드처럼 maxlength="10"을 설정하면 최대 10글자까지만 입력 가능합니다.추가 설정 없이 HTML만으로 바로 적용됩니다.🎯 포인트 설명maxlength="숫자" 👉 입력 가능한 최대 글자 수input, textarea 모두 사용 가능숫자, 문자, 특수기호 포함해서 한 글자 = 1로 계산됨(한글도 글자 단위로 1)⚡ textarea에 적.. 2025. 5. 13.
[HTML] 이미지에 마우스 올리면 설명 텍스트 나타내는 법 (hover + title 활용) 💡 이미지 위에 마우스를 올렸을 때 설명(툴팁) 텍스트가 나오게 하고 싶다면?웹페이지를 만들 때 이미지에 마우스를 올리면 설명 문구(툴팁)가 뜨도록 하고 싶을 때가 많아요.가장 기본적인 방법은 HTML의 title 속성을 사용하는 것이고,CSS의 :hover를 이용해 직접 스타일링된 툴팁을 만들 수도 있습니다.이 글에서는 title 속성 활용법 + CSS로 툴팁 만들기 두 가지 방법을 알려드립니다.🛠️ 방법 1. title 속성 사용하기 (가장 간단한 방법)✅ 장점:HTML만으로 간단하게 적용 가능자동으로 브라우저 기본 스타일의 툴팁이 뜸사용법이 매우 직관적🛠️ 방법 2. CSS로 직접 툴팁 만들기 (커스텀 스타일 적용) 이 이미지는 예시입니다.🎯 포인트 설명position: relative.. 2025. 5. 12.
[HTML] 버튼 클릭 시 팝업창 띄우는 법 (window.open 활용) 💡 버튼을 눌렀을 때 새 창(팝업창)을 띄우고 싶다면?웹페이지에서 버튼을 클릭했을 때 새로운 작은 창(팝업)을 열고 싶을 때가 있어요.예를 들어:이용약관 보기미리보기 창작은 알림창 등이럴 때는 JavaScript의 window.open() 함수를 사용하면 쉽게 팝업창을 띄울 수 있습니다.🛠️ 버튼 클릭 시 팝업창 띄우기: 코드 예제와 설명✅ 기본 예제 (새 창 열기)팝업 열기🎯 포인트 설명첫 번째 인자: 열고 싶은 URL두 번째 인자: 창 이름 ('_blank'도 가능)세 번째 인자: 옵션 (width, height, top, left 등 크기와 위치 설정)⚡ 다양한 옵션 설정 예시'width=600,height=500,top=100,left=200,resizable=yes,scrollbars=ye.. 2025. 5. 9.
반응형