Web Font Loader
Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-developed by Google and Typekit.
https://github.com/typekit/webfontloader
[참고] Link types: preload - HTML: HyperText Markup Language | MDN (mozilla.org)
[참고] CSS Fonts Module Level 4 (csswg.org)
[참고] How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy | CSS-Tricks - CSS-Tricks
[참고] Fix Ensure text remains visible during webfont load (corewebvitals.io)
[참고(강추)] The Best Font Loading Strategies and How to Execute Them | CSS-Tricks - CSS-Tricks
HTML vs Body: How to Set Width and Height for Full Page Size
CSS is difficult but also forgiving. And this forgiveness allows us to haphazardly throw styles into our CSS.
Dave Gray, February 17, 2021
The Unexpected Power of Viewport Units in CSS
Viewport units control attributes for elements on the page based on the size of the screen whereas percentages inherit their size from the parent element.
Thomas Lattimore, February 22, 2017
https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css
Styling numbered lists with CSS counters
If you need more control over the appearance of the numbers, you might assume that you’d need to add more elements to the DOM via HTML or JavaScript and style them. Fortunately, CSS counters save you much of that trouble.
Supun Kavinda, May 12, 2020 4 min read
https://blog.logrocket.com/styling-numbered-lists-with-css-counters/
The Easy Way to Add Fonts to Your Website (Including Custom Fonts)
Adding a unique font to your website is a great way to make your design stand out online.
In this article, I will walk you through the step-by-step process for adding any font to your website.
Philip Westfall, August 12, 2021
The Easy Way to Add Fonts to Your Website (Including Custom Fonts) (pagecloud.com)
Be Careful When You Size Your Divs
Originally meant as a simple tool to group page elements, the DIV tag gives designers additional flexibility and control over layout when it's combined with Cascading Style Sheet (CSS) properties.
CSS- Div- Be Careful When You Size Your Divs (uvm.edu)
렌더링 차단 CSS
HTML 및 CSS는 둘다 렌더링 차단 리소스입니다. HTML의 경우 DOM이 없으면 렌더링할 것이 없기 때문에 명확하지만, CSS 요구사항은 다소 불명확할 수 있습니다.
렌더링 차단 CSS | Web | Google Developers
온라인 SVG 벡터 이미지 편집 툴
Method Draw Vector Editor
ARTIFICIAL.DESIGN, "SVG Animation Tutorial"
SVG Animation Tutorial (artificial.design)
CSS Button Hover Effects
Collection of Button Hover Effects
CSS Button Hover Effects: Collection of Button Hover Effects - DEV Community
CSS Flexbox #13. Create a Navigation Menu with Flexbox
With CSS Flexbox, it is quite practical to code a basic navigation bar without the need of using floats or complicated pixel calculations.
CSS Flexbox #13. Create a Navigation Menu with Flexbox (ostraining.com)
CSS Icons
700+ CSS ICONS
700+ CSS Icons, Customizable, Retina Ready & API
CSS-TRICKS, "Transforms on SVG Elements"
Transforms on SVG Elements | CSS-Tricks
윈도우 11 소개
https://www.microsoft.com/ko-kr/windows/windows-11
이벤트 리스너에 패시브 플래그 추가하여 스크롤 성능 향상
document.addEventListener('touchstart', onTouchStart, {passive: true});javascript - What are passive event listeners? - Stack Overflow
Use passive listeners to improve scrolling performance (web.dev)
티스토리 스킨 가이드 (GitBook)
https://tistory.github.io/document-tistory-skin/
Activating Browser Modes with Doctype
웹 브라우저 호환성에 문제가 있을 경우 적용하는 Doctype 리스트 및 설명
Activating Browser Modes with Doctype (hsivonen.fi)
Cumulative Layout Shift
Cumulative Layout Shift (CLS) measures how much content moves around on the page after being rendered. The lower the CLS is the better. A value of 0 means the layout is completely stable.
The Cumulative Layout Shift score currently accounts for 5% over the overall Lighthouse Performance score.
The CLS metric should be as low as possible, ideally below 0.1. A CLS above 0.25 is considered poor.
Cumulative Layout Shift (debugbear.com)
EM vs REM vs PX
Should we use Rem, Em or Pixel?
Guide: EM vs REM vs PX. Which should you use? (engageinteractive.co.uk)
Back to Basic: Should we use Rem, Em or Pixel? - DEV Community
Flexbox, A Complete Guide to Flexbox
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items)
A Complete Guide to Flexbox | CSS-Tricks
Flex 컨테이너에 메뉴바를 사용하면서 'justify-content' 옵션을 추가할 경우 Overflow 스크롤이 작동하지 않는 이유와 (임시) 해결 방안
html - Overflow auto not working with justify-content: flex-end - Stack Overflow
※ 이 블로그는 "width: 100%;" 추가하여 문제 해결
How to Improve Your Google PageSpeed Insights Score
https://instapage.com/blog/google-pagespeed-insights
Draw Freely Inkscape
vector graphics editor, drawing tools, broad file format compatibility
GNU/Linux, Windows, macOS
Setting Height And Width On Images Is Important Again
Thanks to some recent changes in browsers, it’s now well worth setting width and height attributes on your images to prevent layout shifts and improve the experience of your site visitors.
https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/
SVG 벡터 이미지, CSS, text-rendering
The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
W3Schools Javascript와 HTML DOM 레퍼런스
https://www.w3schools.com/jsref/default.asp
Why is a JavaScript Array Length Property Always One Higher Than the Value of the Last Element’s Index?
https://blog.kevinchisholm.com/javascript/javascript-array-length-always-one-higher/
Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver
Intersection information is needed for many reasons, such as lazy loading of images. But there’s so much more. It’s time to get a better understanding and different perspectives on the Intersection Observer API. Ready?
Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver — Smashing Magazine
[참고] Section, "How to use Intersection Observers in a Website"
33 Animated Backgrounds Examples [With Pure CSS]
You can use a CSS background animation to help your site stand out from the crowd, emphasize your branding, or simply look awesome.
https://alvarotrigo.com/blog/animated-backgrounds-css/
Building A Dynamic Header With Intersection Observer
The Intersection Observer API is a JavaScript API that enables us to observe an element and detect when it passes a specified point in a scrolling container — often (but not always) the viewport — triggering a callback function.
[비교] mdn web docs_, Intersection Observer API
[참고] web.dev, IntersectionObserver 도입
[참고] The Intersection Observer API: Practical Examples
[참고] JavaScript Intersection Observer Ultimate Guide
[참고[ Section, "How to use Intersection Observers in a Website"
How to add an EventListener to multiple elements in JavaScript
https://www.educative.io/answers/how-to-add-an-eventlistener-to-multiple-elements-in-javascript
댓글