HTML <input> size 속성 – 문자 기준으로 한 줄 텍스트 입력 필드의 너비 지정

정의 및 사용 방법

size 속성은 한 줄 텍스트 입력 필드로 나타내는 <input> 태그의 일부 유형에서, 문자 수를 기준으로 하는 너비를 지정합니다.

만약, size 속성이 지정된 요소에 CSS로 너비를 지정한다면 CSS가 우선적으로 적용됩니다.

기본 예제

HTML

<p>
    <label>
        size 속성 없음
        <input type="text">
    </label>
</p>
<p>
    <label>
        짧은 입력
        <input type="text" size="5">
    </label>
</p>
<p>
    <label>
        긴 입력
        <input type="text" size="50">
    </label>
</p>

`size` 속성이 사용 가능한 한 줄 텍스트 입력 필드

<input> 태그에서 size 속성은 다음의 한 줄 텍스트 입력 필드 유형에 적용할 수 있습니다.

참고하세요!
<input type="number">는 size 속성의 적용 가능한 유형이 아닙니다

값

size 속성의 값은 0보다 큰 정수로 지정합니다.
만약 size 속성이 지정되지 않거나 유효하지 않은 값이 설정된 경우, 대부분의 브라우저에서는 기본값으로 20을 사용합니다.

size 속성으로 지정하는 값은 입력 필드의 문자 수를 기준으로 하는 시각적 너비를 지정합니다. 따라서, 설정된 글자 크기(font-size)에 따라 실제로 표시되는 너비가 달라질 수 있습니다.

이를 예시를 통해 확인해보겠습니다.

다음 예시에서는 글자 크기(font-size)를 각각 10px과 20px로 다르게 설정한 두 개의 입력 필드를 보여줍니다. 동일하게 size="5" 값이 설정되어 있지만, 글자 크기에 따라 입력 필드의 너비가 어떻게 달라지는지를 확인할 수 있습니다.

HTML

<p>
    <label>
        font-size: 10px
        <input type="text" size="5" style="font-size: 10px;">
    </label>
</p>
<p>
    <label>
        font-size: 20px
        <input type="text" size="5" style="font-size: 20px;">
    </label>
</p>

고려할 점

size 속성을 지정할 땐, 다음의 내용을 고려해야 합니다.

CSS 너비 설정이 우선함

만약, size 속성이 지정된 요소에 CSS로 너비를 지정한다면 CSS가 우선적으로 적용됩니다.

size 속성은 CSS가 웹 스타일 언어로 자리잡기 이전부터 사용했던 것으로, HTML로만 스타일을 지정했던 시기에 사용했던 시각적 스타일 도구였습니다. CSS는 더 정밀한 너비와 반응형 웹을 설정할 수 있으므로, size 속성 대신 CSS 사용을 고려할 수 있습니다.

접근성

size 속성은 사용자가 한 줄 입력 필드에 입력하는 너비를 지정합니다. 이때, 사용자가 쉽게 입력할 수 있도록 충분한 너비를 제공하는 것이 중요합니다. 특히, 운동 조절에 어려움이 있는 사용자나 스타일러스, 터치 기반 화면에서 손가락으로 입력하는 정확하지 않은 입력 방식에는 최소 44×44의 CSS 픽셀 크기가 요구됩니다. (자세한 내용은 Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1를 참조하세요.)