허도경, limewhale

이전에 작성한 프론트 개발의 시간을 덜어주는 유용한 HTML(Part 1)에 이어서 두 번째 시간을 가져보도록 할게요. 그럼 바로 시작하겠습니다. 💡 details 게시판의 Q&A와 같은 토글 메뉴(슬라이드 메뉴)를 만들기 위해선 JS의 도움이 반드시 필요했습니다. 하지만 이젠 HTML과 CSS 만으로 토글 메뉴를 구현할 수 있습니다. ✅ details 태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용하며 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용됩니다., 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있습니다. 이러한 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화..

디자이너가 전달한 화면의 GUI 작업을 하면 이미지 요소를 사용해야 하는 부분이 있는데 이를 최적화하기 위해 아이콘 요소는 SVG로 만들어서 처리를 하거나 이미지 자체 포맷을 압축하는 방법을 사용합니다. 그런데 이미지를 강제로 압축해서 처리하면 이미지 화질 요소가 낮아지게 되어 만족스러운 효과를 얻지 못하는 결과가 왕왕 나오기도 합니다. 이럴 때 사용자의 브라우저 환경에 따라서 이미지를 다르게 보여주는 환경으로 로직을 구성한다면 웹 최적화를 통해 속도면에서도 향상되고 이미지 품질면에서도 모두가 만족스러운 결과를 얻을 수 있을 거라 예상합니다. 이미지 품질을 유지하면서 속도를 개선하기 위해 차세대 포멧인 WebP와 avif를 이용하려고 합니다. WebP란 무엇인가요? Webp는 구글에서 만든 이미지 포멧으..