actions 화면 구성 전 모습
코드
.actions {
display: flex;
justify-content: space-around;
padding: var(--padding) 0;
}
.actions button {
display: flex;
flex-direction: column;
font-size: var(--font-small);
background-color: var(--white-color);
color: var(--grey-dark-color);
}
.actions button i {
margin: 0 auto;
margin-bottom: calc(var(--padding)/2);
font-size: 20px;
}
.actions button i.active {
color:var(--blue-color);
}구현된 화면
공부
<css>창
calc()함수를 통해 값을 나눠줄 수 있다.
margin-bottom: calc(var(--padding) / 2);
button을 눌렀을 때 색을 입혀주기 위한 코드 .active
.actions button i.active {
color: var(--blue-color);
}<html>창
html에서도 active를 넣어야 따로 적용가능하다.
<div class="actions">
<li>
<button><i class="active fas fa-thumbs-up"></i><span>4.7천</span></button>
</li>
</div>
728x90
반응형
