멋쟁이사자처럼 프론트엔드 스쿨 2기 17_Day

📖 오늘 학습 뽀인트!

1. 이미지 포맷

포맷	컬러 표현	용량	애니메이션	투명	그림자	특징
GIF	256색	작음	O	O	X	압축률 안 좋음
JPG/JPEG	24비트 컬러	작음	X	X	X	압축률 좋음
PNG	32비트 트루컬러	큼	X	O	O	반투명 처리 가능
SVG	좋음	모양 복잡에 비례	O	O	O	벡터 그래픽 형식
WebP	매우 좋음	매우 작음	O	O	O	압축률 매우 좋음
AVIF	매우 좋음	작음	O	O	O	지원 브라우저 적음

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>

최신 확장자를 사용 할 때는 위에 소스코드 처럼 기본적으로 동작 가능한 이미지(jpeg)를 브라우저에게 제공하고 최신 기술을 사용할 수 있는 환경에서는 최신 기술(webp, avif)을 제공하여 더 나은 사용자 경험을 제공할 수 있는 점진적 향상기법이 중요하다.

2. 벤딩 머신 과제

몰랐던 부분을 많이 배웠다. HTML 구조부터 컨테이너 정렬, 반응형 구현 등등 내가 몰랐던 부분이나 좀 더 학습이 필요한 부분은 위 사진처럼 노션에 정리하고 있는데 로그인 구현 과제와 벤딩 머신 두 과제에 10 / 5 딱 반 정도 해결됐다.🤣 10/10 전부 solution 적는 것을 목표로 이번주 금, 토, 일은 반납 확정이다.🤦‍♀️