HTML input 태그 size 속성 – 입력 필드 너비 설정 방법

HTML의 <input> 요소에서 size 속성은 입력 필드의 가로 너비를 지정하는 데 사용됩니다. 숫자 값이 클수록 더 넓은 텍스트 상자가 만들어집니다. size 속성은 다음과 같은 input 타입에 적용할 수 있습니다.

text
search
email
password
tel
url

기본 문법

size 속성의 기본 사용 문법은 다음과 같습니다.

<input size="size_num">

여기서 size_num은 설정하려는 입력 필드의 너비를 나타내는 숫자 값입니다. 값을 지정하지 않으면 기본값인 20이 적용됩니다. 참고로 size 속성은 문자 수를 기준으로 하며, 픽셀 단위의 정확한 너비 제어가 필요하다면 CSS의 width 속성을 사용하는 것이 좋습니다.

예제 코드

이제 <input> 요소에 size 속성을 실제로 적용해 보겠습니다. 아래는 회원가입 폼 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h2>회원가입</h2>
<form action="" method="get">
   아이디 - <input type="text" name="id" placeholder="아이디를 입력하세요..." size = "25" required><br>
   비밀번호 - <input type="password" name="pwd" placeholder="비밀번호를 입력하세요..." required><br>
   생년월일 - <input type="date" name="dob" placeholder="생년월일을 입력하세요..."><br>
   전화번호 - <input type="tel" name="tel" placeholder="휴대폰 번호를 입력하세요..." required><br>
   이메일 - <input type="email" name="email" placeholder="이메일을 입력하세요..." size = "35"><br><br>
   <button type="submit" value="Submit">제출</button>
</form>
</body>
</html>

실행 결과

HTML input 태그 size 속성 – 입력 필드 너비 설정 방법

위 예제에서는 여러 개의 입력 필드와 제출 버튼으로 구성된 폼을 만들었습니다.

<form action="" method="get">
   아이디 - <input type="text" name="id" placeholder="아이디를 입력하세요..." size = "25" required><br>
   비밀번호 - <input type="password" name="pwd" placeholder="비밀번호를 입력하세요..." required><br>
   생년월일 - <input type="date" name="dob" placeholder="생년월일을 입력하세요..."><br>
   전화번호 - <input type="tel" name="tel" placeholder="휴대폰 번호를 입력하세요..." required><br>
   이메일 - <input type="email" name="email" placeholder="이메일을 입력하세요..." size = "35"><br><br>
   <button type="submit" value="Submit">제출</button>
</form>

size 속성 활용 포인트

만약 더 넓은 텍스트 상자, 즉 가로 폭이 큰 입력 필드가 필요하다면 size 속성에 더 큰 숫자 값을 지정하면 됩니다. 위 예제에서는 아이디 입력 필드에 size="25", 이메일 입력 필드에 size="35"를 적용하여 각각 다른 너비를 부여했습니다.

<input type="text" name="id" placeholder="아이디를 입력하세요..." size = "25" required>

이처럼 size 속성을 활용하면 별도의 CSS 없이도 HTML만으로 입력 필드의 너비를 간편하게 조절할 수 있습니다. 다만 반응형 웹 디자인을 고려한다면 CSS를 통한 너비 제어를 함께 사용하는 것이 바람직합니다.