본문 바로가기
728x90

코딩/타로 고르기5

ChatGPT로 타로카드 고르기(5) 타로카드 선택 프로그램 (리딩X) https://tarot-card.netlify.app/ "텍스트 복사" 클릭해도 복사 안될 수 있습니다 최근의 브라우저에서는 보안 문제로 인해 iframe에서 클립보드 액세스가 차단될 수 있습니다. 2023. 4. 4.
ChatGPT로 타로카드 고르기(4) 소스 See the Pen tarot-card by imissrose (@imissrose) on CodePen. universal-waite-tarot.json [ { "id": "major-0", "name": "The Fool", "image": "./tarot/major-0.png", }, { "id": "major-1", "name": "The Magician", "image": "./tarot/major-1.png", }, { "id": "major-2", "name": "The High Priestess", "image": "./tarot/major-2.png", }, { "id": "major-3", "name": "The Empress", "image": "./tarot/major-3.p.. 2023. 4. 4.
ChatGPT로 타로카드 고르기(3) ChatGPT에 질문 78장의 카드는 major 1, cup 1등 타로카드의 값을 가지고 있습니다. 셔플 버튼을 클릭하면 카드가 섞입니다. 셔플 기능을 구현하려면 아래와 같은 방법을 사용할 수 있습니다. 1. 78장의 카드를 배열로 생성합니다. 2. 배열을 랜덤으로 섞는 함수를 만듭니다. 3. 셔플 버튼을 클릭하면 배열을 섞어 카드의 순서를 변경합니다. 아래는 이 방법을 구현한 예시 코드입니다. 셔플 타로 종류별로 json 파일을 만들고 싶습니다. 유니버셜웨이트 타로인 경우 json 파일명을 뭘로 할까요? 유니버셜 웨이트 타로는 대표적인 타로 카드 덱 중 하나이므로 "universal-waite-tarot.json"과 같은 이름으로 지정할 수 있습니다. [ { name: 'THE FOOL', image:.. 2023. 4. 4.
ChatGPT로 타로카드 고르기(2) ChatGPT에 질문 카드를 선택하면 카드가 밑으로 내려가 보이게 하고(top 위치를 변경) 선택 완료 버튼을 클릭하면 카드를 뒤집어서 보여주는 게 좋을것 같습니다. 그렇다면, 카드 선택과 선택 완료 버튼 클릭 이벤트를 추가하고, 카드 선택 시 카드를 아래로 내리는 애니메이션과 선택 완료 버튼 클릭 시 카드를 뒤집는 애니메이션을 추가하면 됩니다. 먼저 HTML 코드에 선택 완료 버튼을 추가합니다. 예를 들어, 아래와 같이 버튼을 추가할 수 있습니다. ... 선택 완료 그리고 Javascript 코드에서는 select-button 버튼과 카드들을 선택하고, 클릭 이벤트에 따른 애니메이션을 추가하면 됩니다. const selectButton = document.querySelector('#select-but.. 2023. 4. 4.
ChatGPT로 타로카드 고르기(1) ChatGPT에 질문 타로카드 사이즈를 정해줘야할 거 같습니다. 네, 타로 카드의 사이즈를 미리 정해주어야 합니다. 일반적으로 타로 카드의 크기는 약 70mm x 120mm 정도이며, 이를 기준으로 작업하시면 됩니다. 다만, 디자인에 따라 크기가 다를 수 있으니 원하는 크기를 먼저 정하시는 것이 좋습니다. 스마트폰의 가로 픽셀을 최소 최대값 알려주세요. 스마트폰의 가로 픽셀은 제조사와 모델에 따라 다르기 때문에, 정확한 최소 최대값을 알려드리기는 어렵습니다. 하지만 대체적으로, 스마트폰의 해상도가 가장 낮은 기종이라도 가로 픽셀이 320px 이상인 경우가 대부분입니다. 최근 출시된 대부분의 스마트폰은 가로 픽셀이 360px 이상인 경우가 많습니다. 또한, 모바일 최적화를 위해서는 반응형 웹 디자인을 적용.. 2023. 4. 4.
반응형

티스토리툴바