HTML 로그인 폼 — input password · label · size · em 완전 정리

 

 

Web Development · HTML Login Form

HTML 로그인 폼 —
input password · label · size 완전 정리

아이디 + 비밀번호 입력의 기본 패턴과 보안 고려사항

시작 오늘 분석할 코드

가장 단순한 로그인 폼. 아이디·비밀번호 입력란과 로그인 버튼만 있다. 짧지만 type="password"의 숨겨진 동작과 size·line-height·em 강조까지 모두 들어 있다.

<style> label { font-size: 14px; line-height: 25px; } label em { color: red; font-weight: 800; } </style> <form> <fieldset> <legend>로그인</legend> <label>아이디: <input type="text" id="user_id" size="10"></label> <label>비밀번호: <input type="password" id="user_pw" size="10"></label> <input type="submit" value="로그인"> </fieldset> </form>

실제 출력 결과

로그인

아이디: 비밀번호:

용어 용어 정리

type=password입력 글자가 점·별로 가려짐

size입력란의 시각적 너비

label입력 라벨 — 안에 input 포함 가능

em의미상 강조 + 자동 기울임

line-height줄 간격 (줄 높이)

type=submit폼 제출용 버튼

---

1 <input type="password"> — 자동 가림 처리

type을 password로 지정하면 입력하는 글자가 자동으로 점(•)이나 별(*)로 가려진다. 어깨너머 보는 사람에게 비밀번호 노출을 막는 기본 보호.

※ 단순 시각적 가림일 뿐, 실제 데이터는 평문으로 전송된다. 암호화는 HTTPS와 서버 단에서 따로 처리해야 함.

※ password type만 쓰면 보안이 끝났다고 착각하면 안 된다. 비밀번호는 반드시:
1) HTTPS로 전송 (TLS 암호화)
2) 서버에서 해시(bcrypt, argon2 등) 처리 후 저장
3) 평문 저장 절대 금지

---

2 input type 7가지 정리

type	특징	모바일 키보드
text	일반 입력 (기본)	일반
password	점·별로 가림	일반 (자동완성 X)
email	@ 체크	이메일 키보드 (@ 강조)
tel	전화번호	숫자 키보드
number	숫자만	숫자 키보드
url	URL 형식	URL 키보드 (.com 등)
search	검색 입력	검색 키보드 (Go 버튼)

---

3 size — 입력란의 시각적 너비

size="10"은 "글자 약 10개가 들어갈 정도의 너비"로 입력란을 보여준다. 단위는 글자 폭이지 픽셀이 아니다.

※ size는 너비이고 maxlength는 입력 가능 글자 수다. 둘은 완전히 별개. size="10"이어도 100자 입력 가능 (스크롤됨).

속성	의미	단위
size="10"	10글자 너비	글자 폭
maxlength="10"	최대 10글자 입력	글자 수
style="width:200px"	200픽셀 너비	픽셀

※ 모던 웹은 size 속성 대신 CSS의 width를 권장. CSS가 더 정밀하고 반응형에 유리. size는 옛 방식에 가깝다.

---

4 label에 input 포함 패턴

이번 코드는 <label>아이디: <input></label>처럼 label 안에 input을 직접 포함시켰다. for+id 매칭 없이도 자동 연결되는 간편 패턴.

label 안에 input (이번)

<label>아이디:
 <input>
</label>

간단함
자동 연결

for + id (분리)

<label for="x">
 아이디:
</label>
<input id="x">

유연함
레이아웃 자유

※ 둘 다 라벨-입력 연결 효과는 동일. 라벨 클릭하면 input에 포커스 가는 것 똑같이 동작.

반응형

---

5 CSS의 line-height 25px

label에 line-height: 25px를 줘서 줄 사이 간격을 만든다. 글자 크기 14px에 줄 높이 25px이면 약 1.78 비율. 넉넉한 간격이라 각 라벨이 분리돼 보인다.

line-height	14px 글자에서 효과
14px (1)	줄과 줄이 딱 붙어 답답
22px (1.6)	적당한 가독성
25px (1.78)	넉넉 (이번 코드)
40px	너무 떨어짐

---

6 em 태그 + CSS 강조 패턴

코드에 label em { color: red; } 스타일이 있는데, 정작 HTML에서는 <em>이 사용되지 않았다. 이는 "라벨에 em을 넣으면 빨간색으로 표시할 준비"를 미리 해둔 것. 향후 <label>아이디: <em>*</em></label>처럼 적으면 빨간 별표가 나타난다.

<label> 비밀번호: <em>*</em> ← 빨간 굵은 별표 (필수 표시) <input type="password"> </label>

CSS에서 자손 셀렉터로 label em이라 적으면 "label 안에 있는 em만" 빨갛게 처리된다. 다른 곳의 em은 영향 없음.

---

7 자주 하는 실수 (보안 포함)

실수	증상	해결
password type만 쓰고 안심	실제 보안은 별개	HTTPS + 서버 해시
autocomplete="on" 비밀번호	자동완성 노출	autocomplete="new-password"
size와 maxlength 혼동	너비/길이 의도와 다름	size=너비, maxlength=글자수
label-input 연결 X	접근성 ↓	안에 포함 또는 for+id
CSS 없이 라벨 연달아	줄이 붙어 답답	line-height 또는 display: block
fieldset 없이 폼 그룹	접근성 그룹 정보 X	관련 입력은 fieldset로

---

핵심 한 줄 요약

type="password"입력 글자 자동 가림 (시각만)

실제 보안HTTPS + 서버 해시 처리 필수

size시각적 너비 (글자 폭)

size ≠ maxlength너비 vs 입력 가능 글자 수

label 안 input간편한 자동 연결 패턴

label em자손 셀렉터로 부분 강조

line-height줄 사이 간격 — 가독성 핵심

CSS width 우선size 대신 모던 표준

Tags

#input #password #label #size #em #HTML #로그인폼 #비밀번호 #line-height #폼 #보안 #웹개발 #티스토리

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

input, password, label, size, em, HTML, 로그인폼, 비밀번호, line-height, 폼, 보안, 웹개발, 티스토리