본문 바로가기
728x90

JavaScript14

ChatGPT로 배우는 크롬 확장 프로그램 | 크롬 브라우저 상단 고정 ChatGPT에 질문 크롬 브라우저를 상단에 고정시키는 크롬 확장 프로그램을 코딩해주세요 다음은 브라우저 창을 상단에 고정하는 Chrome 확장 프로그램의 기본 구현입니다. 1. 확장을 위한 새 디렉터리를 만들고 그 안에 manifest.json, background.js 파일을 만듭니다. 2. 다음 코드를 manifest.json에 추가합니다.확장의 이름, 버전, 설명 및 권한을 정의하고 사용할 백그라운드 스크립트를 지정합니다. manifest.json: { "name": "Pin to Top", "version": "1.0", "manifest_version": 2, "description": "Pin Chrome browser window to the top", "permissions": [ "ta.. 2023. 3. 26.
ChatGPT로 배우는 크롬 확장 프로그램 ChatGPT에 질문 크롬 확장 프로그램 중에는 구글과 네이버 사이트에서 chatGPT 검색 결과를 보여주는 프로그램이 있습니다. 크롬 익스텐션이 어떻게 사이트에 삽입될 수 있었나요? Chrome 확장 프로그램이 Google 및 Naver와 같은 웹 사이트에 어떻게 삽입될 수 있는지에 대한 몇 가지 정보를 제공할 수 있습니다. Chrome 확장 프로그램은 콘텐츠 스크립트라는 기술을 사용하여 확장 프로그램이 웹페이지의 콘텐츠를 수정하거나 상호작용할 수 있도록 합니다. 사용자가 웹사이트를 방문하면 콘텐츠 스크립트는 해당 웹페이지의 컨텍스트에서 실행되며 DOM(문서 객체 모델)에 액세스하고 상호작용할 수 있습니다. Chrome 확장 프로그램을 Google이나 Naver와 같은 웹사이트에 삽입하려면 확장 프로그.. 2023. 3. 25.
ChatGPT로 기억력 게임 만들기(4) 소스 최종본 See the Pen Untitled by imissrose (@imissrose) on CodePen. 브라우저에서 테스트 2023. 3. 22.
ChatGPT로 기억력 게임 만들기(3) ChatGPT에 추가 질문 .card .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /*background-color: #0077be;*/ /*background-image: url('grid.png');*/ background-size: 100% 100%; border-radius: 5px; backface-visibility: hidden; transform: rotateY(180deg); } background-image 대신 '##########'으로 채우고 싶습니다. 사이즈에 맞게 '#'를 채우고 싶습니다. 어떻게 하면 될까요? .card .back 요소를 요소의 크기에 맞게 조정되는 # 문자의 반복 패턴으로 채우.. 2023. 3. 22.
ChatGPT로 기억력 게임 만들기(2) ChatGPT에 추가 질문 dataset에 대한 정의가 없습니다. 코딩해주세요. 메모리 게임에 대한 데이터 세트를 정의하려면 게임에 사용할 이미지 URL 배열을 만들어야 합니다. 다음은 데이터세트를 정의하는 방법의 예입니다. let dataset = [ 'image1.png', 'image1.png', 'image2.png', 'image2.png', 'image3.png', 'image3.png', 'image4.png', 'image4.png', 'image5.png', 'image5.png', 'image6.png', 'image6.png', 'image7.png', 'image7.png', 'image8.png', 'image8.png' ]; 이 예에서는 각 이미지가 두 번 나타나 총 16개의 카.. 2023. 3. 22.
ChatGPT로 기억력 게임 만들기(1) ChatGPT에 질문 같은 그림찾기 메모리 게임을 html, css, javascript로 코딩하려고 합니다. html, css, javascript 파일을 분리해주고, 먼저 html, css부터 코딩해주세요 물론, 다음은 동일한 그림 찾기 메모리 게임에 대한 HTML 및 CSS 코드의 예입니다. HTML: Same Picture Finding Memory Game CSS: body { background-color: #eee; font-family: sans-serif; margin: 0; padding: 0; } header { background-color: #f8f8f8; padding: 1em; } h1 { margin: 0; } .game-container { display: flex; fle.. 2023. 3. 22.
반응형

티스토리툴바