CSS60 최신 CSS로 할 수 있는 것들 최신 CSS 문법들은 여러 가지 들을 제공합니다. 물론, 하위 버전의 지원이 어느정도 되어야 하기 때문에 fallback으로 사용하거나, can I use 사이트에서 확인 후에 사용하는 것도 좋은 방법일 것입니다. 최근에는 media query로 체크해서 실용적으로 사용할 수 있는 여러 대안들도 나왔습니다. 따라서 ecma script의 최신 문법에 babel이 존재하듯이, css도 최신 문법에 따라서 작성할 수 있는 환경을 만들어서 더 좋은 아이디어를 낼 수 있는 방법을 모색하는 것 또한, 프론트엔드 개발자의 몫입니다. :is 선택자 기존에 다음과 같이 작성하던 코드를 개선 할 수 있습니다. /* 기존 */ .main_contents h1, .main_contents h2, .main_contents .. 2022. 10. 24. 좋은 뷸렛(Bullet) 컴포넌트 만들기 위와 같은 마크업이 있을 때 제목의 중간에 사진이 위치하게 되겠죠. 그리드를 사용해서 쉽게 만들어볼 수 있고, scss nesting을 사용해서 컴포넌트 형태로 구성해볼 수 있겠네요. 얼핏 보면 플렉스박스를 사용하여 정렬을 처리할 수 있는 것처럼 보입니다. 아이콘이 제목보다 작으면 두 개를 모두 감싸고 플렉스박스로 세로로 정렬하면 됩니다. 그러나 아이콘이 더 크면 제목과 사본 사이에 어색한 간격이 생깁니다. 운 좋게도, CSS Grid는 열과 행을 모두 직관적으로 나눌 수 있습니다. 완료 코드는 다음과 같습니다 : ) See the Pen Bulletproof Flag Component by YoungMinKim (@oinochoe) on CodePen. 출처 : https://www.jayfreesto.. 2022. 10. 3. 전처리기 Haml, Pug, Slim, Scss, Stylus 사용해보기 요즘은 webpack, vite 등의 다양한 번들러들을 사용해서 개발을 하고 계시는데요. 그 안에서 사용할 수 있고, 단독으로도 사용할 수 있는 각종 전처리기들에 대한 문법들을 정리 해보았습니다. Haml - For Loop See the Pen Loop with Haml by YoungMinKim (@oinochoe) on CodePen. Haml - While Loop See the Pen While Loop in Haml by YoungMinKim (@oinochoe) on CodePen. Haml - Each Loop See the Pen Each Loop with Haml by YoungMinKim (@oinochoe) on CodePen. Pug - For Loop See the Pen Loo.. 2022. 9. 4. 여러개의 Animation을 동시에 적용하고 싶다면? getAnimations() 여러개의 애니메이션을 동시에 적용하고 싶을 땐 어떻게 하시나요? div { animation: x 2000ms infinite alternate ease-in, y 2000ms infinite alternate ease-out; } @keyframes x { from { transform: translateX(0vw) } to { transform: translateX(90vw) } } @keyframes y { from { transform: translateY(0vh) } to { transform: translateY(90vh) } } 이렇게 중첩하게되면 똑같은 2000ms 시간 내에 하나만 적용되어야 하므로 한 가지 애니메이션만 작동하게 됩니다. 하지만, 최신 브라우저에서 사용되는 Web Anim.. 2022. 4. 5. 이전 1 2 3 4 ··· 15 다음
