HTML 폼의 입력 필드에 배경색을 지정하려면 CSS의 background-color 속성을 사용하면 됩니다. 이 속성은 텍스트 입력창뿐만 아니라 다양한 폼 요소에 적용할 수 있어, 사용자 인터페이스를 더욱 돋보이게 만들어 줍니다.
background-color 속성이란?
background-color는 요소의 배경색을 설정하는 CSS 속성입니다. 색상 이름(예: gray, red), HEX 코드(예: #808080), RGB 값(예: rgb(128,128,128)) 등 다양한 방식으로 색상을 지정할 수 있습니다.
예제 코드
아래 예제는 input[type=text] 선택자를 사용하여 모든 텍스트 입력 필드에 회색 배경을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 10px 15px;
margin: 5px 0;
box-sizing: border-box;
background-color: gray;
}
</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>코드 설명
- width: 100% — 입력 필드가 부모 요소의 전체 너비를 차지하도록 설정합니다.
- padding: 10px 15px — 입력 내용과 테두리 사이에 여백을 추가해 가독성을 높입니다.
- box-sizing: border-box — 패딩과 테두리를 포함한 전체 크기를 유지하여 레이아웃이 깨지지 않도록 합니다.
- background-color: gray — 입력 필드의 배경색을 회색으로 지정합니다.
다양한 색상 지정 방법
배경색은 여러 형식으로 지정할 수 있습니다.
/* 색상 이름 사용 */ background-color: lightblue; /* HEX 코드 사용 */ background-color: #f0f8ff; /* RGB 값 사용 */ background-color: rgb(240, 248, 255); /* RGBA (투명도 포함) */ background-color: rgba(240, 248, 255, 0.8);
마무리
이처럼 background-color 속성 하나만으로도 폼 입력 필드의 시각적 완성도를 크게 높일 수 있습니다. 필요에 따라 :focus 가상 클래스와 함께 사용하면 입력 중인 필드의 배경색을 변경하는 등 더욱 세련된 사용자 경험을 제공할 수 있습니다.