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 }

번역은 '전환'인데 마우스에 반응하는 콘텐츠? 라고 해야할 듯. 처음 접해보는 CSS라 억수로 신기방기하다. See the Pen transition by nilgi (@nilgi) on CodePen. transition: witdth 2s; // 2초간 가로 길이를 전환 :hover {width: 200px;} // 마우스가 올라갔을 때 가로 길이 200px 재미나구먼

See the Pen transform: rotate by nilgi (@nilgi) on CodePen. 2D 회전 transform: rotate에 X, Y, Z값을 줘 3D 회전. transform: rotateX(deg); X축 기준으로 회전 transform: rotateY(deg); Y축 기준으로 회전 transform: rotateZ(deg); Z축 기준으로 회전

See the Pen transform: matrix by nilgi (@nilgi) on CodePen. transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY); 모든 2D 변환 요소를 속기로 사용하는 거다. 순서가 참 거시기하다. 속기를 사용할 때는 순서를 지켜야 하고 모든 값을 다 적어야 한다.

See the Pen transform: skew by nilgi (@nilgi) on CodePen. • transform: skewX(deg); / X축 • transform: skewY(deg); / Y축 • transform: skew(Xdeg, Ydeg); See the Pen transform: skew 이미지 by nilgi (@nilgi) on CodePen.

See the Pen transform: scale by nilgi (@nilgi) on CodePen. • transform: scale(x값,y값) / x:가로 배수, y:새로 배수 • transform: scaleX(값), transform: scaleY(값) / x, y값 따로 사용가능 함. • 크기를 줄이는 값은 소수점 값 사용 / 0.2,0.4 요로케

See the Pen word-break by nilgi (@nilgi) on CodePen. • word-break: break-all; / 줄 바꿈에서 단어 분리 표시 • word-break: keep-all; / 유지해 같은 줄에 표시

See the Pen white-space by nilgi (@nilgi) on CodePen. • white-space: nowrap; / 줄 바꿈 없이 넘치는 내용에는 가로 스크롤이 생긴다. • white-space: normal; / 자동 줄 바꿈 • white-space: pre; / 와 비스무리 - - - 2021.05.01 씀 요즘 글을 쓰면서 오타가 엄청나게 많다. 심각할 정도다. 쓰고 읽고 수정을 반복한다. 글 하나 가지고 10번은 수정하는 것 같다. 몸에 무슨 문제가 생기건가... 이 글이 올라가는 7월 13일... 살아있는가?

분명 배웠는데 아무리 찾아도 흔적이 없다. 배웠으면 분명 글로 남겼을텐데 없다. 이상하네. 분명 배운 기억이 있는데... 분명 분명 분명 배웠는데 분명 See the Pen text-shadow by nilgi (@nilgi) on CodePen. text-shadow: 3px 3px 4px #333; / 글자와의 거리 X값 Y값 흐림 색; 마이너스 값 허용. text-shadow: 2px 2px 2px #000, 0 0 4px tomato, 0 0 10px #1E90FF; / 다중 그림자. 두가지 이상의 그림자 가능.

See the Pen background-origin by nilgi (@nilgi) on CodePen. • background-origin: border-box; / 테두리부터 배경 시작. 테두리가 배경을 가린다. • background-origin: content-box; / 컨텐츠부터 배경 시작. padding 값을 포함하지 않는다. • background-origin: padding-box; / 기본 값.