포맷 컬러 표현 용량 애니메이션 투명 그림자 특징 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)을 제공하여 더 나은 사용자 경험을 제공할 수 있는 점진적 향상기법이 중요하다.
몰랐던 부분을 많이 배웠다. HTML 구조부터 컨테이너 정렬, 반응형 구현 등등 내가 몰랐던 부분이나 좀 더 학습이 필요한 부분은 위 사진처럼 노션에 정리하고 있는데 로그인 구현 과제와 벤딩 머신 두 과제에 10 / 5 딱 반 정도 해결됐다.🤣 10/10 전부 solution 적는 것을 목표로 이번주 금, 토, 일은 반납 확정이다.🤦♀️
이미지 포맷 정리가 테이블로 되어 있으니 이해하기가 훨씬 좋네요!!👍👍
정말 매일매일 새로운 지식들이 등장해서 의문을 낳는 거 같아요😂
저도 아직 해결 못한 의문들이 많지만! 금토일 열심히 몰아서 해봐야죠! 파이팅입니다!!!🔥🔥