[TIL] 2022.01.21

오늘 한 일

• 웹 프론트엔드 공부
  Components and Layout Patterns 후반부

---

배운 것

• CSS를 활용하여 Accordion component (접었다 폈다 할 수 있는 컴포넌트), Carousel component (슬라이더 컴포넌트), Table component 만들기
• Target an element if it has more than one class applied: MDN docs
• absolute positioning에서 %를 사용하여 자식 element를 부모 element의 왼쪽 모서리 정중앙으로 이동시키는 방법

      .parent {
        ...
        position: relative;
      }
      
      .child--left {
        position: absolute;
        
        /* In relation to PARENT ELEMENT */
        /* 아래와 같이 left, top을 지정하면
        자식 element가 부모 element의 왼쪽 모서리 중간을 시작점으로 하여 표시된다 */
        left: 0;
        top: 50%;
        /* In relation to ELEMENT ITSELF */
        /* 위 상태에서 자식 element를 그 크기의 50% 만큼 왼쪽 위로 이동시키면
        부모 element의 왼쪽 모서리 정중앙에 위치하게 된다 */
        transform: translate(-50%, -50%);
      }

실습 결과 캡쳐

---

내일 할 일

• 웹 프론트엔드 공부
  Components and Layout Patterns 마무리
  Omnifood Project - Setup and Desktop Version 전반부