본문 바로가기

CSS60

미디어쿼리 레벨 5 스펙 미디어쿼리는 상당히 유용합니다. 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.. 2020. 3. 15.
Css 선택자. 어떤 걸 써야 더 성능이 좋을까? 많은 사람들이 CSS가 성능이 높고 성능이 떨어질 수 있다는 사실을 잊거나 단순히 깨닫지 못합니다. 그러나 성능이 좋지 않은 CSS를 얼마나 적게, 실수하고, 실현할 수 있는지 알면 쉽게 용서받을 수 있습니다. 이 규칙은 실제로 속도가 특징 인 고성능 웹 사이트에만 적용되며 특정 페이지에 1000 개의 DOM 요소가 나타날 수 있습니다. 그러나 모범 사례는 모범 사례이며, 다음 Facebook 또는 로컬 데코레이터를위한 사이트를 구축하든 상관없이 항상 알아 두는 것이 좋습니다. Steve Souders 의 책 Even Faster Websites에서 인용하는 css 선택자 스피드의 순위는 다음과 같습니다. ID, e.g. #header Class, e.g. .promo Type, e.g. div Adja.. 2020. 2. 15.
Bootstrap5 새소식(큰 변화 4가지) 부트스트랩에 대한 새소식이 전해져옵니다. 많은 개발자들이 css를 작성하지 않고도 손쉽게 웹앱을 만들 수 있어 부트스트랩을 많이 선호를 하고 있는데요. 시대의 흐름에 따라 부트스트랩도 4에는 크게 flex css 속성을 넣는 등 계속해서 점진적 발전을 거듭하고 있습니다. 그런데 또 2020년에 부트스트랩 5가 출시된다고 하니 놀라울 따름인데요. 2020년에 출시되는 부트스트랩 5에서 가장 큰 변화가 눈에 띄어서 포스팅 해보려고 합니다. 바로 jquery free 입니다. 작년에 github에 이어 이제 부트스트랩 5에도 jquery가 사라지게 된다는 말인데요. 2019년 초에 부트스트랩 제작자는 또 다른 시도를 시작했습니다. 1. Dropped jQuery(제이쿼리를 버리다) 제이쿼리는 혁신적인 수백 수.. 2019. 12. 22.
[CSS] Rethinking CSS [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; } .. 2019. 1. 31.