[결과 화면]
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>Document</title>
<link href="hw2.css" rel="stylesheet">
</head>
<body>
<div>
<div class="alert-box-green"><p><strong>Well done!</strong> You successfully read this important alert message.</p></div>
<div class="alert-box-blue"><p><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</p></div>
<div class="alert-box-yellow"><p><strong>Warning!</strong> Better check yourself, you're not looking too good.</p></div>
</div>
</body>
</html>
[SCSS]
// mixin, extend 이용
$초록 : #298F07;
$파랑 : #0067A3;
$노랑 : #FFD400;
%btn {
padding: 5px;
margin: 5px;
border: 2px solid black;
border-radius: 10px;
}
@mixin 색깔($버튼색깔, $글씨색깔){
background-color: $버튼색깔;
color: $글씨색깔;
}
.alert-box-green {
@extend %btn;
@include 색깔($초록, #134204);
}
.alert-box-blue {
@extend %btn;
@include 색깔($파랑, #084b71);
}
.alert-box-yellow {
@extend %btn;
@include 색깔($노랑, #584a05);
}// mixin, extend 이용
$초록 : #298F07;
$파랑 : #0067A3;
$노랑 : #FFD400;
%btn {
padding: 5px;
margin: 5px;
border: 2px solid black;
border-radius: 10px;
}
@mixin 색깔($버튼색깔, $글씨색깔){
background-color: $버튼색깔;
color: $글씨색깔;
}
.alert-box-green {
@extend %btn;
@include 색깔($초록, #134204);
}
.alert-box-blue {
@extend %btn;
@include 색깔($파랑, #084b71);
}
.alert-box-yellow {
@extend %btn;
@include 색깔($노랑, #584a05);
}
': ) Web > 웹 스터디' 카테고리의 다른 글
| [HTML, CSS] [이론] transform & animation으로 애니메이션 만들기 (0) | 2023.12.15 |
|---|---|
| [Sass 실습3] Bootstrap을 이용한 컬럼 레이아웃 만들기 (mixin, nesting 문법 이용) (0) | 2023.12.14 |
| [Sass] @mixin 문법 사용 방법 (0) | 2023.12.13 |
| [Sass] @extend 문법 사용 방법 (0) | 2023.12.13 |
| [Sass 실습1] [Nesting 문법] Sass를 이용해 리스트 만들기 (0) | 2023.12.13 |
