반응형 WEB/CSS41 [CSS] ::before & ::after 가상 요소 설명 ::before 요소 내용 앞쪽에 새 컨텐츠를 추가. ::after 요소 내용 끝에 새 컨텐츠를 추가. 2023. 10. 14. [CSS] z-index z-index z-index로 Z축 정렬을 할 수 있어요. 숫자가 클 수록 위로 올라옵니다. (position에서의 z-index랑 똑같이 생각하시면 됩니다.) .item:nth-child(2) { z-index: 1; transform: scale(2); } => z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다. 2023. 10. 14. [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. 이전 1 ··· 5 6 7 8 9 10 11 다음 반응형