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(제이쿼리를 버리다) 제이쿼리는 혁신적인 수백 수..

[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..

잘 알려지지 않은 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로 축소됩니다.그러나 예외가 있습니다! 마진은 다음과 같은 경우 축소..

[GRID] CSS Grid의 인터넷 익스플로러(IE) 지원5분 이내에 IE에서 CSS 그리드를 작동하는 방법!이 글은 https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66 를 번역한 글입니다. 우리가 여전히 안고 있는 문제는 IE를 지원하는 것이다. 모르는 것은 CSS 그리드가 IE 10에서 처음 지원되었다는 것입니다. 이 포스트에서는 IE CSS 그리드의 prefix를 이용하지 않고 CSS 그리드 구문을 사용하는 동안 IE 10 이상에서 CSS 그리드를 지원하는 방법에 대해 설명합니다. IE11에서 테스트 완료 했습니다. IE의 CSS 그리드에서 지원되지 않는 것은 무엇이며, 어떻게 작동시킬 수 있습니까? * 그리..

[ Animation ] CSS Animation vs Javascript Animation CSS 에니메이션과 자바스크립트 에니메이션에 대한 성능차이에 대한 고민은 프론트엔드 개발로는 절대로 중요한 사안입니다. 웹 프론트 엔드는 HTML, CSS 및 JavaScript의 세가지로 구축됩니다.HTML, CSS 및 JavaScript는 HTML5 및 CSS3 이후로 특히 겹칩니다. 과거에는 복잡한 애니메이션을 위해서 Javascript에 의존적이었지만, 그리고 여전히 GSAP와 같은 라이브러리가 있지만 요즘에는 Transition을 사용하여 애니메이션을 적용 할 수도 있습니다.이를 통해 브라우저에서 javascript를 사용하는 몇가지 규칙을 공식화 할 수 있습니다. Javascript를 통한 에니메이션,..

CSSOM CSS Object Model은 자바 스크립트에서 CSS를 조작 할 수있게 해주는 API 세트입니다. CSS의 경우 DOM과 HTML API의 펜던트이며, 이를 통해 CSS양식을 동적으로 읽고 수정할 수 있습니다. 웹 브라우저가 렌더링 하기 위해서는 이 구조를 거치게 됩니다.DOM과 마찬가지로 트리형태의 구조로 이루어져 있습니다. 웹 브라우저가 렌더링 하는 순서는 다음과 같습니다. The web browser examines your HTML and builds the DOM (Document Object Model). The web browser examines your CSS and builds the CSSOM (CSS Object Model).The web browser combines..