일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 삼항연산자
- if반복문
- 복합대입연산자
- a && b
- 배열 최솟값
- 직사각형 별그리기
- Math.min
- 자바스크립트의 탄생배경
- arr.push()
- 가우스의 재림
- ES6 브라우저 지원 현황
- for반복문
- 어려운데ㅠㅠ
- 자바스크립트와 ECMAScript
- 자바스크립트의 특징
- 소오름~
- JavaScript
- for문
- 행렬...
- Ajax란?
- .map()
- 자바스크립트
- 소름돋는 알고리즘
- 구문과 의미
- 프로그래밍이란
- .split()
- 가우스의 공식
- !x.includes()
- Math.abs()
- array.reduce()
- Today
- Total
목록분류 전체보기 (88)
Ming's develop story
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/P65Ts/btrl8od5iWK/JLwxIMt6NYFyOlvk34vrkk/img.png)
1) 버킷리스트 아이템을 추가하면, 리스트 항목이 있는 div에만 스크롤 생기게 하기 - 키워드: overflow, max-height 혹은, div 넘치지 않게 하기 const ListStyle = styled.div` display: flex; flex-direction: column; height: 50vh; // 50vh로 맞춰줌으로써 처음 추가할 때에도 박스가 늘어나지 않도록 할 수 있다. 또, max-height을 줄여서 하는 방법도 있다. overflow-x: hidden; overflow-y: auto; // auto말고 scroll을 주면 리스트의 높이가 박스 높이보다 많지 않아도 스크롤 바가 생성된다. hidden으로 하면 높이보다 더 많아지는 리스트를 잘라버린다. max-height:..
App.js에서 input박스 밑에 만들어보자 { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); // 여기에 들어가는 것은 좌표이다. }} > 위로 가기 위로 가기 버튼을 만들어주고 window.scrollTo()를 통해 누르면 위로 가도록 해준다 behavior: "smooth"를 통해 부드럽게 올라가도록 만들 수 있다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bk2aC6/btrl5651l3m/HVg5dNqoMyTfnnnAiXKvk0/img.png)
1. {}}>완료하기 Detail.js에 완료하기 버튼을 먼저 달아준다. onClick에 들어갈 함수를 만들어 주어야 하는데 const initialState = { list: [ { text: "영화관 가기", completed: false }, { text: "매일 책읽기", completed: false }, { text: "수영 배우기", completed: false }, { text: "코딩하기", completed: false }, ], // list: ["영화관 가기", "매일 책읽기", "수영 배우기", "코딩하기"], }; 일단 bucket.js에서 배열이었던 list 데이터를 딕셔너리 형태로 바꿔주자! 그러고 새로고침 해서 보면 오류가 날텐데 BucketList.js를 들어가서 {li..
keyframes 사용하기 keyframes는 styled-components안에 이미 들어있다! 웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용한다. transition은 단순한 엘리먼트 상태변화에 쓰기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋다! Keyframes은 animation에서 사용하는 속성 중 하나이다! App.js import styled, { keyframes } from "styled-components"; function App() { return ( ); } const boxAnimation = keyframes` 0% { border-radius: 0px; top: 20px; } 30%{ top: 300px;..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bDZD7E/btrl54NOJSn/MpiYYEAkQUotGaNRkUDGl1/img.png)
App.js import React from "react"; import "./App.css"; import { Route } from "react-router-dom"; import Start from "./Start"; import Quiz from "./Quiz"; import Score from "./Score"; function App() { const [name, setName] = React.useState("우민기"); return ( ); } export default App; Start.js import React from "react"; import img from "./Teemo.png"; import { useHistory } from "react-router-dom"; impor..