CSS로 버튼 배경색 변경하기
HTML 버튼의 배경색을 변경하려면 CSS의 background-color 속성을 사용하면 됩니다. 이 속성에 원하는 색상 값을 지정하면 버튼의 기본 회색 배경이 지정한 색으로 바뀝니다.
색상 값은 yellow처럼 색상 이름으로 지정할 수도 있고, #FFFF00 같은 HEX 코드나 rgb(255, 255, 0) 형태로도 지정할 수 있습니다.
아래 예제 코드를 실행하면 노란색 배경의 버튼이 만들어지는 것을 직접 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: yellow;
color: black;
text-align: center;
font-size: 13px;
}
</style>
</head>
<body>
<h2>결과</h2>
<p>아래 버튼을 클릭해 결과를 확인하세요:</p>
<button class = "btn">결과</button>
</body>
</html>코드 핵심 요소 살펴보기
- background-color: yellow; — 버튼의 배경색을 노란색으로 지정합니다.
- color: black; — 버튼 안 텍스트의 글자색을 검정으로 설정합니다.
- text-align: center; — 버튼 내부 텍스트를 가운데 정렬합니다.
- font-size: 13px; — 버튼 텍스트의 크기를 13px로 지정합니다.
이처럼 클래스 선택자(.btn)를 활용하면 여러 버튼에 동일한 스타일을 한 번에 적용할 수 있어 유지보수가 편리합니다.