" Transform " ❑ 양수로 움직이면 오른쪽 & 음수로 움직이면 왼쪽 ⇨ ex) transform:translateX(100px); ⇨ ex) transform:translateY(-100px); ❑ 가상 움직임 ❑ margin과의 차이점 ⇨ margin: 공간 추가, 제거, 실체 움직임 ⇨ margin은 공간을 제거하거나 추가하기 때문에 다 따라 움직임 ❑ Z축은 반드시 원근감이 있어야 함 ⇨ perspective가 설정 되어 있어야 함 ❑ center에 놓는 방법 ⇨ transform:translate(-50%,-50%)} # scale ➡ # rotate ❑ 회전 ⇨ img 자체에서 perspective를 걸 수 있음 ❑ 원근감을 같이 쓸 때는 앞에다가 셋팅 해야함 ⇨ perspective ..
《 shadow 》 ❑ 둥근 테두리를 줄 때 border로 접근하면 안 됨! shadow로 접근! # text shadow ➡ shadow를 두 번 겹쳐 주고 싶을 때: 콤마(,)로 연결해서 주기 # box ❑ border의 안쪽도 바깥쪽도 둥글게 표현하고 싶을 때 .box { width: 200px; border: 1px solid #ccc; /* box-shadow: x y blur (size) ; */ box-shadow: 0 0px 0px 10px rgba(255,0,0,0.5); border-radius: 10px; /* border: 10px solid rgba(255,0,0,0.5); */ box-shadow: inset 0 0 10px rgba(0,0,0,.35); } ➡ border-ra..
position / z-index
《 position 》 ❑ 태그 종류: relative / absolute / fixed / sticky ⇨ 기본값: static ⇨ 각각의 기준으로 배치: left, right, top, bottom ⇨ 기준을 정할 때 사용하는 태그: relative ⇨ 억지로 움직여야 할 때 사용하는 태그: absolute ⇨ 기준 위치에서 안쪽으로 이동하면 양수 ⇨ 기준 위치에서 바깥쪽으로 이동하면 음수 # relative ❑ 기준이 자기 자신 (= 원래 위치) ⇨ 기준을 정할 때 설정! ❑ 가상으로 이동 (= 실체 이동X) ❑ left / right / top / bottom에서 민다고 생각하기 .relative{ position: relative; top: 50px; /* top: -100px; */ /* ma..
float
❑ 왼쪽/오른쪽 가로 배치 ❑ 지정방향으로 이동 ⇨ left / right / none ❑ 플롯에 크기는 내용의 크기와 똑같이 자동 인식 ⇨ 크기(=너비)가 없는 인라인 요소도 float:위치를 주면 크기가 잡힘 ⇨ display:block과는 같이 쓸 필요가 없음 ⇨ 플롯이 적용된 요소안의 clear은 적용할 필요가 없음 # clear ❑ 달려드는 속성 해지: 뒤따라 오는 요소들이 플롯에 걸린 요소를 향해 달려듬 .class:after{ content:''; clear:left; display: block; } ➡ clear:left / right / both (=왼쪽 or 오른쪽 둘 다 해지) ➡ content:' '으로 공백을 줌 ➡ clear는 block요소만 적용 (=displ..