HTML에서 <input> 요소의 문자 너비를 조절하려면 size 속성을 사용하면 됩니다. size 속성은 입력 필드에 표시되는 문자 수를 기준으로 너비를 지정하며, 값으로 숫자를 입력합니다.
예를 들어 size="10"으로 설정하면 약 10자 분량의 너비로 입력 상자가 표시됩니다. 참고로 size는 화면에 보이는 너비만 결정할 뿐, 실제로 입력할 수 있는 글자 수를 제한하지 않습니다. 입력 가능한 최대 글자 수를 제한하려면 maxlength 속성을 함께 사용해야 합니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<form action = "">
Subject: <input type = "text" name="sub" maxlength = "10" size = "10"><br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>
코드 설명
size = "10": 입력 필드의 가시적 너비를 10자 크기로 지정합니다.maxlength = "10": 사용자가 최대 10자까지만 입력할 수 있도록 제한합니다.type = "text": 한 줄 텍스트 입력 필드를 생성합니다.
출력 결과
참고 사항
size 속성은 픽셀이 아닌 '문자 개수' 단위로 동작하기 때문에 폰트나 브라우저에 따라 실제 픽셀 너비가 달라질 수 있습니다. 보다 정밀한 너비 제어가 필요하다면 CSS의 width 속성을 사용하는 것이 좋습니다.
<input type="text" style="width: 200px;">
이처럼 간단한 조정에는 size 속성을, 정교한 레이아웃 작업에는 CSS를 활용하면 됩니다.