닭발에서 개발까지

CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션 보다 다음 세 가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있다. CSS애니메이션은 frame-skipping같은 여러 기술을 이용하여 최디한 부드럽게 렌더링된다. 브라우저는 애니메이션의 성농을 효율족으로 최적화 할 수 있다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화 할 수 있다. 애니메이션 적용하기 CSS 애니메이션을 만드려면 animation 속성과 하위 속성을 지정합니다. 애니메이션의 총 시간과 반복 여부를 지정할 수 있습니다. animation 속성의 하위 속성은 ..

Study/CSS 2020. 7. 14. 10:45

See the Pen LYGmmvE by JungSungHun (@JungSungHun) on CodePen.

Study/CSS 2020. 7. 9. 19:03

See the Pen bGEMMQo by JungSungHun (@JungSungHun) on CodePen.

Study/CSS 2020. 7. 9. 18:56

See the Pen xxZjPoa by JungSungHun (@JungSungHun) on CodePen.

Study/CSS 2020. 7. 9. 14:23

display: flex flex-wrap flex-wrap: nowrap : 줄바꿈 금지(넓이가 줄어들어도 절대 줄바꿈이 이뤄지지 않는다.) flex-wrap: wrap : 줄바꿈 가능(넓이가 줄어들어들면 유동적으로 줄바꿈이 이뤄진다.) flex-direction flex-direction가 row 이면 중심축이 수평정렬이고 반대축이 수직정렬이다 flex-direction가 column 이면 중심축이 수직정렬이고 반대축이 수평정렬이다 flex-direction : row 기본값은 row이다 flex-direction : row 수평정렬 flex-direction : row-reverse 수평정렬 반대로 flex-direction : column 수직정렬 flex-direction : column-rev..

Study/CSS 2020. 7. 7. 18:16

리액트는 페이스북에서 제공해주는 프론트엔드 라이브러리이다. 리액트는 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다. 리액트를 왜 사용하는가? 사실 리액트를 사용하지 않아도 얼마든지 웹 페이지를 html, css를 이용해 만들 수 있다. 그러나 html과 css등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다. 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들어 줄 수 있다. 리액트의 특징 컴포넌트 리액트는 컴포넌트 기반의 라이브러리이다. UI를 하나의 큰 덩어리로 생각한다면 컴포넌트는 그 덩어리를 이루는 아주 작은 요소들이라고 생각하면된다. 그런 요소들을 설계해서 쌓아 올리면 하나의 UI가 만..

Study/CSS 2020. 6. 2. 11:10