본문 바로가기

모든 기록47

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.
clone coding 1 1. 계획 1) nomad coder에서 진행했던 예시를 가지고 clone coding을 한다. 2) 먼저 어떻게 구성되어있는지, 공통적인 부분들은 어떤 것인지 파악한다. 3) 분석한 것을 바탕으로 html을 작성한 후, css를 하나하나 해 나간다. 4) html 작성 시 공통된 부분을 올바른 naming을 한다. 추가 part 1. friends list에 (horizontal) scroll bar 추가하기 2. menu icon에 dropdown형식으로 [edit | delet]를 추가하기 3. mainone page에 footer navigation bar의 animation을 추가하기 - :hover시에 좌측의 '다이아몬드' icon이 한 바퀴 도는 동안 줄어들어있던 nav bar가 늘어나기 4.. 2019. 5. 23.
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.

티스토리툴바