HTML 폼의 텍스트 입력 필드 안쪽에 여백(공간)을 추가하려면 CSS의 padding 속성을 사용하면 됩니다. 패딩은 요소의 테두리와 내용 사이의 간격을 조절하는 속성으로, 입력 필드에 적용하면 텍스트가 필드 가장자리에 딱 붙지 않고 적절한 간격을 유지하게 되어 가독성과 사용자 경험이 크게 향상됩니다.
padding 속성 활용 방법
아래 예제에서는 input[type = text] 선택자를 사용해 모든 텍스트 타입의 입력 필드에 스타일을 일괄 적용했습니다. 주요 속성들은 다음과 같습니다.
- width: 100% — 입력 필드가 부모 요소의 전체 너비를 차지하도록 설정합니다.
- padding: 10px 15px — 상하 방향으로 10px, 좌우 방향으로 15px의 내부 여백을 추가합니다.
- margin: 5px 0 — 필드 바깥쪽에 상하 5px의 외부 여백을 줍니다.
- box-sizing: border-box — 패딩과 테두리를 포함한 전체 크기가 지정된 너비를 벗어나지 않도록 합니다. 이 속성이 없으면 패딩을 더할 때 필드가 의도보다 넓어질 수 있습니다.
예제 코드
다음 코드를 실행하여 결과를 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
input[type = text] {
width: 100%;
padding: 10px 15px;
margin: 5px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>아래 양식을 작성해 주세요.</p>
<form>
<label for = "subject">Subject</label>
<input type = "text" id = "subject" name = "sub">
<label for = "student">Student</label>
<input type = "text" id = "student" name = "stu">
</form>
</body>
</html>정리
이처럼 padding 속성만으로도 입력 필드 내부에 충분한 여백을 만들 수 있습니다. 특히 box-sizing: border-box를 함께 사용하면 반응형 레이아웃에서도 필드 크기가 일관되게 유지되므로, 실무에서는 두 속성을 함께 사용하는 것이 좋습니다.