CSS로 버튼 패딩 변경하기
버튼의 패딩(안쪽 여백)을 조절하려면 CSS의 padding 속성을 사용하면 됩니다. 패딩은 요소의 테두리와 내용 사이의 공간을 의미하며, 이 값을 조정하면 버튼의 크기와 클릭 영역이 함께 달라집니다.
아래 예제 코드를 직접 실행해 보면서 버튼의 패딩이 어떻게 적용되는지 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: yellow;
color: black;
text-align: center;
font-size: 15px;
padding: 10px;
}
</style>
</head>
<body>
<h2>Result</h2>
<p>Click below for result:</p>
<button class = "button">Result</button>
</body>
</html>
패딩 속성 활용 팁
padding 속성은 네 방향을 한 번에 설정할 수 있으며, 필요에 따라 각 방향을 개별적으로 지정할 수도 있습니다.
- padding-top : 위쪽 여백
- padding-right : 오른쪽 여백
- padding-bottom : 아래쪽 여백
- padding-left : 왼쪽 여백
또한 padding: 10px 20px;처럼 두 개의 값을 사용하면 위아래는 10px, 좌우는 20px로 한 번에 설정됩니다. 버튼 디자인에서 패딩은 가독성과 사용자 경험에 큰 영향을 주므로, 상황에 맞게 적절히 조절하는 것이 좋습니다.