Front End Develop Front End Develop

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

CSS 방법론 (Methodologies)CSS 에는 방법론(Methodologies)들이 있다.물론 이런 CSS 방법론들은 같이 일하는 팀 동료들의 팀워크와 연결되므로 매우 중요한 요소라고 할 수 있다.이러한 습관은 평소의 습관으로 익숙하게 해두어야만 실현하기에 더 가까워질 것이다.다른 사람이 짜놓은 코드를 보면서 스스로 어떠한 생각을 하면서 작업했었는지또 내가 만약에 남에게 나의 소스를 보여주며 작업하라고 지시할 때어떠한 방법론적인 규칙이 있어야만 상대방이 그 패턴을 파악하고 그것은 곧 업무의 효율성과 관련이 있어진다. Object-Oriented CSS (OOCSS)Block, Element, Modifier (BEM)Scalable and Modular Architecture for CSS (SM..