개발언어 기록/CSS11 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. box-sizing: border box 사용법 box-sizing: border box은 언제 사용하는 것일까? box-sizing: border box는 기존 box에 padding값을 줄 경우, 안의 contents의 길이가 줄어들지 않게 해줍니다. 예시) width:300px, padding-left: 20px인 경우 (right/top/bottom 상관없음) padding-left로 20px만큼 차지하기 때문에 contents가 사용할 수 있는 width는 280px로 줄어들게 됩니다. 그때 html/css가 하는 역할이 처음 설정한 box의 크기를 유지시켜줍니다. 따라서 browser에서 box의 크기를 300px로 유지할 수 있게 되고, padding값까지 더해져서 box의 전체 width는 320px이 됩니다. 좀 복잡하게 느껴지신다면 .. 2019. 5. 19. 이전 1 2 3 다음
