개발자연습노트

▲ 오늘 만들어볼 간단한 애니메이션   transform을 쓰면 3D 스타일 회전이 가능합니다. transform : rotateX(180deg);transform : rotateY(180deg);transform : rotateZ(180deg);  각각 X,Y,Z축 회전이 가능합니다. X축은 가로줄입니다. 그래서 rotateX()는 가로줄을 축으로 회전이 들어갑니다.뭔소린지 모르겠으면 연필을 모니터에 가로로 대보십시오.그리고 그 연필을 돌돌 말아봅니다. 그게 X축 회전, rotateX() 입니다.아니면 직접 CSS로 박스나 글자를 rotateX() 줘보면 알 수 있습니다.  Y축은 세로줄입니다. 모니터에 연필을 세로로 놓고 돌돌 말면 그게 Y축 회전입니다. Z축은 여러분 얼굴과 모니터 간의 가상의 선을..

간단한 Grid 레이아웃 만들기  Grid 레이아웃은 말그대로 격자를 만드는 레이아웃입니다.  설명하다  설명하다 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 10px;} 부모에 display : grid를 주면 자식 들은 전부 격자처럼 진열됩니다. grid-template-columns는 격자의 열 너비와 갯수grid-template-rows는 격자의 행 높이와 갯수를 설정하는 속성입니다.fr이라는 단위는 몇배만큼 차지할지를 나타내는 값입니다.그런데 격자를 왜 만드냐고요? 격자..

transform 관련 CSS 속성들  설명하다 .box { transform : rotate(10deg); transform : translate(10px, 20px); transform : scale(2); transform : skew(30deg); /*transform 두개 이상을 한꺼번에 쓰려면*/ transform : rotate(10deg) translateX(30px);}transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용합니다.본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 됩니다.rotate는 회전, translate는 좌표이동, scale은 확대축소, skew는 비틀기 입니다. 특히 애니메이션을 동작시킬 때 transform 속성을..