반응형 전체 글295 [CSS] outline & focus outline "outline" 속성은 테두리 속성(border)와 같은 속성을 가지지만, 테두리 선 외곽에 위치하며, 자리를 차지하지 않습니다. See the Pen position-sticky by mirian (@anananananancatdeveloper) on CodePen. none : 아웃라인 없음. hidden : 아웃라임 감춤. dotted : 둥근 점선 dashed : 긴 점선 solid : 직선 double : 가는 두줄 groove : 홈파인 3D 입체 라인. 아웃라인이 파여진 입체로 음각 처리. ridge : 솟아오른 3D 입체 라인. 아웃라인이 솟아오른 입체로 양각 처리. inset : 3D 음각 입체. 요소가 내려가 보이도록 아웃라인 그림자 효과 outset : 3D 양각 입체.. 2023. 10. 14. [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. 이전 1 ··· 63 64 65 66 67 68 69 ··· 74 다음 반응형
