HTML 폼에서 사용되는 input 요소의 버튼 타입은 크게 두 가지로 나눌 수 있습니다. 하나는 폼 데이터를 전송하는 제출(submit) 버튼, 다른 하나는 입력 내용을 초기화하는 재설정(reset) 버튼입니다.
CSS를 활용하면 웹 페이지에 있는 모든 버튼의 배경색, 테두리, 여백, 글자색 등을 자유롭게 디자인할 수 있습니다. 특히 속성 선택자(attribute selector)를 사용하면 버튼의 type 값에 따라 각각 다른 스타일을 적용할 수 있습니다.
기본 문법
아래와 같이 대괄호 안에 원하는 속성과 값을 지정하면 해당 조건에 맞는 요소만 선택됩니다.
input[type = submit], input[type = reset] {
/* 공통 스타일 적용 */
}예제 코드
다음 예제는 제출 버튼과 재설정 버튼에 주황색 배경과 흰색 글자를 적용한 코드입니다. 코드를 직접 실행해 결과를 확인해 보세요.
Example
<!DOCTYPE html>
<html>
<head>
<style>
input[type = submit], input[type = reset] {
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">Subject</label>
<input type = "text" id = "subject" name = "sub"><br><br>
<label for = "student">Student</label>
<input type = "text" id = "student" name = "stu"><br>
<input type = "reset" value = "Reset">
<input type = "submit" value = "Submit">
</form>
</body>
</html>주요 CSS 속성 설명
- background-color: 버튼의 배경색을 지정합니다. 예제에서는 주황색(orange)을 사용했습니다.
- border: none: 기본으로 적용되는 버튼 테두리를 제거해 더 깔끔한 디자인을 만듭니다.
- color: 버튼 안에 표시되는 글자 색상을 설정합니다.
- padding: 버튼 내부 여백으로, 값을 키우면 버튼 크기가 커집니다.
- margin: 버튼 바깥쪽 여백으로, 요소 간의 간격을 조절합니다.
- cursor: pointer: 마우스를 올렸을 때 커서가 손가락 모양으로 바뀌어 클릭 가능한 요소임을 직관적으로 알려줍니다.
이처럼 속성 선택자를 활용하면 별도의 클래스나 ID 없이도 버튼 종류별로 일관된 스타일을 손쉽게 적용할 수 있습니다. 호버(hover) 효과나 그림자(box-shadow), 둥근 모서리(border-radius) 등을 추가하면 더욱 세련된 버튼을 만들 수 있습니다.