본문 바로가기
728x90

css12

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.
ChatGPT로 천자문 게임 만들기(3) 네트리파이(Netlify)에 프로그램 배포 네트리파이(Netlify) 웹호스팅 네트리파이(Netlify)는 간편하게 정적 사이트를 호스팅할 수 있는 웹 호스팅 서비스입니다. 이 글에서는 네트리파이의 기능과 회원가입부터 배포까지의 과정을 상세하게 안내합니다. 네트리파이( bestwizard.tistory.com 브라우저에서 실행 https://chunjamun-game.netlify.app/index.html?fileName=chunjamun&num=1 천자문 게임 chunjamun-game.netlify.app 천자문 게임 2023. 4. 3.
ChatGPT로 천자문 게임 만들기(2) 기억력 게임 카피해서 소스 수정 See the Pen chunjamun-game by imissrose (@imissrose) on CodePen. chunjamun.json [ {"num": "1", "initialSound": "ㅊㅈㅎㅎ ㅇㅈㅎㅎ", "soundAndMeaningText": "천지현황 우주홍황 天地玄黃 宇宙洪荒", "meaningText": "하늘은 검고 땅은 누렇고, 우주는 넓고 거칠다." }, {"num": "2", "initialSound": "ㅇㅇㅇㅊ ㅈㅅㅇㅈ", "soundAndMeaningText": "일월영측 진수열장 日月盈昃 辰宿列張", "meaningText": "해와 달은 차고 기울며, 별과 별자리는 열을 이루어 펼쳐져 있다." } ] chunjamun1.json [.. 2023. 4. 2.
ChatGPT로 천자문 게임 만들기(1) ChatGPT에 질문 데이터셋을 불러와서 카드에 보여주고 싶습니다. 데이터 셋은 이렇게 선언했습니다.let dataset = [ `Hello`, `Hello`, ... ]; json 파일에서 조회하고 싶습니다. 천자문 중 앞에 8글자를 json 형식으로 구현해주세요. 천자문의 첫 8자(천지현황 우주홍황)을 JSON 형식으로 구현하면 다음과 같이 작성할 수 있습니다. [ { "hanja": "天", "meaning": "천지(天地)의 천(天), 하늘", "pronunciation": "천" }, { "hanja": "地", "meaning": "천지(天地)의 지(地), 땅", "pronunciation": "지" }, { "hanja": "玄", "meaning": "신비로운, 깊은", "pronuncia.. 2023. 4. 2.
반응형