반응형 CSS31 [CSS] transform transform 말 그대로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형시킬 때 사용한다. 1. transform / rotate : 요소를 회전시킬 수 있습니다. transform: rotate( angle ) /* angle이 양수나 음수냐에 따라 시계방향 반시계방향으로 회전한다 */ transform: rotateX( angle ) /* 가로축을 기준으로 회전한다. */ transform: rotateY( angle ) /* 세로축을 기준으로 회전한다. */ 2. transform / translate : 요소를 이동시킬 수 있습니다. transform: translateX( 50px ) /* 오른쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 왼쪽으로 이동합니다. */ tra.. 2023. 10. 14. [CSS] hover & transition & transition-delay /*BUTTON*/ .btn { width: 130px; padding: 10px; border: 2px solid #333; border-radius: 4px; color: #333; font-size: 16px; font-weight: 700; text-align: center; cursor: pointer; box-sizing: border-box; display: block; transition: .4s; } .btn:hover { background-color: #333; color: #FFF; } 다음과 같은 코드가 있다. 다음 코드의 뜻은 다음과 같다. 버튼 위에 마우스를 올려놓으면, 버튼 색깔을 0.4s에 걸쳐 변경하라. hover는 마우스 커서가 해당 오브젝트 위에 있을 때라는 뜻이다. .. 2023. 10. 12. [CSS] cursor : position 우리가 뭔가를 클릭하려고 할 때, 손가락 모양으로 커서가 바뀌는 경우가 있다. 나는 그 전까지만 해도 버튼이나 링크 연결된 곳 위에 커서 올리면 자연스레 바뀌는 줄 알았다. 하지만, 아니었다. cursor: pointer;를 사용해줘야 한다. 2023. 10. 12. [CSS] position position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. 1. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. 2. position: rel.. 2023. 10. 12. 이전 1 ··· 3 4 5 6 7 8 다음 반응형
