HTML DOM 입력 텍스트 size 속성 완벽 가이드

HTML DOM의 Input Text size 속성은 텍스트 입력 필드(input type="text")의 size 속성 값을 가져오거나 설정하는 데 사용됩니다. 이 속성은 입력 필드에 화면에 표시되는 문자 수를 지정하며, 별도로 정의하지 않은 경우 기본값으로 '20'을 반환합니다.

문법(Syntax)

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

size 속성 값 가져오기

inputTextObject.size

size 속성 값 설정하기

inputTextObject.size = number

여기서 number는 입력 필드에 표시할 문자 수를 나타내는 양의 정수입니다.

예제(Example)

다음은 Input Text size 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 입력 필드의 크기가 동적으로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Text size</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Text-size</legend>
<label for="textSelect">Full Name:
<input type="text" id="textSelect" size="10">
</label><br>
<input type="button" onclick="increaseVisibility()" value="Increase Visibility">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputText = document.getElementById("textSelect");
    function increaseVisibility() {
        inputText.size = 30;
        divDisplay.textContent = 'Visibility Increased to '+inputText.size;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

'Increase Visibility' 버튼 클릭 전 — 입력 필드의 size 값이 10으로 설정되어 있어 좁게 표시됩니다.

HTML DOM 입력 텍스트 size 속성 완벽 가이드

'Increase Visibility' 버튼 클릭 후 — JavaScript에 의해 size 값이 30으로 변경되어 입력 필드가 넓어지고, 하단에 변경된 size 값이 표시됩니다.

HTML DOM 입력 텍스트 size 속성 완벽 가이드

핵심 포인트 정리

size 속성은 입력 필드에 보이는 문자의 개수를 결정하며, 입력 가능한 최대 글자 수를 제한하지 않습니다.
최대 입력 글자 수를 제한하려면 maxlength 속성을 함께 사용해야 합니다.
HTML에서 직접 size="값" 형태로 지정하거나, JavaScript를 통해 동적으로 변경할 수 있습니다.
기본값은 20이며, 브라우저마다 폰트 크기에 따라 실제 픽셀 너비는 약간씩 다를 수 있습니다.