CSS로 input type 버튼 스타일 지정하기
HTML의 input type="button"은 제출(submit) 버튼이나 초기화(reset) 버튼 등 다양한 용도로 사용할 수 있습니다. CSS를 활용하면 웹 페이지에 있는 모든 버튼의 배경색, 테두리, 여백, 글자색, 마우스 커서 모양 등을 자유롭게 꾸밀 수 있습니다.
아래 예제 코드를 직접 실행해 보면 속성 선택자(input[type=button])를 이용해 버튼 요소만 골라 스타일을 적용하는 방법을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
input[type=button] {
background-color: orange;
border: none;
text-decoration: none;
color: white;
padding: 20px 20px;
margin: 20px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<p>아래 양식을 작성하세요.</p>
<form>
<label for = "subject">과목</label>
<input type = "text" id = "subject" name = "sub"><br><br>
<label for = "student">학생</label>
<input type = "text" id = "student" name = "stu"><br>
<input type = "button" value = "버튼">
</form>
</body>
</html>주요 스타일 속성 설명
- background-color: 버튼의 배경색을 지정합니다. (예제에서는 주황색)
- border: none: 기본 테두리를 제거해 더 깔끔한 디자인을 만듭니다.
- color: 버튼 안 글자의 색상을 흰색으로 설정합니다.
- padding / margin: 버튼 내부 여백과 외부 간격을 조절합니다.
- cursor: pointer: 마우스를 올렸을 때 손가락 모양 커서로 바꿔 클릭 가능함을 알려줍니다.
이처럼 속성 선택자를 사용하면 클래스나 ID를 추가하지 않고도 특정 타입의 입력 요소에 일관된 스타일을 적용할 수 있어, 폼 UI를 효율적으로 관리할 수 있습니다.