CSS (40) 썸네일형 리스트형 [모질라 읽기] Viewport 메타 태그 모질라의 viewport 메타 태그 섹션을 읽어봅니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag Viewport meta tag - HTML: HyperText Markup Language | MDN This article describes how to use the "viewport" tag to control the viewport's size and shape. developer.mozilla.org 최근 사내 모바일 앱을 개편하면서, 이곳저곳에서 날라오는 여러 무질서한 html을 표준화하는 스크립트를 작성할 일이 있었습니다. viewport meta 태그 설정들이 모바일 앱 레이아웃에서 상당히 중요한 역할을 한다는 것.. [30초 CSS] CSS 속성 상속과 !important는 무관하다 상속되는 속성의 !important는 매우 간단하게 오버라이딩 됩니다. 오버라이딩 될 때에는 그냥 해당 속성이 없었다가 생겼다고 생각하시면 됩니다. HTML 삽입 미리보기할 수 없는 소스 참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#keyword_index CSS reference - CSS: Cascading Style Sheets | MDN Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and .. [publishing] 유용한 과거의 CSS와 타이포그래피 https://css-for-js.dev/ 수업 내용에서 발췌 하위 호환이 좋으면서 유용한 css들을 알아봅시다. 초기 웹은 잡지, 책과 같은 출판(publishing)을 위한 것이었음. 레이아웃 모델 문서의 흐름을 따르는 Flow layout 이미 놓여진 요소, containing block, viewport에 상대적인 Relative layout 플렉시블 박스(그리드, 플렉스박스) 멀티컬럼 레이아웃 float 아래와 같이 wrapper에 css를 입히면 .wrapper { columns: 2; column-gap: 16px; padding: 16px; } 이런 출판물처럼 변합니다. 문단이 쪼개지지 않길 원한다면 p { break-inside: avoid; } 해당 알고리즘의 관심사는 모든 열의 높이가.. [CSS] 쌓임 맥락(스태킹 컨텍스트)과 z-index 원문 : https://www.joshwcomeau.com/css/stacking-contexts/#creating-stacking-contexts What The Heck, z-index?? The z-index property can be a tricky little bugger. Sometimes, no matter how much you crank up the number, the element never rises to the top! In this article, we explore stacking contexts, and see how they can thwart our efforts to use z-index. We'll also www.joshwcomeau.com TL;DR z-index.. CSS 애니메이션 성능 분석 및 개선하기 원글을 번역한 글을 학습한 내용을 정리한 글 입니다. Performance monitoring in CSS animations Animation using JavaScript ? or Animation using CSS? medium.com CSS 애니메이션은 일부 속성에 의존함 position : absolute / relative transform opacity left, right, top, bottom 등등… 성능 측정 결과를 이해하는 방법 웹 브라우저의 렌더링 방식을 간단히 살펴보겠습니다. 웹 브라우저는 UI를 다음과 같은 방식으로 생성합니다. Recalculate Style 요소에 적용할 스타일을 계산. Layout 요소의 레이아웃을 생성하고, 화면에 배치. Paint 생성된 모든 레이아웃에 .. 디자인 시스템 만들기 시리즈 1편 : 디자인 토큰 소개 원문 : https://www.michaelmang.dev/blog/introduction-to-design-tokens Introduction to Design Tokens Design tokens are being used by companies like Amazon and Adobe to solve the pitfalls of coding a design system. I provide an introduction to design tokens. www.michaelmang.dev TLDR: CSS는 스타일 시트 스펙의 원자가 아닙니다. 원자는 바로 딕셔너리의 필드 : 밸류 한 쌍입니다. css 클래스는 스펙(사양)이 아닙니다. color : 'black' 한 쌍입니다. 코드에서 사용할 수 있는 사.. 프레이머 모션[Framer Motion] 기초 1편 : 생기초 알아보기 원문 보기 https://blog.maximeheckel.com/posts/guide-animations-spark-joy-framer-motion/ Guide to creating animations that spark joy with Framer Motion - Maxime Heckel's Blog An interactive guide introducing everything I've learned about Framer Motion through fun examples and little case studies of animations I built. blog.maximeheckel.com 아래에서 다루는 예제들 원문은 영어로 읽는데 20분 정도 걸리는 상당한 분량입니다. 내용을 거의 3분 분량.. [css] fixed를 중첩할 경우 조심해야 할 점 모바일 웹앱 프로젝트 도중 아래에서 위로 올라오는 drawer 컴포넌트를 개발할 일이 생겼다. 그런데 내부부터 만들고자 해서, 동작하지 않는 css를 냅뒀었다. 상황은 다음과 같다. 가장 외부에 css 애니메이션을 적용해야 하는것을 일단 냅뒀다. 그러다보니 내부 div에 transition css 속성을 그대로 냅뒀다. 가장 외부는 레이아웃을 덮기 위한 fixed 요소가 존재한다. 그리고 drawer 내부에는 fixed 속성을 적용한 헤더가 존재한다. 드로어 컨텍스트가 배경을 덮어야 하니 제일 외부에 fixed를 둔다 그 다음 내부에 transform을 건 div를 둔다. 그 다음 드로어 내부 헤더에 fixed를 건다. 그러면 어떻게 될까...? 아래에서 직접 확인하자. 해당 상황을 재현한 예시 Rea.. 이전 1 2 3 4 5 다음
