개발언어 기록20 css grid 조금 더 알아보기 1 ▼▽ Grid가 처음이신 분들은 이전 포스팅을 한번 보시고 오시길 추천드립니다. :) ▼▽ 2019/05/30 - [IT기록 - 개발자/CSS] - css grid 세상에서 가장 쉽게 이해하기 css grid 세상에서 가장 쉽게 이해하기 기존에 layout은 table로 주로 만들었었고, 이제는 grid를 통해서 좀 더 편리하게 layout을 짤 수 있게 되었습니다. Grid layout은 웹 사이트 디자인의 기본 요소이기도하면서 웹사이트를 만드는 데에 가장 쉬운.. saeatechnote.tistory.com 1. fr grid 관련된 것들을 보다 보면 정말 많이 보이는 단위입니다. 대체 fr이 무엇을 의미하는 것일까요? fr은 fraction의 약자로, '분수'라는 뜻을 가지고 있습니다. grid c.. 2019. 5. 31. css grid 세상에서 가장 쉽게 이해하기 css grid는 css로 layout을 만들 때 가장 편리하고 유용한 방법입니다. grid는 행과 열을 동시에 다룰 수 있기 때문에, grid를 사용하면 grid layout 그 자체뿐만 아니라 grid내부의 요소(각 칸)들도 함께 컨트롤할 수 있습니다. 각 속성들에 따라 다르기도 하지만 grid속성 자체를 사용할 수 있는 브라우저가 점점 더 많아지고 있기에 grid 기능을 익히는 것은 매우 유용합니다. CSS Grid 기초 1. 두가지 핵심 요소 : grid-container / grid-item grid-container : 선, item이 모인 하나의 grid | item : 선 안의 내용/ 각각의 칸 css grid는 table(표)와 비슷합니다. container은 '선'을 의미합니다. ite.. 2019. 5. 30. css animation 총정리 (transition, transform, translate, animation, @keyframes) 이름과 효과가 비슷비슷해서 사용할 때마다 헷갈리고 막막해서 '나' 그리고 나와 같은 사람들을 위해 총정리해보았습니다. animation ⊃ @keyframes ⊃ transition = transform ⊃ translate animation이 있어야 @keyframes를 사용할 수 있고, @keyframes안에 transition과 transform에 대한 다양한 효과들을 디테일하게 설정할 수 있으며, translate는 단순 transform method 중 하나로 x축, y축에 대한 이동을 나타내는 것뿐입니다. (animation은 전체 효과들을 어떻게 사용할지, @keyframes는 animatino이 실행되는 동안 어떤 타이밍에 어떤 효과를 줄지 더 디테일하게 설정이 가능하게 하고 좀 더 자연스.. 2019. 5. 26. css animation 1. CSS에서 animation이란? css에서 animation이란, 하나의 element가 다른 상태로 서서히 변하게 하는 것을 말합니다. 다양한 속성들을 사용해서 원하는 변화를 줄 수 있습니다. animation을 사용하기 위해서는 우선적으로 키프레임(keyframes)을 정의해야 합니다. keyframes란 언제 어떤 animation을 줄지 설정하는 것을 말합니다. 2. @keyframes 사용법 @keyframes animation-name{ } 형식으로 작성합니다. 여기서 'animation-name'속성은 해당 요소(element)와 keyframes를 연결하는 역할을 합니다. ex) @keyframes widthChange{ from { width:100% } 선방향 animation-.. 2019. 5. 21. 이전 1 2 3 4 5 다음
