본문 바로가기
728x90
프로그래밍 「 자바스크립트 편」CSS 및 JavaScript 코드를 사용하여 햄버거 메뉴를 만드는 방법 안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다. 이 기사에서는 html, css 및 JavaScript 코드를 사용하여 햄버거 메뉴를 만듭니다. 햄버거 메뉴는 내비게이션의 표준 아이콘이 되었으며 오늘날 대부분의 주류 플랫폼과 앱에서도 사용할 정도로 인기를 얻었습니다. 햄버거 메뉴는 3개의 막대 라인이며 막대를 클릭하면 햄버거 메뉴로 나타나는 메뉴 열기 및 닫기 아이콘이 있습니다. 햄버거와 닮았 기 때문에 이런 식으로 명명되었습니다. 왜 햄버거 메뉴를 사용합니까? 햄버거 메뉴는 웹사이트를 탐색하거나 콘텐츠를 구성하는 더 깔끔하고 깔끔한 방법을 제공합니다. 또한 디자이너들은 햄버거 메뉴를 너무 오랫동안 사용해 왔기 때문에 그 자체로 표준이 되었습니다. 햄버거 메뉴를 만드는 .. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」CSS를 사용하여 스크롤 애니메이션 만들기 안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다. 이 블로그에서는 CSS를 사용하여 스크롤 애니메이션을 만드는 방법에 대해 알아봅니다. 웹 페이지를 스크롤할 때 콘텐츠는 다른 측면의 애니메이션에서 가져옵니다. 스크롤 애니메이션에는 Html, CSS 및 JavaScript를 사용합니다. 이 프로젝트에서 JavaScript를 사용하는 이유는 더 좋고 부드러운 스크롤 애니메이션을 얻을 수 있기 때문입니다. CSS를 사용한 스크롤 애니메이션[/caption] 스크롤 애니메이션은 방문자가 웹 사이트를 위아래로 스크롤하는 동안 발생하는 모든 종류의 애니메이션입니다. 스크롤 애니메이션에서 사용자가 웹 사이트 양식을 아래로 스크롤하면 웹 사이트에 적용한 이미지 및 비디오 효과가 다른 효.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」JavaScript를 사용하여 미리보기로 파일 업로드 드래그 앤 드롭 안녕하세요 코더입니다. 이 튜토리얼에서는 Html, Cs 및 JavaScript를 사용하여 다운로드 기능으로 드래그 앤 드롭 또는 찾아보기 업로드 파일을 만드는 방법을 배웁니다. 드래그 앤 드롭은 자바스크립트를 사용하여 드래그 앤 드롭 파일을 만들기 위해 양식, CSS 및 자바스크립트 개념의 개념을 지우는 데 사용되는 초보자 프로젝트입니다. JavaScript를 사용하여 미리 보기로 파일 업로드 끌어서 놓기[/caption] 프로젝트를 시작하기 전에 드래그 앤 드롭 파일 업로드가 무엇이며 어떻게 만드는지 이해해야 합니다. 드래그 앤 드롭 파일 업로드는 파일을 드래그 앤 드롭하여 제출할 수 있음을 의미합니다. 를 웹 페이지로 이동합니다. 대부분의 웹 사이트에는 이러한 종류의 파일 업로드 기능이 있습니다. .. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」GraalVM 언어의 새로운 기능 이 릴리스에는 많은 업데이트가 있으므로 두 개의 릴리스 블로그 게시물이 있습니다.이 게시물은 GraalVM 언어 및 Truffle 업데이트에 중점을 둡니다. GraalVM JDK 및 Native Image의 새로운 기능은 관련 블로그 게시물로 이동하십시오. 오라클 GraalVM 새로운 배포판인 Oracle GraalVM을 소개합니다! GraalVM 무료 이용 약관(GFTC) 라이선스에 따라 사용할 수 있습니다(FAQ 참조). 사용자의 경우 이는 다음을 의미합니다. 개발 및 프로덕션 용도로 무료입니다. CI/CD 파이프라인에 통합하기 위해 명령줄 또는 스크립트를 통해 쉽게 다운로드할 수 있습니다. Oracle JDK에 부합하는 장기 지원 릴리스 Oracle GraalVM 및 관련 블로그 게시물에서 제공하는.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」HTML 코드를 사용하는 난수 생성기 안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다. 이 기사에서는 HTML 및 JavaScript를 사용하여 난수 생성기를 만듭니다. 예전에는 우리 인간이 시작하고 멈추는 것을 들으면서 종이 한 장을 고르거나 마음속으로 숫자를 선택해야 하는 게임이 있었습니다. 이제 개발자로서 시스템은 숫자를 선택하고 정의된 범위 내에서 출력을 제공합니다. 난수(Random Number): 단어 자체는 예측을 위한 식별 가능한 패턴이 없는 제한된 숫자 또는 무제한의 지정된 풀에서 숫자 또는 정수를 선택한다고 명시합니다. 위와 같은 난수 생성기는 정의된 범위 내에서 하나 이상의 난수를 생성할 수 있는 장치입니다. 난수 생성기는 하드웨어 기반 또는 의사 난수 생성기일 수 있습니다. 프로젝트에 대.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」단순화 3 React 핵심 개념 (구성 요소, 소품 및 상태) 1. 구성 요소 : 구성 요소는 React 애플리케이션의 빌딩 블록입니다. 재사용 가능하고 독립적이며 UI 기능을 캡슐화합니다. React 구성 요소는 기능 구성 요소와 클래스 구성 요소의 두 가지 유형으로 분류할 수 있습니다. 기능적 구성 요소: 기능 구성 요소는 React 요소를 반환하는 JavaScript 함수입니다. 일반적으로 상태 또는 수명 주기 메서드를 관리할 필요가 없는 더 간단한 구성 요소에 사용됩니다. 함수형 구성 요소는 props(다음에 자세히 설명)를 입력으로 받아들이고 구성 요소의 UI를 정의하는 JSX(JavaScript XML)를 반환합니다. 기능 구성 요소의 예: import React from 'react'; function Greeting(props) { return Hel.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」Chrome 확장 프로그램 개발을 위한 고급 기술: 종합 가이드 이 기사에서는 Chrome 확장 프로그램 개발 프로세스를 크게 향상시킬 수 있는 몇 가지 고급 개념과 방법에 대해 설명합니다. 이러한 귀중한 통찰력은 단일 소스에서 쉽게 찾을 수 없으므로 이 문서는 개발 워크플로를 단순화하는 데 유용한 참고 자료가 됩니다. 웹 페이지에서 CSS 선택기를 추출할 수 있는 웹 스크레이퍼를 만드는 방법을 안내해 드리겠습니다. 이 확장에서 필요한 기능은 다음과 같습니다. 프론트엔드 애플리케이션은 React 애플리케이션입니다. 사용자는 데이터를 스크랩해야 하는 웹사이트 URL을 입력해야 합니다. 지정된 URL로 팝업 창이 열립니다. 사용자는 드래그 가능한 봇을 볼 수 있습니다. 사용자는 봇에서 텍스트 캡처 기능을 사용하도록 설정할 수 있습니다. 그런 다음 사용자는 웹 페이지에서 .. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」HTML 및 JavaScript를 사용한 간단한 카운트 다운 타이머 안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다, 우리는 HTML, CSS 및 자바 스크립트를 사용하여 카운트 다운 타이머를 만드는 방법을 배웁니다. 카운트다운 타이머는 특정 순간에 시작하여 0으로 내려갑니다. 중요한 이벤트가 다가오거나 게임에 몇 초가 남았을 때 상황에 대한 흥분이나 긴박감을 높이는 데 자주 사용됩니다. 카운트다운 타이머가 사용되는 상황에는 이벤트, 프레젠테이션, 게임, 심지어 시간 관리를 위한 일상 생활과 같은 다양한 상황이 있습니다. 카운트다운 타이머는 사용자가 생산성을 높이고 보다 효율적으로 작업할 수 있도록 도와줍니다. 카운트 다운 타이머 프로젝트는 항상 시간, 분, 초를 계산하기 위해 경주 또는 수영 경주와 같이 시간이 가장 중요한 곳에서 보았지.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」코드를 사용하여 HTML 및 CSS로 세련된 로그인 페이지 만들기 안녕하세요 코더입니다! Codewithrandom에 오신 것을 환영합니다., 오늘의 블로그에서는 코드가 있는 HTML 및 CSS로 로그인 페이지를 만들 것입니다. 우리는 웹사이트를 위한 스타일리시한 로그인 양식 페이지 디자인을 만들 것입니다. 현재로서는 로그인을 위한 입력으로 이메일과 비밀번호만 고려하고 있습니다. 로그인 페이지는 승인된 사용자가 전체 사이트 또는 사이트의 하위 집합에 액세스할 수 있도록 허용하므로 웹사이트 또는 앱에서 가장 중요한 페이지 중 하나입니다. 로그인 또는 등록 페이지는 사용자가 로그인으로 보호된 사이트에서 보는 초기 페이지입니다. 가입 또는 로그인 페이지는 시각적으로 매력적이고 사용자 친화적이며 사용하기 쉬워야 합니다. 그렇게. 코드부터 시작하되 코드를 진행하기 전에 확인해보.. 2023. 6. 16.
프로그래밍 「 자바스크립트 편」AI 토킹 디스코드 봇 만들기 | ChatGPT 및 JavaScript 음성을 텍스트로, 텍스트를 음성으로 변환 AI Discord BOT 인간의 능력을 가진 로봇과 실시간으로 대화할 수 있기를 원했던 적이 있습니까? 글쎄, 이것은 너무 미친 것이 아니라 2023년에 생각하십시오 사실 그것은 매우 쉽습니다, 당신이 정말로 필요로하는 것은 다음과 같습니다 : 디스코드 봇 (Discord.js) 챗GPT API Text-to-speech 및 Speech-to-text API(Google 클라우드) 그리고 시간 🤠 다음은 어떻게 생겼는지에 대한 예입니다. 이 작은 프로젝트에 대해 알아야 할 것은 몇 가지 기본적인 JavaScript입니다. 1단계: 봇 만들기 먼저 디스코드 봇을 만들고 디스코드 개발자로 이동하여 새 애플리케이션을 클릭하고 원하는 이름을 지정해야 합니다. 그런 다음.. 2023. 6. 16.
프로그래밍 「 자바스크립트 편」 IoT 시스템 개발이 왜 그렇게 어려워 보입니까? 더 많은 IoT 솔루션을 검색합니다., 더 복잡하고 전문화 된 모습. Google에서 오늘날 최고의 프로그래밍 언어를 검색하면 JavaScript, Python, Go, Java, Kotlin, PHP, C#, Swift가 반환됩니다. 처음 3개는 시장의 절반 이상을 차지하고 있으며 이를 기반으로 하는 IoT 장치용 코드를 찾기가 어렵습니다. IoT는 Arduino, 전자 키트, Raspberry Pi를 사용하는 지하, 차고 솔루션처럼 보이지만 실제로는 매우 간단 할 수 있습니다. IoT RaspberryPi 스타터 키트 장치에 개방형 API가 있고 REST 명령을 허용하는 한 무엇이든 개발할 수 있습니다. MQTT, WebSocket 및 그들이 추가하는 모든 것을 사용하여 수행 할 수 있다는 것을 알고.. 2023. 6. 16.
프로그래밍 「 자바스크립트 편」생계를 위한 프로그래밍은 너무 (매우) 외로울 수 있습니다 어려운 것을 큰 소리로 말하기 시작할 때입니다. 소프트웨어 개발자로 일하는 것은 종종 매우 외롭습니다. 하루 종일 컴퓨터 화면을 바라보며 코딩 퍼즐을 풀었습니다. 고립되어 있습니다. 원격 근무의 증가는 외로움을 복잡하게 만들었습니다. 한편으로는 통근이 없고 자율성이 더 커집니다. 반면에 Slack 메시지와 Zoom 통화는 실제 관계를 대체할 수 없습니다. 시간이 지남에 따라 그 외로움은 당신을 지치게 합니다. 공감하기 어렵다 우리 분야가 특히 외로움에 빠지기 쉬운 데에는 몇 가지 이유가 있습니다. 첫째, 일의 본질은 고립되어 있습니다. 많은 개발 팀에서는 격리된 상태로 작업하고 기능을 독립적으로 제공해야 합니다. 비동기식으로 의사 소통하고 회의를 피하는 것은 종종 만트라입니다. 둘째, 우리의 경력은 필연.. 2023. 6. 16.
728x90

티스토리툴바