CSS60 @scope (.media) 미디어쿼리 최근에 W3C에 Scoped styles에 대한 초안이 등재되어서 아주 가볍게 다루어봅니다. https://drafts.csswg.org/css-cascade-6/#scoped-styles CSS Cascading and Inheritance Level 6 Abstract This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements. New in this level is § 6.5 Scoped Styles. C .. 2021. 9. 12. border에 background-image 지정하기 / border에 애니메이션 부여하기 css border를 많이들 사용하실텐데요. dashed 형태라던지 dotted 라던지.. 등등 See the Pen Dashed Border Generator by Amit Sheen (@amit_sheen) on CodePen. 위의 Trick 예시를 보시면 조금 더 다양한 일들을 할 수 있음을 알 수 있으실겁니다. 이 트릭은 4개의 백그라운드를 사용하는 것입니다. background 속성은 쉼표로 구분된 값을 사용하므로 4개의 배경(상단, 오른쪽, 하단 및 왼쪽에 하나씩)을 설정하고 테두리처럼 보이도록 크기를 조정하면 됩니다. .box { background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px,.. 2021. 4. 18. Z-index와 Stacking Context(스태킹 컨텍스트) Z-index를 사용할 때 Stacking Context를 고려하십니까? 아마 대부분 스태킹 컨텍스트에 의해서 z-index의 순서가 결정된 다는 것을 알고 있을겁니다. 여기서 더 나아가서 또 놀라운 사실이 있습니다. 스택 컨텍스트 생성에 있어서 놀라운 예외가 있습니다. 스택 컨텍스트 생성을 발생시키지 않게 함으로 인해서 내부 콘텐츠와 z-index를 교차할 수 있습니다. ~~JUST PASSING THROUGH~~ .scroll-area { overflow: scroll; border: 3px solid salmon; width: 18ex; height: 15ex; margin-left: 2ex; } .scroll-area .vertical-bar { position: relative; float: l.. 2021. 3. 1. CSS 마스터를 위한 15가지 기법 CSS를 마스터하기 위한 15가지 기법들에 대한 이야기가 미디엄에 잘 포스팅 되어있어 재해석 합니다. "CSS는 쉽지 않다"는 웹 개발 커뮤니티에서 가장 큰 불만 중 하나 일 것입니다. CSS는 기초를 배우는 것 외에도 창의성과 사물을 시각화하는 능력이 필요하다고 굳게 믿습니다. 15가지 기법에 대해서 알아보시죠. 1. HTML(1/15) HTML의 기본기가 탄탄하면 CSS가 훨씬 쉬워진다는 말은 당연한 말이겠지요. CSS 스타일링을 위해서 HTML 구조와 의미론적인 시멘틱 태그를 희생해서는 안됩니다. CSS를 더 잘 알수록 HTML 구조의 파편화와 불필요한 태그 생성에 경계를 강하게 하는 성향이 당연스럽게 나타납니다. HTML 기본기가 탄탄하면 접근성을 손상시키지 않고 UI를 올바르게 만드는 방법을 알.. 2021. 2. 21. 이전 1 2 3 4 5 6 ··· 15 다음
