728x90 반응형 Transform4 [CSS] Transform&Transition 2탄 CSS 강의 Ep11_2 - Transform&Transition 2탄 | Transition | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요? (youtube.com)transition에 대해 살펴보기전환이라는 의미. 가로 세로 200px인 div 태그마우스가 hover 됐을 때 가로세로 200px 을 가로세로 400px 로 변경하고 싶은 경우, transition을 사용하면 스무스하게 변형이 가능해진다.사용하는 방법 - transition 속성 이용하기transition-property= 속성 설정 transition이 실행될 때 타이밍 나타내기 단축 속성 사용하기transition 실습하기 box1에 마우스를 올렸을 때 사이즈를 200px 로 하기.transition을 적용할 경우bo.. 2024. 6. 29. [CSS] Transform&Transition 1탄 CSS 강의 Ep11_1 - Transform&Transition 1탄 | Transform | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요? (youtube.com)Tansformtransform 사용 방법X 축으로 div 태그 20px 이동. 특수한 함수를 통해서 다양한 효과 나타낼 수 있음.다양한 효과 skew 함수 = 지정한 각도만큼 왜곡.실습 예시기본 세팅.- 박스 지정스타일링.translate 실습X 축으로 20px 이동한 거 확인 가능.좌측으로 이동하고 싶은 경우 음수 - 를 붙여서 적용시켜주면 됨.이렇게 넣어주면 한 꺼번에 X 좌표, Y 좌표 이동을 할 수 있다.scale 실습scale 안에는 숫자를 넣어주면 됨.2를 넣어줬을 경우,가로가 2 배가 된다.한 50% 줄이고 싶은 .. 2024. 6. 29. [CSS] transform의 사용 transform transform 속성은 요소를 2D 또는 3D 공간에서 변형하는 데 사용됨.transform 기능은 다음과 같습니다translate(): 요소를 이동시킵니다.rotate(): 요소를 회전시킵니다.scale(): 요소의 크기를 조절합니다.skew(): 요소를 기울입니다.matrix(): 위의 변형을 결합하여 변형합니다.사용 예시 transform: translateY(-50%);transform: translateY(-50%);는 요소를 수직으로 가운데 정렬하는 데 사용됨. 이를 위해 position: absolute; 또는 position: fixed;를 함께 사용하여 기준 위치를 설정한 후,top: 50%;와 함께 사용된다. 요소가 부모 요소의 높이의 50% 지점에 위치한 후,자기 .. 2024. 6. 27. [생활코딩] CSS 수업 정리 (14) 변형 엘리먼트의 크기(조절), 엘리먼트의 회전 또는 비틀기 h1이 화면 전체를 쓸 경우, 트랜스 폼 효과의 결과를 보기 어렵다. display:inline-block; 사용 transform 효과들 1 -> 2 transform:scaleX(2) 두 배 했다는 뜻 Hello Transform! h1 { background-color: aqua; /* 텍스트 사이즈 */ color: white; display: inline-block; padding: 5px; /* 폰트사이즈 3배 */ font-size: 3rem; margin: 100px; transform: scaleX(2); } 0.5 1/2 즉, 반으로 크기를 줄인 것 X 의미 : X축으로 변형 일어난 것 y 축 또한 .. 2023. 7. 23. 이전 1 다음 728x90 반응형
