반응형
공통적으로 적용되는 것을
class 태그로 모으기
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
margin: 20px;
}
.btn {
padding: 5px 10px;
border-radius: 5px;
}
.teal {
background-color: teal;
}
.tomato {
background-color: tomato;
color: white;
}
</style>
</head>
<body>
<span class="btn teal">hello</span>
<span class="btn tomato"> hello</span>
<span class="btn teal">hello</span>
<span class="btn tomato">hello</span>
<span class="btn teal">hello</span>
<span class="btn tomato">hello</span>
<span class="btn teal">hello</span>
</body>
</html>
결과
오 버튼같아..!
반응형
'2. CSS' 카테고리의 다른 글
| CSS flex box(플렉스 박스)의 특징1 (0) | 2024.11.19 |
|---|---|
| CSS inline-block 태그 사용하기 (0) | 2024.11.19 |
| CSS Class(클래스) 적용하기 (0) | 2024.11.18 |
| CSS inline의 margin(마진)은 좌우로만 가질 수 있다. (0) | 2024.11.18 |
| CSS Border 의 성질 (0) | 2024.11.18 |