자바스크립트 (13) 썸네일형 리스트형 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 상태관리 등의 기능을 자체적으로 탑재하고 있는 것이 아니라 다른 라이브러리를 사용하여 구현하기 때문에 사이즈가 작고 배우기 쉬운 장점이 있습니다.리액트 앱 만들기리액트 앱을 만드는 가장 간단한 방법은 아래 명령어를 사용하는 방법입니다. 커맨드라인을 열고 아래 명령어를 실행하면 필요한 구성과 함께 새로운 리액트 앱이 생성됩니다.npx create-react-app app-name생성된 앱으로 이동하여 편집기를 엽니다.cd app-namecode .구동하기커맨드라인을 열고 아래 명령어 실행npm start참고React – A J.. 자바스크립트 컴포넌트 - 스탭퍼 구현 먼저 HTML에 필요한 만큼 단계를 지정합니다. 해당 애플리케이션에서 다음단계 또는 이전단계로 이동은 버튼을 사용했습니다. 1 2 3 4 Prev Next 아래와 같이 스타일을 지정합니다. 단계를 표시할 선은 바탕선이 될 요소와 단계진행에 따라 채워질 선을 표현할 요소 두 가지가 필요한데 '::before'를 사용해서 바탕선을 표시했습니다. '::before'의 경우 JS에서 사용할 수 없으므로 채워질 선으로 사용하기에는 적합하지 않습니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; background-color: rgb(224, 242, 236); ali.. 프로젝트 - 퐁 Start /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; overflow: hidden; } .frame-1 { height: 100vh; width: 100%; transition: 0.4s ease; } canvas { border: 4px solid #000; border-bottom: none; margin: auto; display: block; } .game-over { position: fixed; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: cente.. JavaScript? 웹프로그래밍을 논할 때 빠질 수 없는 세 가지가 있는데요. 첫 번째는 구조를 담당하는 HTML 그리고 스타일을 담당하는 CSS 마지막으로 기능 (동작)을 담당하는 JavaScript(JS)입니다. 자바스크립트는 모질라 그룹의 공동 창시자인 Brendan Eich에 의해 1995년에 웹사이트에 동적기능을 추가하여 웹과 사용자의 상호작용을 위해 출시되었는데요. 설정과 사용의 간편함, 다양한 기능과 지속적인 업데이트로 자바스크립트의 인기는 식을 기미가 보이지 않는데요. 2022년 기준 전 세계의 98%에 달하는 웹사이트의 Frontend가 자바스크립트를 사용하고 있으며 앵귤러, 리액트, TypeScript 등 인기를 끌고 있는 다른 프레임워크나 언어도 작동기반은 자바스크립트라는 점에서 당대에 웹 개발자들에게는.. 프로젝트 - to do To do 리스트 관리 애플리케이션 index.html To Do to do add item In Progress add item Completed add item on hold add item main.css @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; flex-direction: column; text-transform: capitalize; font-family: 'Poppins'; background: linear-gradient( 90deg, r.. 프로젝트 - 뮤직 플레이어 뮤직 플레이어 애플리케이션입니다. index.html Takyon (Death Yon) Death Grips 00:00 00:00 main.css @import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: #c9cde3; display: flex; align-items: center; justify-content: center; font-size: 12px; font-family: 'Spartan'; } /* image styles */ .i.. 드래그 앤 드랍 자바스크립트를 사용해서 드레그 앤 드랍 효과를 구현 해 보겠습니다. 구성하기 드래그하고자 하는 요소에 draggable="true" 속성을 추가합니다. 스타일을 통해 크기과 너비 등을 지정합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; } .img-box { height: 200px; width: 200px; border: solid 3px #000; border-radius: 50%; } img { object-fit: cover; object-positi.. 프로젝트 - 가위 바위 보 도마뱀 스폭 게임 가위, 바위, 보 업데이트 버전 게임이라고 합니다. index.html rock paper scissors and so on CSS @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: space-around; font-family: 'Poppins'; } .card { min-height: 400px; width: 450px; margin: auto; display: flex; flex-dire.. 이전 1 2 다음
