# <details>
Accordion menu 구현
!codepen[1-blue/embed/LYmrXGK?default-tab=html%2Cresult] > 해당 프로젝트는 Vanilla JS에 TypeScript만을 사용한 프로젝트입니다. 기본적으로는 닫아놨다가 누르면 아래로 열리고 추가 정보를 볼 수 있는 기능을 가진 Accodian menu를 만들어봤습니다. 예전에 HTML5를 공부하다가 보기만 하고 지나갔던 `와 `가 생각나서 관련해서 구글링해보면서 방법을 찾고 적용해봤습니다. 애니메이션 적용 전 아래 gif는 `/`에 스타일링만 적용한 결과물입니다. ... 애니메이션 없는 gif 추가 transition을 적용한 것처럼 서서히 열리고 서서히 닫히는 기능을 원했지만 원하는대로 동작하지 않아서 애니메이션이 적용되는 방법을 찾아봤습니다. 🤔 ResizeObserver 사용 다른 방법을 찾다가 `ResizeObserve
🙄 상세 내용 보기 ( <details>, <summary> ) 🙄
기본적으로는 닫아놨다가 누르면 아래로 열리고 추가 정보를 볼 수 있는 기능을 가진 오브젝트를 만들어봤습니다. 예전에 HTML5를 공부하다가 보기만 하고 지나갔던 `와 `가 생각나서 관련해서 구글링해보면서 방법을 찾고 적용해봤습니다. 🙏 `` 사용 바로 아래 gif는 스타일링 처리만 한 결과물인데 생각보다 너무 정적인 느낌이 들었습니다. transition을 적용한 것처럼 누르면 서서히 열리는 것을 원했지만 생각처럼 작동하지 않아서 다른 방법을 찾아봤습니다. no 🤔 ResizeObserver 사용 다른 방법을 찾다가 ResizeObserver의 존재를 알게 되었습니다. ResizeObserver는 특정 엘리먼트의 크기 변화를 감지합니
semantic semantic image [
상호작용 콘텐츠의 올바른 용법
패스트캠퍼스 강의를 정리한 내용입니다. "The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명" Interactive content 사용자와 상호 작용할 수 있는 콘텐츠 a, audio, button, details, embed, iframe, img, input, label, select, textarea, video 입력장치(키보드, 마우스)로 조작 가능 deisplay: inline | inline-block; a vs button 같은 외형을 지닌 경우라도 a, button 요소를 구별해서 사용 cursor 명세 정의에서, pointer는 링크를 나타내므로 a 태그에만 pointer를 사용하고 button 태그는 default로 두는 것을 권장 실행 결과를 가리킬 수 있는 고유한 URL이 있으면 a요소, 참조할 URL이 없으면 button 요소로 마크업 a 태그는 링크 위에 마우스를 올리면 웹 브라우저가 상
