이게 무슨 일이야!

회사에서 대시보드를 운영 유지보수할 일이 있는데Edge 의 IE(Internet Explorer 브라우저) 모드와 Chrome 브라우저를 동시에 만족하면서 복합적인 화면을 구현해야 했다.  기존 화면은 float:left 와 clear:both 로 모든 레이아웃이 되어있었는데 새로 만드는 화면은 좀 더 깔끔했으면 했다. 그래서 grid 를 사용하기로 했다.    출처 : https://caniuse.com/  IE 타겟으로 grid 나 flex 를 생각 안해봤었는데 의외로 flex 도 되긴 된다. 최신 기능이 완벽하게 지원은 안되지만  이번에 grid 를 Edge 의 IE 호환 모드로 작업해보니gap, repeat 같은 웬만한 편리한 최신 함수들은 작동되지 않았고, 별도의 처리를 해주어야 했다.그래서 정..

1. HTML에서는 특정 문자들이 태그나 속성을 정의하는 데 사용되기 때문에, 이러한 문자들을 내용으로 표시하기 위해 엔티티 코드를 사용합니다. 2. 엔티티 코드를 사용하면 HTML 문서에서 특수 문자를 안전하게 표현할 수 있어, 예를 들어 `

2D 인데 마우스 인터랙션에 따라서 약간 3D 처럼 반응보이게 하는 효과 이름을 Tilt 라고 하네요 Tilt + Frost Glass 효과 => 글래스모피즘 GlassMorphism 유행이 지나가고 있는 중인지 모르겠지만 한번쯤 포폴에 넣고 싶은 관계로 자료조사중!! https://gijsroge.github.io/tilt.js/ Tilt.js - Parallax tilt effect for jQuery Tilt.js, a small easy to use parallax hover tilt effect for jQuery. gijsroge.github.io See the Pen Glassmorphism Icon Buttons by Taylon, Chan (@tin-fung-hk) on CodePen. ..

원리는 이곳에서..!!! https://www.damiisdandy.com/articles/create-infinite-auto-scroll-animation-with-pure-css/ Create infinite auto-scroll animation with pure CSS This guide is to help you understand the concept of how Infinite auto-scroll animations you see on websites like JamStack work, and how to implement them with just CSS!. www.damiisdandy.com 전체소스 .scroll-parent { position: relative; width: 100..

HTML 삽입 미리보기할 수 없는 소스 이미지 출처: https://dribbble.com/shots/14685854-Frosted-Glass-Card Frosted glass ui design, glassmorphism ui 로 볼 수 있는데 CSS 에서는 이렇게 간단히 구현된다! (투명한 부분 배경!) .topbar { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }