Front End Develop Front End Develop

미디어쿼리는 상당히 유용합니다. w3c 에서는 미디어 쿼리 레벨 5 스펙을 한창 작성중입니다. https://drafts.csswg.org/mediaqueries-5/#script-custom-mq Media Queries Level 5 Abstract Media Queries allow authors to test and query values or features of the user agent or display device, independent of the document being rendered. They are used in the CSS @media rule to conditionally apply styles to a document, and in various othe drafts.c..

많은 사람들이 CSS가 성능이 높고 성능이 떨어질 수 있다는 사실을 잊거나 단순히 깨닫지 못합니다. 그러나 성능이 좋지 않은 CSS를 얼마나 적게, 실수하고, 실현할 수 있는지 알면 쉽게 용서받을 수 있습니다. 이 규칙은 실제로 속도가 특징 인 고성능 웹 사이트에만 적용되며 특정 페이지에 1000 개의 DOM 요소가 나타날 수 있습니다. 그러나 모범 사례는 모범 사례이며, 다음 Facebook 또는 로컬 데코레이터를위한 사이트를 구축하든 상관없이 항상 알아 두는 것이 좋습니다. Steve Souders 의 책 Even Faster Websites에서 인용하는 css 선택자 스피드의 순위는 다음과 같습니다. ID, e.g. #header Class, e.g. .promo Type, e.g. div Adja..

부트스트랩에 대한 새소식이 전해져옵니다. 많은 개발자들이 css를 작성하지 않고도 손쉽게 웹앱을 만들 수 있어 부트스트랩을 많이 선호를 하고 있는데요. 시대의 흐름에 따라 부트스트랩도 4에는 크게 flex css 속성을 넣는 등 계속해서 점진적 발전을 거듭하고 있습니다. 그런데 또 2020년에 부트스트랩 5가 출시된다고 하니 놀라울 따름인데요. 2020년에 출시되는 부트스트랩 5에서 가장 큰 변화가 눈에 띄어서 포스팅 해보려고 합니다. 바로 jquery free 입니다. 작년에 github에 이어 이제 부트스트랩 5에도 jquery가 사라지게 된다는 말인데요. 2019년 초에 부트스트랩 제작자는 또 다른 시도를 시작했습니다. 1. Dropped jQuery(제이쿼리를 버리다) 제이쿼리는 혁신적인 수백 수..

[CSS] Rethinking CSS1. Atomic CSSAtomic CSS의 생각은 간단합니다.일반적으로 사용되는 라인에 대한 CSS 클래스를 만들면 수백만 개의 클래스가 생기고 HTML 마크업이 조금 더 길어집니다. I am a p tag! How cool is that? :)123.padding-small { padding: 10px; }.margin-big { margin: 20px; }.color-red { color: red }cs 2. Object-Oriented(객체지향) CSSSASS와 LESS 같은 객체지향적으로 접근하는 123456789101112131415161718.card { { color: #333; padding: 20px; background-color: white; } ..

[Canvas] 버튼 Particle 이펙트HTML 요소의 자유를 결합하여 웹 페이지의 시각적 기능을 향상시키는 방법에 대해 살펴 보겠습니다. 최신브라우저에만 적용이 가능합니다. 초기 상태 See the Pen DOM to Canvas #1 by Zach Saucier (@Zeaklous) on CodePen.캔버스 버전html2canvas라는 매우 편리한 라이브러리가 도움이 됩니다.라이브러리를 로드 한 다음 html2canvas를 호출하면 엘리먼트의 캔버스 버전과 함께 Promise가 반환됩니다. See the Pen DOM to Canvas #2 by Zach Saucier (@Zeaklous) on CodePen. 여기에는 HTML 버전과 캔버스 버전의 버튼이 있습니다. 캔버스 버전은 "screen..

12345678// reflow 2번 발생var div = document.getElementById('target'); div.style.padding = '12px';div.style.width = '200px'; // cssText를 이용한 최소화div.style.cssText = 'padding:12px; width:200px;';cs

Will-Changewill change 속성이 있다. CSS를 쓰다보면 특히, Anmation을 써서 여러 효과들을 낼 때 필수적으로 고려해야 될 것이 GPU 성능과 가속화이다. 그런 Property를 사용할 때 생기는 성능 병목현상을 최소화 하기 위해서 특정 브라우저에만 현재 지원하고 있지만 해결방법으로 `Will - Change` 속성이 있다. GPU, CPU, 하드웨어 가속하드웨어 가속은 그래픽 처리 장치(GPU)를 이용하여 중앙 처리 장치(CPU)의 처리량을 줄이고, 브라우저의 렌더링을 효율화하는 것을 말한다.CSS 작업 중에 이러한 하드웨어가속을 통해서 렌더링을 좀 더 빠르게 할 수 있다. 하드웨어가속(GPU 가속)으로 페이지를 출력할 경우 레이어라고 하는 개념을 사용한다. 페이지에 있는 엘리..

잘 알려지지 않은 CSS 팁아래에는 고급 CSS 사용자를위한 팁과 트릭과 함께 가장 이상한 CSS 기능이 있습니다.모든 내용을 출처에서 발췌하지 않고 부분적으로만 담았습니다. 1. 수직 padding은 height 속성이 아닌 요소의 width 속성과 관련이 있습니다. See the Pen Vertical padding by Peedu Tuisk (@matude) on CodePen. 이것을 알면 높이 / 너비 비율을 유지하는 반응형 요소를 쉽게 만들 수 있습니다. 2. 마진 병합 See the Pen Margins overlap by Peedu Tuisk (@matude) on CodePen. 위의 경우 마진이 40px이 아닌 20px로 축소됩니다.그러나 예외가 있습니다! 마진은 다음과 같은 경우 축소..