css style 중 다단 레이아웃을 구성하는 column-count 속성이 있습니다.flex나 grid와는 조금 다른 개념인데 간단한 예제로 한번 알아보겠습니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctusaliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, atultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integerligula ipsum, tri..

자바스크립트(Javascript)로 로또 번호 랜덤 생성하는 코드를 만들어 봤습니다. 물론 직접 코딩하지 않고 Copilot으로 생성했습니다. 로또 번호 생성 로또 번호 생성 버튼을 클릭하면 중복되지 않은 숫자 6개를 잘 생성해 줍니다.Array.from으로 배열 생성해도 되지만 미지원 브라우저를 고려한다면 아래처럼 for문으로 배열 생성해도 됩니다.let numbers = [];for (let i=1; i코드 복사해서 재미 삼아 한번 해보시기 바랍니다. 오늘도 방문해 주셔서 감사드립니다.

인공지능 Copilot, 아숙업(AskUp)으로 돌림판(룰렛) 코드를 작성해 봤습니다.먼저 Copilot룰렛이 아니라 랜덤 숫자 코드를 짜주네요. 시작 버튼을 클릭하면 1초 동안 숫자가 변경되면서 랜덤으로 하나의 숫자를 보여줍니다. 코드는 아래 더보기 클릭하시면 확인 가능합니다.더보기 1 시작  다음은 아숙업(AskUp)이 짜준 코드입니다.원형 돌림판(룰렛)이라는 문구를 추가해서 요청하니 이렇게 원형으로 만들어 주는데 1, 2가 안 보이네요. 배경색 때문에 가려져 있어서 그런 건데 배경색 지워도 모양이 제대로 안 나옵니다.코드는 아래 더보기 클릭하면 됩니다.더보기 1 2 3 ..

인공지능을 이용해 지뢰 찾기 게임 코드를 요청해 봤습니다. Copilot GPT는 제대로 구현이 안되어 카카오톡 아숙업(AskUp) 채널을 이용했습니다. 아숙업 채널에서 ChatGPT 4 버전 이용은 요청 문구 제일 앞에 느낌표 적고 한 칸 띄운 다음 명령어를 입력하면 됩니다.완벽한 코드가 아닌 단순 참고용입니다.코드가 길어 접은글로 했으니 더보기를 클릭하시면 코드 확인이 가능합니다.더보기 지뢰 찾기 게임처럼 숫자 표시나 마우스 우클릭으로 물음표 기능 그리고 점수 등은 안되고 그냥 클릭만 되는 코드입니다. 클릭하다가 지뢰를 발견하면 이미지처럼 Game Over! 알림 창이 뜨고 종료됩니다.이 코드에서 숫자 표시와 한 번에 펼쳐질 영역 등을 추가로 요청하면서 코드를 수정하면 좀 더 완벽한 게임..

Copilot GPT로 테트리스 게임 구현을 위한 자바스크립트 코드를 요청해 봤습니다. 웹 검색하면 코드 예제는 많이 나오지만 어느 정도까지 생성해 주는지 궁금했습니다.코드는 html과 javascript 부분 따로 올려봅니다. 완벽한 코드는 아니니 참고용으로 보시기 바랍니다.  # 자바스크립트 코드 : 코드가 길어 접은 글 처리했습니다.더보기 아래는 실행 화면 캡처 이미지입니다.실행 결과 블럭 생성 및 이동(화살표), 회전(단축키 q, w)은 잘 되는데 블럭이 쌓여도 사라지지 않네요. 안 되는 부분은 코드 보며 뜯어고치면 되는데, 2~3분 안에 테트리스 게임 코드를 생성해 주니 놀라지 않을 수 없습니다. 기본 틀만 작성되면 그다음 작업이 많이 수월해지니 정말 좋은 것 같습니다.관심 있으시면..

홈페이지를 방문하다 보면 마우스 휠로 화면을 내리거나 올릴 때 한 섹션씩 이동하는 효과를 가끔 볼 수 있습니다.이를 풀페이지 효과라고 부르는데, 보통 fullPage.js를 이용해 제작하는데 이번에 Copilot에 해당 코드를 작성하게끔 해봤습니다. Header Section 1 Section 2 Section 3 Footer 나온 코드에 Header와 Footer부분만 추가했습니다.예전에 fullPage.js 사용 안 하고 코드 작성했을 때는 엄청 길었던 것 같은데 몇 줄 안 되는 자바스크립트 코드로 가능하네요. 스크롤링 효과는 잘 되는데 가끔 Section1에서 3으로 이동하는 경우가 생기네요.Copilot에서도 마지막 부연 설명에 더 많은 기능을..