CSS로 입력 필드 테두리 설정하기
HTML 폼의 입력 필드(input)에 테두리를 추가하려면 CSS의 border 속성을 사용하면 됩니다. 이 속성을 활용하면 테두리의 두께, 스타일, 색상을 자유롭게 지정할 수 있어 폼 디자인을 더욱 세련되게 꾸밀 수 있습니다.
아래 예제 코드를 실행하면 텍스트 입력 필드에 주황색 테두리가 적용되는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
input[type = text] {
width: 100%;
padding: 10px 15px;
margin: 5px 0;
box-sizing: border-box;
border: 3px inset orange;
}
</style>
</head>
<body>
<p>아래 양식을 작성해 주세요.</p>
<form>
<label for = "subject">과목</label>
<input type = "text" id = "subject" name = "sub">
<label for = "student">학생</label>
<input type = "text" id = "student" name = "stu">
</form>
</body>
</html>코드 설명
위 예제에서 사용된 주요 스타일 속성은 다음과 같습니다.
- border: 3px inset orange; — 테두리의 두께(3px), 스타일(inset), 색상(orange)을 한 번에 지정합니다.
inset스타일은 안쪽으로 파인 듯한 입체적인 효과를 줍니다. - width: 100%; — 입력 필드가 부모 요소의 전체 너비를 차지하도록 설정합니다.
- padding: 10px 15px; — 입력 필드 내부 여백을 지정하여 텍스트와 테두리 사이에 적절한 간격을 만듭니다.
- box-sizing: border-box; — 패딩과 테두리를 포함한 전체 크기가 width 값 안에서 유지되도록 하여 레이아웃이 깨지는 것을 방지합니다.
border 스타일에는 inset 외에도 solid(실선), dashed(파선), dotted(점선), double(이중선), groove, ridge 등 다양한 옵션이 있으니, 원하는 디자인에 맞게 조합해 사용해 보세요.