개발하는 맹꽁이

p5.js는 프로세싱의 자바스크립트 버전입니다. HTML 캔버스를 이요하여 다양한 그래픽을 그릴 수 있습니다. 오늘은 6월 6일 현충일을 기념하여 p5.js로 태극기를 그려보았습니다. 시작하기 앞서 순국선열과 호국영령들의 희생에 감사를 표합니다. 태극기가 겉보기에는 단순해보이지만, 은근 복잡하더라고요. 그래서 이곳저곳 많이 참고했습니다 ㅎ 태극기 도안은 여기서 참고했습니다. https://www.mois.go.kr/chd/sub/a05/birth/screen.do 우리나라 국가상징> 태극기 태극기는 이렇게 만들어졌어요 1882년 박영효가 고종의 명을 받아 일본에 가면서 ‘태극·4괘 도안’의 기를 만들어 사용하였다는 기록이 있어요. 고종은 1883년 3월 6일 왕명으로 이 ‘태극·4괘 www.mois.go..

HTML 삽입 미리보기할 수 없는 소스 도배도배를 사용하면 텍스트를 원하는 수 만큼 반복해줍니다. 제가 만들었죠. 간단한 UI입니다. Bootstrap을 이용해서 그렇죠. 반복하고 싶은 텍스트를 큰 입력칸에 쓰고, 반복 횟수를 정하면 됩니다. 줄을 바꾸며 반복하도록 할 수도 있고 반복하기 버튼을 누르면 자동으로 복사됩니다. 그냥 갑자기 생각나서 만들었습니다. 진짜 별거 없는데 줄바꿈 기능에서 애먹었습니다. checkbox input은 value가 아니라 checked로 체크 여부를 받아오더군요. 그걸 모르고 value로 받아온 저는 "이게 왜 안되지" 하며 답답해했습니다. 소스코드도 올려드리겠습니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19..

자바스크립트로 만든 간단한 계산기입니다. 정말 간단해요. 사실 이번에 처음 만드는 것은 아닙니다. 이전에 한번 만들었는데 소숫점 부분에서 꽉 막혔다가 어찌어찌 겨우 풀었습니다. 그리고 오늘, 내가 어떻게 그 부분을 해결했나 다시 생각해보기 위해 0부터 다시 만들어 보기로 했습니다. 그런데 전에는 명절 고속도로 처럼 꽉 막혔던 코드가 갑자기 뻥 뚤려서 그냥 쉽게 만들어버렸습니다. 내가 그때 왜 그 고생을 했는가... 암튼. 위의 사진을 보면, 아무런 꾸밈 없이 틀만 잡아놓은 모습입니다. 사실 저것도 기능을 모두 구현한 다음 뒤늦게 한 겁니다. 그리고 귀찮아서 더 안했어요. 그래도 심플하고 좋네요. 1. 환경 Windows 10, Chrome, Notepad++ 2. HTML 소스 C ÷ 7 8 9 × 4 ..

안녕하세요. 이번 글에서는 자바스크립트로 시계를 만들어 보도록 하겠습니다. 구현할 기능은 현재의 시간(시, 분, 초) 받아오기, 현재 시간을 계속 업데이트하기 입니다. 크롬 브라우저와 비주얼 스튜디오 코드를 사용해 만들었습니다. 1. 기본 UI HTML로 기본적인 UI를 구성해보도록 하겠습니다. 그냥 H1 태그 하나만 있으면 됩니다. 00:00:00 ... 시간은 자바스크립트로 구할 것이기에 0으로 설정했습니다. 2. 현재 시간 가져오기 다음으로, 자바스크립트로 현재 시간을 가져와 화면에 표시하는 기능을 구현해보도록 하겠습니다. const h1 = document.querySelector("h1"); let time = new Date(); let hour = time.getHours(); let min..