HTML input type · CSS 속성 셀렉터 완전 정리 — email · tel · url

 

 

Web Development · HTML + CSS

HTML input type 시리즈 +
CSS 속성 셀렉터 완전 정리

email · tel · url 자동 검증 + input[type="submit"] 셀렉터로 버튼만 스타일링

시작 오늘 분석할 코드

회원가입 폼에 email, tel, url 입력 타입을 활용하고, CSS의 속성 셀렉터로 submit 버튼만 골라 디자인하는 코드.

<style> input[type="submit"] { text-align: center; width: 100%; height: 30px; } </style> <input type="email" id="mail"> <input type="tel" id="phone"> <input type="url" id="homep">

1 input의 새로운 type — email · tel · url

HTML5에서 추가된 type들은 모바일 키보드 자동 전환 + 형식 검증을 동시에 제공한다.

type	모바일 키보드	자동 검증
email	@ 강조 키보드	@ 포함 + 도메인 형식
tel	숫자 키패드	없음 (지역마다 형식 다름)
url	.com · / 강조	http(s):// 프로토콜 필요
number	숫자만	min/max
search	Go 버튼	없음 — UI만 다름

※ type="tel"은 형식 검증을 안 한다. 010-1234-5678, +82 10 1234 5678 등 다양해서 표준화 어려움. 검증이 필요하면 pattern 속성과 정규표현식 사용.

---

2 CSS 속성 셀렉터 — input[type="submit"]

CSS의 [속성="값"]은 해당 속성을 가진 요소만 선택하는 강력한 셀렉터다. input[type="submit"]은 "type 속성이 submit인 input"만 골라 스타일을 준다.

input { ... } → 모든 input input[type="submit"] { ... } → submit 버튼만 input[type="text"] { ... } → 일반 텍스트만 input[type="email"] { ... } → 이메일 입력만 input[required] { ... } → required 속성 가진 것만 input[name^="user"] { ... } → name이 user로 시작하는 것

패턴	의미
[attr]	속성 존재만
[attr="값"]	정확히 일치
[attr^="값"]	~로 시작
[attr$="값"]	~로 끝
[attr*="값"]	~ 포함

---

3 CSS의 float — 옛 레이아웃 방식

이번 코드의 label { float: left; }는 라벨을 왼쪽으로 띄워 input과 한 줄에 나란히 배치하는 옛 패턴.

※ 모던 웹은 flexbox·grid가 표준. float은 옛 코드를 이해할 때만 알아두면 된다.

---

4 자주 하는 실수

실수	증상	해결
모든 입력에 type="text"	모바일 키보드 일반·검증 X	적절한 type 사용
속성 셀렉터에 따옴표 누락	일부 브라우저 인식 X	[type="x"] 따옴표
tel 검증 기대	아무 형식이나 통과	pattern 속성 추가
url에 example.com만 입력	http:// 없어 검증 실패	http(s):// 필수임을 안내

---

반응형

핵심 한 줄 요약

type="email"@ 형식 자동 검증

type="tel"모바일 숫자 키패드 (검증 X)

type="url"http(s):// 프로토콜 검증

[type="submit"]CSS 속성 셀렉터 — 골라 스타일

^= $= *=시작·끝·포함 매칭

float: left옛 레이아웃 — 모던은 flex/grid

Tags

#input #email #tel #url #type #속성셀렉터 #HTML #CSS #회원가입 #폼 #float #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

input, email, tel, url, type, 속성셀렉터, HTML, CSS, 회원가입, 폼, float, 웹개발, 티스토리