HTML size 속성 완벽 가이드 – select·input에서 크기 지정하기

HTML의 size 속성은 <select> 요소에서는 화면에 동시에 보이는 옵션(option)의 개수를, <input> 요소에서는 입력 필드에 표시되는 문자 수를 지정할 때 사용합니다. 이 속성을 활용하면 드롭다운 목록을 여러 항목이 한 번에 보이는 리스트 형태로 바꿀 수 있어 사용자 경험을 높일 수 있습니다.

문법(Syntax)

size 속성의 기본 작성 형식은 다음과 같습니다.

<tagname size="number"></tagname>

속성값에는 양의 정수를 입력하며, <select> 요소에 적용하면 해당 숫자만큼의 옵션이 목록에 동시에 노출됩니다.

예제(Example)

아래 예제는 size 속성을 <select> 요소에 적용하여, 다섯 개의 과목 중 두 개가 화면에 동시에 표시되도록 만든 코드입니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML size Demo</h1>
<p>Select your favourite subject:</p>
<select size="2">
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
<option value="German lang">German Language</option>
<option value="Economics">Economics</option>
</select>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 일반적인 드롭다운이 아닌, 두 줄 높이의 선택 목록이 나타나며 스크롤로 나머지 과목을 확인할 수 있습니다.

HTML size 속성 완벽 가이드 – select·input에서 크기 지정하기

참고 사항

size="1"을 지정하거나 속성을 생략하면 기본 드롭다운 형태로 표시됩니다.
size 값이 전체 옵션 수보다 크면 남는 공간은 빈 영역으로 처리됩니다.
<input type="text">에 사용할 경우 화면에 보이는 글자 폭을 조절하며, 최대 입력 글자 수는 별도의 maxlength 속성으로 제어해야 합니다.