웹개발 (3) 썸네일형 리스트형 ref로 제어하는 커스텀 다이얼로그 만들기 (Framework7 + TailwindCSS) 🔧 ref로 제어하는 커스텀 다이얼로그 만들기 (Framework7 + TailwindCSS)이번에는 을 활용한 커스텀 다이얼로그를 직접 만들고, ref를 통해 프로그래밍적으로 제어할 수 있도록 구성해봅시다.✅ 구현 목표다이얼로그의 열기/닫기 기능을 ref로 제어title, message, confirmText, cancelText를 동적으로 전달onConfirm, onCancel 같은 이벤트 핸들러도 동적으로 바인딩🧱 Step 1. CustomDialog.vue 컴포넌트 구현 {{ state.title }} {{ state.message }} {{ state.cancelText }} .. Framework7 + TailwindCSS로 커스텀 다이얼로그 만들기 Framework7을 사용하다 보면 기본 다이얼로그(Alert, Confirm 등)의 스타일을 커스터마이징하고 싶을 때가 있습니다. 하지만 Framework7의 기본 다이얼로그는 HTML 커스터마이징이 어렵기 때문에, 을 활용하여 TailwindCSS 기반의 커스텀 다이얼로그를 직접 만들어보겠습니다.✅ 왜 대신 을 쓰나요?Framework7의 다이얼로그는 빠르게 만들 수 있지만:내부 마크업이 고정되어 있음TailwindCSS로 직접 커스터마이징하기가 제한적임반면 은 완전히 내 마음대로 마크업을 구성할 수 있어서,디자인 자유도와 유연성이 매우 높습니다.🧱 Step 1. 커스텀 다이얼로그 컴포넌트 만들기components/CustomDialog.vue 파일을 만들어 아래와 같이 작성합니다: .. 모바일에서도 PC처럼 보이게 만드는 웹사이트 뷰포트 설정 방법 요즘 대부분의 웹사이트는 반응형 웹을 채택하고 있어, 화면 크기에 따라 레이아웃이 자동으로 조정됩니다. 하지만 경우에 따라서는 모바일에서도 PC와 동일한 고정 해상도로 보여주고 싶을 때가 있습니다.예를 들어,모바일에서 너무 간단하게 축약된 UI가 마음에 들지 않을 때특정 서비스나 데모 사이트를 PC 기준으로만 설계했을 때디자인 시안 그대로 모바일에서도 유지하고 싶을 때이 글에서는 HTML, CSS, 그리고 뷰포트 설정을 통해 모바일에서도 PC와 동일한 해상도로 고정해서 보여주는 방법을 소개합니다.✅ 뷰포트(Viewport)란?모바일 브라우저는 기본적으로 태그를 이용해 웹사이트가 어떻게 보여질지를 결정합니다.이 설정을 바꾸면 모바일 화면이 PC 화면처럼 축소되어 보이도록 만들 수 있습니다.✅ 고정 해상도.. 이전 1 다음
