项目作者: SeonHyungJo

项目描述 :
CSS I wanted it :yum:
高级语言: HTML
项目地址: git://github.com/SeonHyungJo/Do-you-know-CSS.git
创建时间: 2018-09-02T05:39:28Z
项目社区:https://github.com/SeonHyungJo/Do-you-know-CSS

开源协议:MIT License

下载


CSS 정리하기

:one: Chapter 1 Flex

간단하게 상하좌우를 같은 비율을 유지하면서 배치를 할 수 있으며, 브라우저 크기에도 반응형으로 변화를 하여 반응형에 사용되지 좋을 것으로 생각이 된다.

그러나 Repaint가 일어나서 성능에 안좋다는 글도 있다.

:arrow_forward: 바로 이동하기


:two: Chapter 2 Grid

모양은 비교적 Table과 비슷하다. 일정한 비율 또는 크기를 유지하는 곳에 사용이 될 것으로 생각이 되고, 잘만 사용하면 Flex대용으로 가능할 것 같다.

:arrow_forward: 바로 이동하기


:three: Chapter 3 Transition

흔히 사용되는 곳이 메뉴일 것이라고 생각이된다. 메뉴에서 :hover를 했을때 Smooth하게 내려오게 하는 역할을 한다. 이외 여러곳에 부드럽게 커지거나 줄어드는 곳에 사용이 된다.

:arrow_forward: 바로 이동하기


:four: Chapter 4 Table

3개월만에 드디어 다시 CSS를 잡아보았다. 예전이나 지금도 사용하는 분들이 많은 것으로 알고 있는 Table에 관해서 간단하게 나마 해보면서 정리를 해보았다.

:arrow_forward: 바로 이동하기


:five: Chapter 5 Animation

드디어 작년 FEConf후에 한번 정리를 해보자 했던 애니메이션을 추가하였습니다. 아직은 전부를 정리하지 못하여 추가 수정 예정입니다.

:arrow_forward: 바로 이동하기


Reference