filter
속성)filter: brightness(50%); /* contrast(), grayscale() 등 여러 가지 있음 */
currentColor
transparent
.link:link,
.link:visited {
display: inline-block;
color: #e67e22;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
.link:hover,
.link:active {
color: #cf711f;
border-bottom: 1px solid transparent;
}
}
Helper class
생성/활용하기/* HELPER/SETTINGS CLASSES */
.margin-right-sm {
/* !important: highest priority */
margin-right: 1.6rem !important;
}
.margin-bottom-md {
margin-bottom: 4.8rem !important;
}
.center-text {
text-align: center;
}
overflow
: 요소 내의 컨텐트가 너무 커서 요소를 벗어나게 될 때 그것을 어떻게 보여줄지 설정하는 속성
카드 모양의 컨테이너에 마우스를 올릴 때 카드가 위로 살짝 올라오는 애니메이션 구현하기
transform: translateY()
transition
.meal {
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
border-radius: 11px;
overflow: hidden;
transition: all 0.4s;
}
.meal:hover {
transform: translateY(-1.2rem);
box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
}
실습 결과 캡쳐