[TIL] 2022.01.26

Minsu Han·2022년 1월 26일
0

TODAY I LEARNED

목록 보기
23/46
post-thumbnail

오늘 한 일

  • 웹 프론트엔드 공부
    Omnifood Project - Setup and Desktop Version

배운 것

  • 이미지에 CSS3에서 제공하는 여러 필터 효과 입히기 (filter 속성)
filter: brightness(50%); /* contrast(), grayscale() 등 여러 가지 있음 */
  • 링크 텍스트 컬러와 같은 컬러의 밑줄 생성하기 (밑줄은 border 사용) - currentColor
    hover 시 밑줄 숨기기 - 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;
}
}
  • class를 reusable하게 도와주는 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);
}

실습 결과 캡쳐


내일 할 일

  • 웹 프론트엔드 공부
    Omnifood Project - Setup and Desktop Version
profile
기록하기

0개의 댓글