목록WEB(웹)/css (6)

Hi

css @keyframes

@keyframes애니메이션 효과를 진행 속도나 단계를 직접 지정할 때 사용합니다. 13-02 .box { background-color: blue; width: 50px; height: 50px; position: absolute; top: 20px; left: 30px; } @keyframes shake-box { 0% { transform: translateX(-20px); background-color: blue; } 50% { transform: translateX(10px); background-color: yellow; } 100% { transform: translateX(-20px); background-color: blue; } } .box:hover { animation: shake-..
WEB(웹)/css 2018. 10. 27. 08:22
z-index 안될 때

z-index 를 설정하면서 안된다면, 그 위의 부모들의 z-index를 건드리면 된다. 부모가 z-index: 100 이고,자식이 z-index: 1 이라도 자식이 위에 있다. 자식은 z-index가 100 + 1 = 101이 되는듯하다.
WEB(웹)/css 2018. 10. 23. 21:31
align-content

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. flex-wrap: wrap 일 때, 다음줄 간격을 조절하는 기능 출처 : https://www.w3schools.com/cssref/css3_pr_align-content.asp
WEB(웹)/css 2018. 8. 19. 01:09
background-clip

어디까지 background로 할지 범위를 설정한다 ex)background-clip: content-box
WEB(웹)/css 2018. 7. 15. 16:16
animate.css

animate.css 라는 사이트가 있다. https://daneden.github.io/animate.css/ 여기서 가져온 코드를 animate.css 라는 파일을 만들어 html에 링크를 걸어준다. link(href='/stylesheets/animate.css' rel='stylesheet') 사용방법은 if ($this.is('[selected]')) { $this.find('.icon').removeClass('animate bounceIn'); $this.removeAttr('selected'); } else { $this.find('.icon').addClass('animate bounceIn'); $this.attr('selected', ''); }클래스를 add 하고 remove하는 식..
WEB(웹)/css 2018. 7. 6. 11:17
css clearing

* box-sizing: border-box body padding: 0 margin: 0
WEB(웹)/css 2018. 7. 6. 10:59
이전 Prev 1 Next 다음