코딩공부

See the Pen transition 속기 by nilgi (@nilgi) on CodePen. transition: width 2s ease-in 1s; transition: property(속성), duration(시간), timing-function(속도), delay(지연);

See the Pen transition+transform by nilgi (@nilgi) on CodePen. .box { transition: width 2s, height 2s, transform 3s; / 전환 : 가로 2초, 세로 2초, 변형 3초 } .box:hover { / 마우스를 올렸을 때 width: 200px; / 가로 200 height: 200px; / 세로 200 transform: rotate(360deg); / 변형: 회전 360도 }

See the Pen transition-delay by nilgi (@nilgi) on CodePen. transition-delay: ns(n초) / 전화의 시작과 끝에 지연시간을 추가합니다. .box { transition: width 3s; / 가로 길이를 3초간 transition-delay: 1s; / 전환 지연 시간을 1초 } .box:hover { / 마우스를 올렸을 때 width: 250px; / 가로 길이 250px }

See the Pen transition-timing-function by nilgi (@nilgi) on CodePen. transition-timing-function: linear; / 똑같은 속도 transition-timing-function: ease; / 느림 - 빠름 - 천천히 (기본값) transition-timing-function: ease-in; / 느린 시작 transition-timing-function: ease-out; / 느린 끝내기 transition-timing-function: ease-in-out; / 시작과 끝을 느리게

See the Pen transition 실습1 by nilgi (@nilgi) on CodePen. .box1 { width: 200px; // 가로 200 height: 35px; // 세로 35 overflow: hidden; // 넘치는 내용 숨기기 transition: width 4s, height 3s; // 가로 4초, 세로 3초 } .box1:hover { // box1에 마우스를 올렸을 때 width: 350px; // 가로 350 height: 270px; // 세로 270 }

See the Pen transition by nilgi (@nilgi) on CodePen. .box1 {width: 50px; transition: width 2s;} / 가로 70px, 전환 가로 길이를 2초동안; .box1:hover {width: 200px;} / 마우스가 올라갔을 때 가로 길이 200px

See the Pen transform: rotate by nilgi (@nilgi) on CodePen. transform: rotateX(deg) : X축 기준 3D 회전 transform: rotateY(deg) : Y축 기준 3D 회전 transform: rotateZ(deg) : Z축 기준 3D 회전

See the Pen transform: matrix by nilgi (@nilgi) on CodePen. transform: matrix(scaleX, skewY, skewX, scaleY, translateX. translateY); 속기를 사용할 때는 순서대로 써야하고 어떤 값도 빼 먹으면 안 된다.

See the Pen transform: skew by nilgi (@nilgi) on CodePen. tranform: skewX(deg); X축을 따라 기울이기 tranform: skewY(deg); Y축을 따라 기울이기 tranform: skew(Xdeg, Ydeg);

See the Pen transform: scale by nilgi (@nilgi) on CodePen. • transform: scale(x,y) / 크기 배수 변경 • (2,3) 가로 2배, 세로 3배 / (0.5,0.5) 가로 0.5배 세로 0.5배 • transform: sclaeX(값), transform: sclaeY(값) / X, Y값 따로 쓸 수 있음

See the Pen transform: rotate by nilgi (@nilgi) on CodePen. transform: rotate(수치deg); / 회전값, 마이너스 값 허용

See the Pen tranform: translate by nilgi (@nilgi) on CodePen. · transform: translate(x,y); / 변환: 위치 이동하기. 마이너스 값 허용.

See the Pen word-break by nilgi (@nilgi) on CodePen. word-break: break-all; 줄 바꿈에서 분리 word-break: keep-all; 단어 철자 합치기, 유지

See the Pen text-overdflow by nilgi (@nilgi) on CodePen. text-overflow: clip; overflow: hidden 값 그냥 자르기 text-overflow: ellipsis; overflow: hidden 값 '...' 으로 표시

See the Pen white-space by nilgi (@nilgi) on CodePen. white-space: nowrap; 줄 바꿈 없이 가로 스크롤 white-space: normal; 자동 줄 바꿈 white-space: pre; html에 쓴 그대로 표시 pre와 같은 효과

See the Pen box-shadow by nilgi (@nilgi) on CodePen. box-shadow: 0 0 0 0 색 / x값 y값 흐림 확장 색 box-shadow: 2px 5px 10px 0 #ccc, 0 7px 10px 0 #ccc; / 다중 그림자 사용 가능

See the Pen text-shadow by nilgi (@nilgi) on CodePen. text-shadow: 3px 3px 4px #1E90FF; / x축 y축 흐림 색 text-shadow: 2px 2px 2px #000, 0 0 4px tomato, 0 0 10px #1E90FF; / 다중 그림자