728x90 반응형 CSS/CSS 응용30 다양한 css 애니메이션/레이아웃 참고 사이트 https://freefrontend.com/css-code-examples 2022. 8. 23. 로딩 skeleton loading See the Pen Untitled by gahyun (@gahyun) on CodePen. 2022. 8. 22. [em]반응형을 좀 더 편하게 할 수 있는 폰트사이즈 단위/쉽게 알아보기 em 은 상위 요소가 기준이 되는 단위 하단 예시를 보면 1줄에 4개의 p를 넣고 4개씩 1개의 박스로 묶었다 첫번째 박스부터 순서대로 16px / 20px / 30px / 40px 이고 왼쪽부터 순서대로 0.5em / 1em / 1.5em / 2em 이다 모두 폰트 사이즈가 다르다 16px 기준의 1em 이 16px 이고 20px 기준의 1em 은 20px 이다 박스별로 기준 크기를 정해두고 반응형작업시 박스별 폰트사이즈만 조정해주면 하단의 딸려있는 아이들의 폰트사이즈는 상위에 맞춰 자동 조절된다!! 편하게 반응형 조절이 가능하다 See the Pen Untitled by gahyun (@gahyun) on CodePen. 2022. 8. 10. css를 이용한 focus 효과 애니메이션 포커스되는 영역을 따라다니는 애니메이션 효과입니다. //현재 선택된 input 을 가져옵니다 var cur = e.currentTarget.id; var cur = $("#" + cur); //css의 width height 값을 가져오고 var curWidth = cur.css("width"); var curHeight = cur.css("height"); //offset을 통해 해당 위치를 가져오면 손쉽게 만들 수 있습니다 var top = cur.offset().top; var left = cur.offset().left; See the Pen focus by gahyun (@gahyun) on CodePen. 2019. 12. 12. 이전 1 2 3 4 5 ··· 8 다음 728x90 반응형