728x90 반응형 Javascript6 CodePen 사용법: 프론트엔드 개발의 시작 프론트엔드 개발을 배우고 싶다면, CodePen은 정말 유용한 도구예요. 이 플랫폼은 웹 개발자와 디자이너들이 자신의 코드를 실험하고 공유할 수 있는 소셜 개발 환경을 제공해요. 이번 포스팅에서는 CodePen의 사용법을 자세히 알아볼게요.1. CodePen 소개CodePen은 HTML, CSS, JavaScript를 사용하여 웹 프로젝트를 만들고 실험할 수 있는 온라인 플랫폼이에요. 사용자는 자신의 코드를 작성하고, 즉시 결과를 확인할 수 있어요. 또한, 다른 사용자와 프로젝트를 공유하고 피드백을 받을 수 있는 기능도 제공해요. 2. 회원가입 및 로그인 방법CodePen을 사용하기 위해서는 먼저 회원가입을 해야 해요. 홈페이지에 들어가면 "Sign Up" 버튼이 보이는데, 이를 클릭하면 다양한 회원가입.. 2025. 6. 3. Fabric.js 튜토리얼 1부 Fabric.js이란 무엇입니까?Fabric.js는 기본 Canvas API를 사용하는 것보다 쉽게 HTML5 요소에 그림을 그릴 수 있는 JavaScript 라이브러리입니다. 이 Fabric.js 자습서는 Hunor Márton Borbély의 SVG 자습서 형식인 텍스트 편집기에 들어가 로컬 브라우저에서 볼 수 있는 짧은 데모를 svg-tutorial.com 에뮬레이트합니다.나는 당신이 수정하여 실제로 자신의 컴퓨터에서 스스로 실행할 수없는 코드 스 니펫을 싫어한다. 나는 항상 당신이 복사하고 컴퓨터의 브라우저에서 열 수 있는 각 예제에 대한 완전한 HTML을 제공할 것입니다. 누락된 부분이나 "독자에게 맡기" 누락이 없습니다. 또한 각 페이지의 Fabric.js 예제는 스크린샷이 아닌 실제 예제입니.. 2025. 5. 31. HTML로 숫자 퍼즐 게임 구현 숫자 퍼즐 게임을 구현하는 방법을 소개하며, Mermaid를 사용해 게임의 로직 흐름을 다이어그램으로 시각화합니다.숫자 퍼즐 게임이란?숫자 퍼즐 게임은 4x4 격자에 1부터 15까지의 숫자가 무작위로 배치되고, 빈칸(16번째 칸)을 이용해 숫자를 이동시켜 순서대로 정렬하는 게임입니다. 사용자는 빈칸 옆의 숫자를 클릭해 이동시키며, 최종적으로 1부터 15까지 오름차순으로 배열하면 승리합니다. 이 게임은 순수 HTML, CSS, JavaScript로 구현되며, 티스토리의 HTML 편집 모드에서 실행 가능하도록 설계됩니다.숫자 퍼즐 게임 구현이 코드는 게임 보드, 숫자 이동 로직, 승리 조건 확인, 그리고 반응형 스타일을 포함합니다.숫자 퍼즐 게임숫자를 이동해 1부터 15까지 순서대로 정렬하세요! 게임 리셋 .. 2025. 5. 20. [초보 가이드] 옵시디안 플러그인, 'Hello World'부터 시작하기 나만의 옵시디안 플러그인, 어떻게 만들까요? 옵시디안을 쓰다 보면 '이런 기능 있으면 진짜 좋겠다!' 싶은 순간이 있잖아요? 이 글에서 여러분의 아이디어를 현실로 만드는 첫걸음을 알려드릴게요!혹시 여러분도 저처럼 옵시디안으로 노트를 관리하다가, 딱 원하는 기능이 없어서 아쉬웠던 경험 있으신가요? 검색해도 없고, 비슷한 플러그인은 뭔가 2% 부족하고... 그럴 때 '내가 직접 만들면 얼마나 좋을까?' 이런 생각 해보셨다면, 솔직히 이 글은 바로 여러분을 위한 글입니다! 😊 처음엔 코딩 지식이 필요할까 봐 막막하게 느껴질 수 있지만, 차근차근 따라오다 보면 생각보다 어렵지 않다는 걸 알게 되실 거예요. 나만의 워크플로우에 완벽하게 딱 맞는 플러그인을 직접 만드는 재미, 지금부터 함께 시작해봐요! 왜 나만의.. 2025. 5. 19. Mermaid 설치 및 사용 방법과 Packet Diagram 작성 가이드 다이어그램은 복잡한 시스템이나 프로세스를 시각적으로 표현하는 데 매우 유용합니다. 특히 개발자나 기술 문서 작성자에게는 필수적인 도구입니다. 오늘은 코드로 다이어그램을 쉽게 생성할 수 있는 Mermaid와 그 중에서도 네트워크 패킷 구조를 시각화하는 Packet Diagram에 대해 알아보겠습니다.목차Mermaid란?Mermaid 설치 방법Mermaid 기본 사용법Packet Diagram 소개Packet Diagram 작성 가이드실전 예제활용 팁1. Mermaid란?Mermaid는 마크다운 기반의 텍스트로 다양한 다이어그램을 생성할 수 있는 JavaScript 라이브러리입니다. 복잡한 다이어그램 도구 없이 코드만으로 다양한 시각화를 할 수 있어 개발자들 사이에서 인기가 높습니다.Mermaid의 주요 .. 2025. 5. 18. 놓치면 후회할 12가지 오픈소스 풀스택 JavaScript 프로젝트 JavaScript는 웹 개발의 왕좌를 굳건히 지키고 있으며, 풀스택 개발자에게는 필수적인 기술 스택입니다. 웹 프론트엔드에서 백엔드, 심지어 모바일 앱까지 JavaScript로 만들 수 있다는 사실은 이미 잘 알려져 있습니다. 하지만 끊임없이 변화하는 기술 트렌드 속에서 어떤 학습 자료와 프로젝트에 집중해야 할지 막막할 때가 있습니다. 놓치면 후회할 12가지 오픈소스 풀스택 JavaScript 프로젝트를 소개합니다.이 프로젝트들은 실제 현장에서 사용되는 기술 스택을 활용하며, 다양한 난이도를 제공하여 초급 개발자부터 숙련된 개발자까지 모두에게 유용합니다. 1. Appwrite: 오픈소스 Firebase 대안Firebase와 유사한 기능을 제공하는 Appwrite는 백엔드 개발을 간소화해줍니다.데이터베이.. 2025. 5. 11. 이전 1 다음 728x90 반응형
