css3 CSS: Grid 기본속성 (수정중) grid는 flex처럼, 유연하게 이용할 수 있는 구조이다. 이러한 속성들이 있는데, 2020. 6. 8. CSS: 스프라이트 이미지 적용하기 html에서 이미지를 이용하는 경우는, image를 직접 연결해주는 것과, background를 이용하는 것이 있다. 관리자가 바꿔야하는 이미지의 경우에는 image로 적용하고, 사이트를 만들때 필요한 이미지는 background에 넣는다. (바꿀필요가 별로 없는 것) css에서는, background: url(~.jpg) no-repeat; 를 이용하여 이미지를 적용시키고, background-position: -30px -39px; 이걸로 x축과 y축의 좌표를 설정해준다. html이 이럴때, css에서는 이렇게 적용할 수 있다. 좌표는 이미지를 간편하게 자를수있는 사이트도 있는데 까먹었다.. 일단 포토샵으로 할때는, a의 좌표 -> 빨간영역의 좌표만큼 -(마이너스) -> -30px -39px b의 좌.. 2020. 6. 5. CSS: 애니메이션 적용하기 애니메이션은 무언가를 움직이게 해줄수 있는 효과이다. html에는 박스를 하나두고, style에서 작성한다. @keyframes ani { from { transform: translate(0,0) } to { transform:translate(300px,0) } } @keyframes 애니메이션이름 { } 괄호안에는 from,to도 가능하지만 0% 30% 70% 100%처럼 구간설정도 가능하다. transform에는 적용할 효과를 작성해주면 되고, translate(이동)외에도 rotateY,X(회전), opacity, color등 다양하게 지정이 가능하다. 적용을 할 때는 .box { width:100px; height:100px; background-color:darkseagreen; animat.. 2020. 5. 14. 이전 1 다음
