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

aydennote·2022년 4월 20일
1

📖 오늘 학습 뽀인트!

1. 이미지 포맷

포맷컬러 표현용량애니메이션투명그림자특징
GIF256색작음OOX압축률 안 좋음
JPG/JPEG24비트 컬러작음XXX압축률 좋음
PNG32비트 트루컬러XOO반투명 처리 가능
SVG좋음모양 복잡에 비례OOO벡터 그래픽 형식
WebP매우 좋음매우 작음OOO압축률 매우 좋음
AVIF매우 좋음작음OOO지원 브라우저 적음
<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 적는 것을 목표로 이번주 금, 토, 일은 반납 확정이다.🤦‍♀️

profile
기록하는 개발자 Ayden 입니다.

2개의 댓글

comment-user-thumbnail
2022년 4월 20일

이미지 포맷 정리가 테이블로 되어 있으니 이해하기가 훨씬 좋네요!!👍👍
정말 매일매일 새로운 지식들이 등장해서 의문을 낳는 거 같아요😂
저도 아직 해결 못한 의문들이 많지만! 금토일 열심히 몰아서 해봐야죠! 파이팅입니다!!!🔥🔥

1개의 답글