CSS9 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] 선택자 활용하기 .parent1 .parent__child1 { /* some style */ } - 'parent1에 속해 있는 parent__child1(결과적으로는 parent__child1)에 스타일을 적용할 거야!'라는 의미입니다. .parent1, .parent__child1 { /* some style */ } // , 다음 붙여도 되고, 띄어쓰기를 해도 상관 없습니다. - parent1과 parent__child1 각각에게 스타일을 적용할 거야! - parent / child와 상관없이 그냥 동일한 스타일을 적용하고 싶을 때 쓰면됌. 동일한 스타일이 많이 적용된다면 차라리 따로 class naming을 하는 게 낫다. .parent__child1 h1 { /* some style */ } - parent_.. 2019. 5. 17. 이전 1 2 3 다음
