See the Pen Accordion by FE4902 (@fe4902) on CodePen.

tailwind, postcss, autoprefixer 설치 npm install -D tailwindcss postcss autoprefixer tailwind config 파일 생성 npx tailwindcss init -p tailwind.config.js 파일 설정 tailwind 를 적용할 파일들의 path 설정 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}" ], theme: { extend: {}, }, plugins: [], } global.css 파일 설정 @tailwind base;..

pinch to zoom & zoom-in action 설정 HTML head 안에 위 속성을 추가해서 줌을 이용한 축소, 확대 기능을 막아줍니다. user-scalable=0 : 확대 및 축소 작업 허용 여부를 설정합니다. 0 이 아닌 no 로 설정해도 동일한 효과를 불러옵니다. maximum-scale=1.0 : 페이지에서 허용되는 확대 정도를 1배로 설정합니다. minimum-scale=1.0 : 페이지에서 허용되는 축소 정도를 1배로 설정합니다. 터치 관련 설정 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 버튼 클릭시 생기는 highlight 를 제거합니다. */ -webkit-touch-callout: none; /* 길게 터치할 때 표시되는 ..

페이스북 https://developers.facebook.com/tools/debug/ 공유 디버거 - Meta for Developers 공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. developers.facebook.com 1. 페이스북 공유 디버거 사이트로 이동 2. 공유 디버거 메뉴에서 캐시 삭제할 URL 입력 3. 디버거 버튼 클릭 4. 스크랩한 시간 항목에서 다시 스크랩 버튼 클릭 5. 링크 미리 보기를 통해 업데이트된 오픈그래프 이미지 및 페이지 정보 표시 확인 카카오톡 https://developers.kakao.com/tool/de..

iOS에서 filter 속성이 적용된 경우 렉이 걸리는 이슈가 있습니다. 해당 이슈는 transform: translate3D(0, 0, 0) 를 사용하여 해결할 수 있습니다. div { filter: blur(4px); transform: translate3D(0, 0, 0); }

html 에 scroll-padding-top 적용시 고정된 header 의 input 에서 텍스트 입력시 스크롤이 이동하는 이슈 발생 /* 수정 전 */ html { scroll-padding-top: 100px; } html 에는 scroll-margin-top 이 적용되지 않아서, :target, #anchor-point 에 scroll-margin-top 속성을 주는것으로 해결 /* 수정 후 */ :target, #anchor-point { scroll-margin-top: 100px; }