CSS 단추 크기
CSS 단추 크기
이 font-size속성을 사용하여 버튼의 글꼴 크기를 변경합니다.
예
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
[전체소스]
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<p>Change the font size of a button with the font-size property:</p>
<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>
</body>
</html>
이 padding속성을 사용하여 버튼의 패딩을 변경합니다.
10px 24px 12px 28px 14px 40px 32px 16px 16px
예
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
[전체소스]
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<p>Change the padding of a button with the padding property:</p>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
<button class="button button3">14px 40px</button>
<button class="button button4">32px 16px</button>
<button class="button button5">16px</button>
</body>
</html>
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1277 | 기타 |
선택과집중
|
2개월 전 | 148 | |
| 1276 | CSS |
선택과집중
|
2개월 전 | 271 | |
| 1275 | CSS |
선택과집중
|
2개월 전 | 271 | |
| 1274 | CSS |
선택과집중
|
3개월 전 | 462 | |
| 1273 | 기타 |
선택과집중
|
4개월 전 | 401 | |
| 1272 | CSS |
선택과집중
|
4개월 전 | 531 | |
| 1271 | CSS |
선택과집중
|
5개월 전 | 579 | |
| 1270 | CSS |
선택과집중
|
5개월 전 | 457 | |
| 1269 | CSS |
선택과집중
|
5개월 전 | 540 | |
| 1268 | CSS | 6개월 전 | 429 | ||
| 1267 | 10개월 전 | 709 | |||
| 1266 | HTML | 10개월 전 | 838 | ||
| 1265 | CSS |
 7reemoon |
1년 전 | 768 | |
| 1264 | 1년 전 | 1259 | |||
| 1263 | HTML |
 piadream |
1년 전 | 793 | |
| 1262 | CSS |
piadream |
1년 전 | 997 | |
| 1261 | CSS |
piadream |
1년 전 | 1011 | |
| 1260 | HTML | 2년 전 | 1491 | ||
| 1259 | 기타 | 2년 전 | 828 | ||
| 1258 | CSS |
 김성래yo |
2년 전 | 1586 | |
| 1257 | HTML |
piadream |
2년 전 | 1372 | |
| 1256 | CSS |
돈도없어개발하기도시러
|
2년 전 | 1275 | |
| 1255 | 2년 전 | 3613 | |||
| 1254 | 2년 전 | 4795 | |||
| 1253 | 2년 전 | 1554 | |||
| 1252 | 레이아웃 |
swallow
|
2년 전 | 1785 | |
| 1251 | 웹접근성 |
두리삼촌v
|
2년 전 | 2059 | |
| 1250 | 레이아웃 |
두리삼촌v
|
2년 전 | 1694 | |
| 1249 | 레이아웃 |
두리삼촌v
|
2년 전 | 3217 | |
| 1248 | 기타 |
돈도없어개발하기도시러
|
2년 전 | 1149 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기