[TIL] 2022.01.28

오늘 한 일

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

---

배운 것

• 부모 element의 속성을 물려받기 : inherit

.cta-text-box {
  padding: 4.8rem 6.4rem 6.4rem 6.4rem;
  color: #45260a;
}

.cta .heading-secondary {
  /* color: #45260a; */
  color: inherit;
  margin-bottom: 3.2rem;
}

• HTML form, input 태그
  
  
• button, input, a (with href) 등의 요소에 focus 효과 변경하기

*:focus {
  outline: none;	/* 기본적으로 포커스 시 생기는 내부 테두리 */
  box-shadow: 0 0 0 0.8rem rgb(230, 126, 34, 0.5);	/* 대신 바깥쪽에 테두리 표시 */
}

/* .cta 내 요소들에 적용될 focus 효과 */
.cta *:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem rgb(253, 242, 233, 0.5);
}

실습 결과 캡쳐

---

내일 할 일

• 웹 프론트엔드 공부
  Omnifood Project - Responsive Web Design