CSS (40) 썸네일형 리스트형 [번역] Mobile First Design vs Desktop First Design 원문 : https://ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/ The State Of Mobile First and Desktop First - Ahmad Shadeed Is mobile first or desktop first still relevant today? An article that explores both with pros and cons for each. ishadeed.com 모바일 퍼스트 모바일 버전 css를 먼저 작성한 다음 더 큰 버전을 작성 .section { padding: 2rem 1rem; } @media (min-width: 62.5rem) { .section { display: flex; al.. [번역] min(), max(), clamp() CSS 함수 원문 : https://ishadeed.com/article/css-min-max-clamp/ min(), max(), and clamp() CSS Functions - Ahmad Shadeed Learn about CSS comparison functions min(), max(), and clamp() ishadeed.com 브라우저 지원 2020년 8월 이후로 min, max, clamp 함수는 모든 메이저 브라우저에서 지원함. 안타깝게도 ie에서는 못씀 CSS Compare 함수 CSS 사양(CSS spec)에 따라 여러 값을 비교하고, 사용한 함수를 기반으로 여러 값 중 하나를 나타낸다. Min() 함수 min() 함수는 하나 이상의 쉼표로 구분된 연산을 포함하며 가장 작은 값을 나타낸다. 보통.. [React, framer-motion] 언마운트 대상 DOM 요소에 애니메이션 적용하기 with AnimatePresence 아래와 같은 360도 캐러셀을 개발하려면, 자바스크립트를 사용해아 한다. HTML 삽입 미리보기할 수 없는 소스 주로 react-slick을 사용할 것이다. 이러한 완성형 라이브러리들의 단점은 다음과 같다. UI 기능이 필요할 때마다 하나하나 깔다보면 라이브러리 갯수가 많아진다 masonry calendar carousel date-picker 등등... 스타일 커스터마이징이 어렵다. JS는 몇줄 안되는데 파일 하나가 CSS 조정하는데 다 쓰인다. (ex: MUI) 본인의 경우 해당 링크의 캐러셀과 유사하지만, 가운데로 오면 크기도 바뀌고, 컴포넌트도 바뀌는 캐러샐을 구현할 일이 있었다. 이런 캐러셀을 React-Slick만으로 구현하는건 쉽지 않을 것이다. 또한 이런 라이브러리들에 강제로 컴포넌트를 끼.. [CSS] absolute positioning을 grid로 대체하기 원문 : https://ishadeed.com/article/less-absolute-positioning-modern-css/ Less Absolute Positioning With Modern CSS - Ahmad Shadeed How to use use position:absolute less by leveraging modern CSS ishadeed.com TL;DR grid display : contents aspect-ratio position : absolute를 활용한 카드 오버레이 구현 방식엔 전혀 문제가 없음 Title Subtitle display: grid를 활용한 카드 오버레이 display : grid를 사용해 해당 레이아웃을 구현해 보겠음. 먼저 아래와 같이 CSS를 적용함 .. [CSS] 레이아웃 Wrapper 만들기 웹 사이트는 콘텐츠를 쉽게 읽을 수 있는 너비로 감싸거나(wrapping) 포함(containing)해야 합니다. 이를 달성하기 위해 래퍼 또는 컨테이너라고 하는 것을 사용할 수 있습니다. CSS에서 래퍼는 여러 방식으로 구현할 수 있으나, 이로 인해 몇 가지 문제가 발생할 수 있습니다. 이 기사에서는 CSS의 레이아웃 Wrapper, 동작 방식, 사용 방법 및 Wrapper를 사용하지 않는 경우에 대해 설명합니다. 이 기사 전체에서 래퍼와 컨테이너라는 용어를 언급할 수 있으며 둘 다 같은 의미입니다. Wrapper에 대한 간단한 설명 래퍼 또는 컨테이너라는 용어는 요소 그룹이 다른 요소 안에 감싸져있거나 포함되어 있음을 의미합니다. 추가 요소를 사용하지 않고 아래와 같이 요소를 래퍼로 사용할 수 있습니.. styled-components best practices(모범 사례) styled-components(emotion 등)을 잘 사용하는 방법을 정리해 봅니다. 1. variant와 as를 사용해 스타일 재사용 styled-component에서 스타일을 재사용 하는 방법은 보통 합성입니다. 이 경우 해당 컴포넌트의 특수화에는 좋지만, 아래와 같이 여러 컴포넌트가 있다는 것을 사용자가 알아야 합니다. 이는 객체지향 프로그래밍의 합성과 유사한 사용 사럐입니다. const ButtonStyle = styled.button` color: ${(props) => props.theme.primary}; `; const ButtonStyleFlashy = styled(ButtonStyle)` color: fuchsia; `; const ButtonDisabled = styled(Butt.. 나만의 CSS Reset(리셋) 만들기 [번역] CSS Reset의 선언과 구조를 이해해 봅니다. 원문 링크 : https://www.joshwcomeau.com/css/custom-css-reset/ My Custom CSS Reset I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles! www.joshwcomeau.com 기존의 CSS Reset을 사용하지 않는 이유 가장 유명한 CSS Reset은 에릭 마이어의 작품(CSS Reset)입니다. 해당 설정.. 가장 일반적이며 기초적인 CSS 문제와 해결 방법 [번역] 원문 링크 : https://www.smashingmagazine.com/2018/12/common-css-issues-front-end-projects/ Common CSS Issues For Front-End Projects — Smashing Magazine Rendering and interaction have become a lot more consistent across browsers in recent years. It’s still not perfectly uniform, however, and a lot of small issues can trip you up. A list of common issues along with their solutions. www.smashingmagazin.. 이전 1 2 3 4 5 다음
