css3 [Css] - Transformation , 트랜스폼 Transform 웹 요소의 위치를 이동시키거나 크기 조절 및 회전시킬수 있는 강력한 기능 3d 처럼 표현가능 적용시켜도 박스 요소가 변형되지않는데 일종의 3d transformation 이기 떄문이다 트랜스폼을 적용시켜도 다른 요소에는 영향을 끼치지않는다 웹사이트의 특정영역에서 오브젝트의 각도를 튼다거나 , 크기조절을 한다거나 , 위치변경을 한다는 등 속성을 변경하는 속성 img { border: 1px solid black; transition: all 2s ease-in-out; } img:hover { transform: scale(0.5) rotateZ(90deg); border-radius: 50%; } rotate, scale rotate(45deg) : 입력한 각도만큼 회전. 음수도 입.. 2021. 10. 31. [Css] - transition (트랜지션) 정리 Transition (트랜지션) 어떠한 변화하는 과정을 보여주는 것 요소의 속성을 서서의 다른 상태로 변화하는 애니메이션을 만드는 방법 state (ex. :hover , :active ...)가 없는 요소에 붙는게 좋다 transition은 state에 따라 바뀌는 property를 갖고 있으면 사용된다 트랜지션은 뿌리(:root)에 선언한다. 액션을 나눠서 주려면 콤마를 이용해서 따로 준다. See the Pen Untitled by 정민희 (@alsgml1640) on CodePen. property, duration .transition { transition-property : width; transition-duration : 2s; transition-timing-function : line.. 2021. 10. 31. Flexbox와 Grid * 유투브에 구독중인 1분코딩님의 CSS Flexbox와 CSS Grid, 한번에 정리! 영상을 보면서 정리한 글 flex 기본정리 컨테이너에 display : flex; 를 지정 flex-direction : 자리 설정 ,컨테이너에 디스플레이 설정 후 같이 설정 ( row, column ) flex-wrap : 창이 줄어들때의 고정 (wrap ) justify-content : 지금 현재 축 방향으로 정렬 ( 오뎅꼬치 생각하기 ) align-item : 현재 축의 수직 방향을 정렬하는 스타일 (flex-end, flex-start ,center) align-content : flex-wrap이 wrap 인 경우에 사용가능 flex-grow : 신축성있게 늘려주는 속성 .. 2021. 9. 24. 이전 1 다음 728x90 반응형