HTML CSS 및 JavaScript로 메모 앱 만들기
codewithrandom 블로그에 오신 것을 환영합니다. 이 블로그에서는 HTML, CSS 및 JavaScript를 사용하여 Notes 앱을 만드는 방법을 배웁니다. 이 메모 앱에서는 메모를 새로 만들고 메모를 편집하고 삭제할 수 있습니다. 블로그를 즐기시기 바라며 Notes 앱의 기본 html 구조부터 시작하겠습니다. *Notes 앱용 HTML 코드 * 목차 Notes 앱에 대한 모든 H...
programmingcssjavascripthtml2022-10 last update
6 minutes reading
Javascript를 사용하는 나이 계산기 ( 소스 코드 )
이 기사에서는 날짜를 오늘 날짜로 계산하는 연령 계산기 프로젝트를 만듭니다. 연령 계산기의 경우 Html, Css 및 Javascript를 사용합니다. 블로그를 즐기시기 바라며 나이 계산기 자바스크립트의 기본 HTML 구조부터 시작하겠습니다. 연령 계산기용 HTML 코드 HTML 문서의 body 태그에서 element를 사용하여 계산기를 위한 컨테이너를 만들고 class 속성인 class =...
programmingwebdevjavascripthtml2022-10 last update
7 minutes reading
HTML,CSS, JavaScript를 이용한 나만의 공룡 게임 (Chrome Dinosaur Game)
CodeWithRandom 블로그에 오신 것을 환영합니다. 이 기사에서는 Html, Css 및 javascript를 사용하여 공룡 게임을 만드는 방법을 배웁니다. Dino 게임 html 코드를 생성한 다음 css 코드를 생성하고 디노 게임에 대해 기능적으로 javascript 코드를 사용합니다. 저희 블로그가 재미있으시길 바라며, 디노 게임 HTML 코드의 기본 HTML 구조부터 시작하겠습니...
programmingcssjavascripthtml2022-10 last update
5 minutes reading
Javascript를 사용하여 Enter 및 화살표 키 처리
인턴십에서 "Enter"키를 처리하는 작업이 할당되었습니다. 사실 저는 프론트엔드 개발에 대해 잘 모릅니다. 그러나 여기에 과제를 해결하고 새로운 것을 배우려는 나의 노력이 있습니다. 그래서 작업은 테이블의 셀을 편집할 수 있는 테이블을 생성하는 것이었습니다. 그리고 '엔터' 버튼을 누를 때마다 다음 셀을 선택해야 합니다. 처음에는 쉬워보여서 코딩을 시작했습니다. 이 작업이 이벤트와 관련이 ...
htmljavascripttutorialprogramming2022-10 last update
7 minutes reading
用 JavaScript 做一個 툴팁 功能
之前需要用到 도구 설명 的設計時,會直接在 JavaScript 上生成一個,優點就是純 CSS 就能解決.不過總會遇到意外,對,就是建現只靠 是解決不了時候 本篇是 August 自己寫了一個 Tooltips 的功能,預備著以後專案需要使用時直接下載下來引用,像是一篇使 要特別說明的是,目前這版不算是完整的開發完,因為 도구 설명 用寫套件的方式去開發時,會遇到一些眉眉角角,解決角角,解決時覺得蠻有趣可以自行開 因為 8월 習慣用...
javascriptopensourcehtmlcss2022-10 last update
8 minutes reading
바닐라 JavaScript를 사용하여 간단한 계산기 만들기(단계별)
HTML, CSS, JS만으로 만든 간단한 계산기입니다. HTML, CSS, JavaScript의 기초와 새로운 것을 만들고자 하는 열망. CSS 플렉스박스 할 일 목록에서와 같이 계산기 스케치를 만든 다음 프로토타입으로 변환합니다. 코딩을 시작하기 전에 프로젝트 모양과 기능에 대해 명확해야 합니다. 3. 프로젝트 디렉토리 생성 먼저 Simple Calculator라는 폴더를 만듭니다. 모든...
cssjavascriptcalculatorhtml2022-10 last update
32 minutes reading
Javascript만으로 페이지에서 검색된 텍스트 강조 표시
html에서 텍스트를 강조 표시하는 방법에 대해 항상 궁금하고 어려운 작업이 될 것이라고 생각했다면 놀라움을 금치 못할 것입니다! 🙇🏽♂️ '마크' 태그 최근에 마크 태그에 대해 알게 되었습니다. 마크 태그 안의 텍스트를 둘러싸면 브라우저에서 자동으로 눈에 띄는 노란색으로 강조 표시됩니다. 그러면 검색된 텍스트를 강조 표시하는 작업이 매우 간단해집니다. 입력 텍스트를 가져온 다음 순수 HT...
computersciencehtmljavascriptwebdev2022-10 last update
3 minutes reading
SVG용 JavaScript 텍스트 편집기
그림 1. 선택, 복사, 붙여넣기를 지원하는 SVG 텍스트 편집기. PC와 모바일에서 작동합니다. 이 기사에서는 텍스트 편집기를 만드는 방법을 설명합니다. 소스 코드가 첨부되어 있습니다. 여러 줄 텍스트 SVG의 경우 <tspan> . 그림 2. 여러 줄 텍스트, 세 번째 줄이 비어 있음 목록 1. SVG의 여러 줄 텍스트. 세 번째 줄은 비어 있습니다. <tspan> 요소의 위치는 <tex...
htmltutorialjavascriptwebdev2022-10 last update
11 minutes reading
JavaScript를 사용하여 동적 HTML 선택 드롭다운 목록
이 JavaScript 튜토리얼이 끝나면 select 태그를 사용하여 HTML 드롭다운 목록을 동적으로 만드는 방법을 알게 될 것입니다. 먼저, 내부에 옵션을 동적으로 추가하려는 countryDropDown이라는 ID로 선택 태그를 만듭니다. 그런 다음 JavaScript에서 DOM 참조를 정의하십시오. 다음은 countryData라는 JavaScript 객체의 데이터 모델이며 국가 이름을 ...
htmljavascriptcssprogramming2022-10 last update
7 minutes reading
Javascript의 단순 이자 계산기 | 초보자를 위한 HTML 단순 이자 계산기
이 기사에서는 내가 한 방법을 보여 드리겠습니다. 이 포스트에서는 특별히 html css와 javascript를 사용하여 간단한 이자 계산기 프로젝트를 달성하는 방법을 살펴볼 것입니다. 이 튜토리얼에서 빌드할 최종 결과는 다음과 같습니다. 소스 파일 링크 이 작은 프로젝트의 소스 파일은 위의 링크에서 쉽게 다운로드할 수 있습니다. 주로 이 프로젝트에서 아래에 제공된 이러한 개념에 대해 배울 ...
htmljavascriptcsswebdev2022-10 last update
6 minutes reading
HTML은 놀랍습니다. 다음은 실제로 JavaScript가 필요하지 않은 세 가지 일반적인 UI 구성 요소입니다.
라이브러리는 훌륭하고 매우 중요할 수 있습니다. 하지만 여기에 문제가 있습니다. 항상 필요한 것은 아닙니다. JavaScript는 훌륭하지만 저는 아직 경계에 있습니다. HTML은 실제로 매우 놀랍고 종속성 지옥에 갇히지 않고도 작업에 완전히 적합한 도구가 될 수 있습니다. 부풀려진 라이브러리를 사용하는 대신 바닐라 HTML이 제공하는 기능을 직접 사용해 보는 것은 어떻습니까? 다음은 일반적...
beginnershtmlwebdev2022-10 last update
7 minutes reading
Manipulando opções com a tag Select e funções no JavaScript #1
JavaScript, e seus poderes fenomenais, vão nos acompanhar num projeto de Calculadora de IMC nos próximos artigos. A ideia é construir uma aplicação que entregue conceitos básicos, mas bem feitos, em HTML, CSS e JavaScrip...
htmlprogrammingjavascriptwebdev2022-10 last update
5 minutes reading
JAVASCRIPT를 사용하여 HTML<a rel="noreferrer noopener nofollow"> Anchor </a> 태그 만들기
이 문서는 html의 앵커 태그를 사용하지 않고 웹페이지에서 사용한 모든 텍스트에 대한 링크를 만드는 데 도움이 될 것입니다. 또한 링크를 클릭할 때마다 계속할지 여부를 확인하는 메시지가 표시됩니다. 1 단계 우리는 브라우저가 현재 작업 공간을 알고 있으며 JavaScript가 브라우저와 통신하는 가장 좋은 방법이라는 것을 알고 있습니다. 그래서 이 명령으로document.location="...
htmlwebdevjavascriptprogramming2022-10 last update
4 minutes reading
JavaScript 없이 양식 입력 유효성 검사
나는 그것을 약속했고 여기있다. 여기에 2가지가 필요합니다. html 속성 및 과 같은 일부 CSS 유사 무늬 pattern 속성을 사용하면 입력된 값이 유효한 것으로 간주되기 위해 일치해야 하는 정규식을 지정할 수 있습니다. !중요: 브라우저가 에 따라 입력의 유효성을 검사하고 결과적으로 <input type="email"> 또는 :valid로 캐스팅) 자체적으로) 유효성 검사가 기본적으로...
htmlwebdevcsstutorial2022-10 last update
7 minutes reading
HTML, CSS 및 JavaScript로 사용자 지정 마우스 포인터 만들기 👆
이 튜토리얼에서는 표준 마우스 포인터를 클릭할 때 스타일이 바뀌는 멋진 이모티콘으로 변환하는 방법을 볼 것입니다. 이 세 개의 파일을 만드는 것으로 시작하십시오. index.html , styles.css 및 script.js . HTML 구조 표준 HTML 상용구 코드를 만듭니다. 그런 다음 HTML 파일의 <link> 태그에서 styles.css 를 가져옵니다. HTML 파일 하단에 있는...
htmljavascriptcsstutorial2022-10 last update
6 minutes reading
HTML, CSS 및 JavaScript를 사용하여 실시간으로 변화하는 디지털 시계 구축
HTML, CSS 및 JavaScript는 세련되고 동적인 웹 요소를 구축하는 데 사용되며 우리가 구축할 수 있는 유용한 요소 중 하나는 디지털 시계입니다. 이 튜토리얼에서는 현재 시간과 날짜를 표시하는 간단한 실시간 변경 디지털 시계를 만드는 방법에 대해 설명합니다. 먼저 프로젝트에 대한 HTML 마크업을 설정합니다. clock 라는 폴더를 만듭니다. 이 폴더 안에 index.html , ...
webdevcsshtmljavascript2022-10 last update
14 minutes reading
HTML, CSS 및 JavaScript를 사용하여 나만의 라이브 웹 편집기 만들기
이 자습서에서는 라이브 웹 편집기를 만듭니다. HTML, CSS, JavaScript 코드를 작성하고 결과를 실시간으로 볼 수 있는 웹 애플리케이션입니다. 웹 편집기는 HTML, CSS 및 JavaScript 코드를 작성하고 결과를 실시간으로 볼 수 있는 웹 응용 프로그램입니다. 이 튜토리얼을 시작하기 전에 HTML, CSS 및 JavaScript에 대한 기본적인 이해가 있어야 합니다. 폴더...
javascripthtmlcsswebdev2022-10 last update
19 minutes reading
CSS 및 JavaScript를 사용하여 다크/라이트 모드 전환
이 게시물에서는 CSS, JavaScript 및 약간의 Bootstrap 5를 사용하여 Dark/Light 모드 전환기를 쉽게 만드는 방법을 보여 드리겠습니다. 위의 HTML 코드에서 Bootstrap 5를 사용하여 페이지 중앙에 카드를 디자인하고 있음을 알 수 있습니다. 따라서 이후 단계에서 두 파일의 코드를 볼 수 있습니다. 위의 코드에서 :root 및 :root.light 선택기를 사용...
javascripthtmlcss2022-10 last update
22 minutes reading
HTML, CSS, Javascript를 활용한 반응형 개인 포트폴리오 디자인
안녕하세요, 오늘 이 블로그에서는 HTML, CSS 및 Javascript를 사용하여 반응형 개인 포트폴리오 디자인을 만드는 방법을 배웁니다. 이전 블로그에서 을 보았습니다. 이전에 HTML, CSS 및 Javascript와 관련된 많은 프로젝트를 공유했습니다. 을 확인할 수 있습니다. 이제 포트폴리오 디자인을 만들 차례입니다. 관심이 있다면 이 블로그를 읽은 후 내 다른 자바스크립트 프로젝...
incodercsshtmljavascript2022-10 last update
34 minutes reading
Github에 React 앱을 배포하는 방법
추가 정보 -- 이동 -- Github 계정 생성 -- Node.js가 PC에 설치되어 있는지 확인합니다. -- Visual Studio Code(vscode) 설치 -- 빈 폴더를 만들고 원하는 이름을 지정합니다. -- 폴더 완성 후 terimal로 이동 -- 터미널 유형에서 -- github으로 이동하여 새 저장소를 만듭니다. -- 저장소 완료 후 -- 패키지 설치 후 -- package...
htmlreactgithubcss2022-10 last update
5 minutes reading
HTML, CSS 및 Javascript의 텍스트 음성 변환 변환기
안녕하세요, 오늘 이 블로그에서는 HTML, CSS 및 Javascript로 텍스트 음성 변환을 만드는 방법을 배웁니다. 이전 블로그에서 을 보았습니다. 이전에 HTML, CSS 및 Javascript와 관련된 많은 프로젝트를 공유했습니다. 을 확인할 수 있습니다. 이제 텍스트를 음성으로 변환하는 변환기를 만들 차례입니다. 관심이 있다면 이 블로그를 읽은 후 내 다른 자바스크립트 프로젝트를 ...
incodercsshtmljavascript2022-10 last update
10 minutes reading
HTML 목록을 만드는 방법
HTML 목록을 만드는 방법? HTML 목록은 정보 목록을 지정하는 데 사용됩니다. 모든 목록에는 하나 이상의 목록 요소가 있을 수 있습니다. HTML에는 세 가지 유형의 목록이 있습니다. 무순 <ul> 설명 <dl> 정렬되지 않은 목록은 <ul> 태그를 사용하여 생성됩니다. 정렬되지 않은 목록은 기본적으로 글머리 기호로 표시된 항목으로 구성됩니다. 각 목록 항목은 <li> 태그를 사용하여 ...
htmlbeginnerstutorialwebdev2022-10 last update
7 minutes reading
HTML, CSS 및 Javascript를 사용하여 카운터가 있는 입력 문자 제한
안녕하세요, 오늘 이 블로그에서는 글자 수 제한과 카운터가 있는 입력을 만드는 방법을 배웁니다. 이전 블로그에서 을 보았습니다. 이전에 에서 많은 블로그를 공유했습니다. 원하는 경우 확인할 수 있습니다. 이 프로젝트 [Input Character Limit with counter]에는 위 이미지에서 볼 수 있듯이 입력, 아이콘 및 카운터가 있습니다. 이 카운터 번호는 입력할 수 있는 문자 수...
incodercsshtmljavascript2022-10 last update
5 minutes reading
HTML, CSS 및 Javascript를 사용하여 태그 입력 상자 만들기
안녕하세요, 오늘 이 블로그에서는 HTML, CSS 및 Javascript를 사용하여 태그 입력 상자를 만드는 방법을 배웁니다. 이전 블로그에서 을 보았습니다. 이제 태그 입력 상자를 만들 차례입니다. 이전에 과 관련된 많은 프로젝트를 공유했는데 원하는 경우 확인할 수 있으며 확인하는 것을 잊지 마십시오. 태그 입력은 사용자가 입력 필드에 여러 항목을 태그로 추가하거나 삽입할 수 있도록 하는...
incodercsshtmljavascript2022-10 last update
8 minutes reading
HTML, CSS 및 Javascript에서 Microsoft와 같은 호버 효과가 있는 버튼 만들기
안녕하세요, 오늘 이 블로그에서는 Microsoft와 같은 호버 효과가 있는 버튼을 만드는 방법을 배웁니다. HTML, CSS 및 Javascript에서. 이전 블로그에서 을 보았습니다. 이전에 과 관련된 많은 프로젝트를 공유했는데 원하는 경우 확인할 수 있으며 확인하는 것을 잊지 마십시오. 웹에서 많은 종류의 버튼 호버 효과를 보았을지 모르지만 오늘 이 블로그에서는 Microsoft와 같은...
incodercsshtmljavascript2022-10 last update
7 minutes reading
HTML, CSS 및 Javascript만 사용하여 토스트 알림 생성
안녕하세요, 오늘 이 블로그에서는 HTML, CSS 및 Javascript만 사용하여 알림 메시지를 만드는 방법을 배웁니다. 이전 블로그에서 을 보았습니다. 이전에 과 관련된 많은 프로젝트를 공유했는데 원하는 경우 확인할 수 있으며 확인하는 것을 잊지 마십시오. 알림은 애플리케이션에서 사용자가 주의를 기울일 때 표시되는 메시지, 이메일, 아이콘 또는 기타 기호입니다. 알림은 새로운 일이 발생...
incodercsshtmljavascript2022-10 last update
10 minutes reading