HTML 버튼의 너비를 조절하고 싶다면 CSS의 width 속성을 사용하면 됩니다. 픽셀(px), 퍼센트(%) 등 다양한 단위로 값을 지정할 수 있으며, 이를 통해 버튼의 크기를 자유롭게 디자인할 수 있습니다.
예제
아래 예제 코드를 실행하면 너비가 120px로 고정된 버튼이 화면에 나타납니다. 배경색, 글자 정렬, 패딩, 테두리 등 다른 스타일 속성도 함께 적용되어 완성도 높은 버튼을 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: yellow;
color: black;
width: 120px;
text-align: center;
font-size: 15px;
padding: 20px;
border-radius: 15px;
border: 3px dashed blue;
}
</style>
</head>
<body>
<h2>결과</h2>
<p>아래 버튼을 클릭해 결과를 확인해 보세요:</p>
<button class = "btn">Result</button>
</body>
</html>주요 속성 설명
- width: 120px; — 버튼의 가로 너비를 120픽셀로 고정합니다.
- text-align: center; — 버튼 안의 텍스트를 가운데 정렬합니다.
- padding: 20px; — 텍스트와 테두리 사이의 여백을 설정합니다.
- border-radius: 15px; — 버튼 모서리를 둥글게 처리합니다.
- border: 3px dashed blue; — 파란색 점선 테두리를 추가합니다.
이처럼 width 속성 하나만으로도 버튼의 크기를 손쉽게 제어할 수 있으며, 반응형 웹을 위해서는 width: 50%;처럼 퍼센트 값을 활용하는 것도 좋은 방법입니다.