CSS (40) 썸네일형 리스트형 [번역] 3분 동안 CSS 타이포그래피(폰트) 기본 속성 정리하기 3분 동안 CSS 타이포그래피(typography)의 기본 속성을 정리해 봅시다. 원문 링크 https://medium.com/cssclass-com/css-basics-for-typography-160025e3aeca CSS Basics for Typography CSS Basics medium.com font-family font-family 속성은 사용하려는 글꼴을 선언하는 데 사용됩니다. 다양한 글꼴을 동시에 선언할 수 있습니다. font-family: Arial, Helvetica, sans-serif; 첫 번째 글꼴이 특정 운영 체제에서 동작하지 않는 경우 브라우저는 사용 가능한 폰트를 다음 목록에서 찾습니다. 글꼴에서 일부 문자가 누락된 경우 목록의 다음 글꼴을 활용해 누락된 문자를 채웁니다.. [번역] css z-index 잘 사용하기 중첩 오버레이가 있는 컴포넌트들이 많은 화면을 개발하다보면, 금방 z-index를 유지보수하기 어려워 집니다. z-index를 잘 유지보수하는 방법을 알아봅시다. 원문 링크 : https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/ Managing CSS Z-Index In Large Projects — Smashing Magazine Wrangling z-index values is a difficult task for many developers. Here is an easy-to-implement mini-framework based on existing conventions that brings clarity and confide.. [번역] z-index와 쌓임 맥락에 대한 오해 z-index와 CSS에서 가장 잘못 이해되고 있는 메커니즘 중 하나인 쌓임 맥락(stacking context)에 대해 알아봅니다. 아래 게시물의 번역입니다. https://www.joshwcomeau.com/css/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.. [번역] CSS margin(마진)에 대한 모든 것(with 마진 겹침) CSS 마진은 언뜻 보기에 단순해 보입니다. 요소 주변에 공간을 형성하여 다른 요소를 밀어냅니다. 하지만 마진에는 당신이 모르는 몇가지 함정이 숨어있습니다. 해당 게시물에서는 CSS 마진과 마진에 숨어있는 함정을 다룹니다. 아래 게시물의 번역입니다. https://www.smashingmagazine.com/2019/07/margins-in-css/ Everything You Need To Know About CSS Margins — Smashing Magazine Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements aw.. [번역] 빅테크 프론트엔드 기술 인터뷰 : CSS편 Front End Interview Handbook의 CSS 파트를 번역 및 정리한 글입니다 Meta, Amazon., Google과 같은 미국 빅테크 프론트엔드 면접의 기출 문제라 합니다. 2019년 기준으로 작성된 것들이 꽤 있어서, 몇가지 경험 기반 답변들은 스스로 생각해 보시는 것도 좋은 듯 합니다. 해당 링크에서 원문을 확인하실 수 있습니다. 1. CSS 셀렉터의 명시도(specificity)는 무엇이고, 어떻게 동작하나요? 브라우저는 CSS 규칙의 명시도에 따라 요소에 표시할 스타일을 결정합니다. 브라우저가 특정 요소에 매치되는 규칙을 이미 결정했다고 가정합시다. 매칭 규칙 중 명시도는 쉼표로 구분된 4개의 값인 a, b, c, d을 기반으로 각 규칙에 대해 계산됩니다. a는 인라인 스타일 여.. [번역]CSS 셀렉터 성능 최적화 CSS 셀렉터가 성능에 미치는 영향을 알아봅니다. 아래 게시물의 번역입니다. https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/?ck_subscriber_id=1833874137 The truth about CSS selector performance If you're a web developer, you may have already heard that some CSS selectors are faster than others. And you're probably hoping to find a list of the better selectors to use in this article. Well,.. CSS Position Sticky 문제 해결하기 Sticky는 생각처럼 동작하지 않는 경우가 많습니다. 다음 체크리스트를 이용해 일반적인 트러블슈팅 방법을 알아봅시다. 원문 : https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working#checking-if-a-parent-element-is-a-flexbox How to Fix Issues With CSS Position Sticky Not Working? Learn possible reasons why CSS position sticky might not be working for you www.designcise.com CSS position:sticky 속성이 동작하지 않는 데에는 여러.. 디자인시스템 토큰 이름붙이기 [Naming Tokens in Design Systems] 디자인 시스템의 토큰에 이름 붙이는 방법을 알아봅니디. 부제 : 비주얼 스타일을 설명하는 용어, 유형 및 분류; Base, Modifier, Objects, Namespace 원문 : https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676 Naming Tokens in Design Systems Terms, Types, and Taxonomy to Describe Visual Style medium.com 디자인 토큰은 Salesforce가 2014년에 개념을 개척한 이후로 (Salesforce pioneered the concept in 2014) 많은 디자인 시스템의 시각적 기반을 제공했습니다. 저는 2016년에 .. 이전 1 2 3 4 5 다음
