Front End Develop Front End Develop

최근에 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 ..

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

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

CSS를 마스터하기 위한 15가지 기법들에 대한 이야기가 미디엄에 잘 포스팅 되어있어 재해석 합니다. "CSS는 쉽지 않다"는 웹 개발 커뮤니티에서 가장 큰 불만 중 하나 일 것입니다. CSS는 기초를 배우는 것 외에도 창의성과 사물을 시각화하는 능력이 필요하다고 굳게 믿습니다. 15가지 기법에 대해서 알아보시죠. 1. HTML(1/15) HTML의 기본기가 탄탄하면 CSS가 훨씬 쉬워진다는 말은 당연한 말이겠지요. CSS 스타일링을 위해서 HTML 구조와 의미론적인 시멘틱 태그를 희생해서는 안됩니다. CSS를 더 잘 알수록 HTML 구조의 파편화와 불필요한 태그 생성에 경계를 강하게 하는 성향이 당연스럽게 나타납니다. HTML 기본기가 탄탄하면 접근성을 손상시키지 않고 UI를 올바르게 만드는 방법을 알..

다양한 색상은 사용자가 사용자 인터페이스의 다른 부분으로 방향을 잡는 데 도움이됩니다. 사이드 바는 종종 보충 콘텐츠, 링크 및 필터링 기능을 포함합니다. 이러한 사이드 바에 배경색을 제공하면 사용자에게 이것이 중요하지만 기본 콘텐츠와는 별개라는 사실을 강조 할 수 있습니다. 와이드 스크린 모니터와 최신 노트북은 일반적인 그리드 컨테이너 크기의 최대 너비를 능가하는 넓은 디스플레이 해상도를 제공합니다. Bootstrap, Foundation 및 TailwindCSS의 가장 큰 기본 그리드 컨테이너 너비는 각각 1140px, 1200px 및 1280px입니다. 가장자리 Column에 할당 된 배경색이 확장되도록하려면 어떻게 해야합니까? 절대적으로 배치 된 대형 의사 엘리먼트(:: before, :: aft..

브라우저에서 웹 사이트를 꾸미는 것에 있어서 우리는 각자 다양한 방식으로 많은 스타일 속성들을 사용하여 꾸미게 됩니다. 그런 상황에서도 브라우저 렌더링을 최소화 할 수 있고 Reflow를 아예 안할 수 있는 속성들이 있어 소개드리려고 합니다. 기본적으로 브라우저 렌더링 상황에서는 Javscript > Style > Layout > Paint > Composite 순서를 따르게 됩니다. Layout(Reflow)단계를 뛰어넘게 되면 연산하는 양이 줄어들기 때문에 렌더링이 개선됩니다. Reflow가 일어나는 속성들 position width height left top right bottom margin padding border border-width clear display float font-famil..

최근 다크모드는 매우 매력적이고 사람들의 소구를 이끌어내는데 효과적입니다. 여러 업체들이 자신의 OS에 다크모드를 적용하고 있습니다. 목차 스위치처럼 켜고 끌 수 있는 테마 OS 레벨의 다크모드 유저 선호 성향 저장 User Agent 스타일 다루기 결합 접근 디자인 고려 여러 환경에서의 다크모드 다크모드를 제공하느냐 아니냐 실용적인 코드만 빠르게 확인하고 싶으신 경우에는 5번 결합접근으로 바로 스크롤 해 주시길 바랍니다. 1. 스위치처럼 켜고 끌 수 있는 테마 (1/8) 하나의 테마는 사용자가 처음 방문 할 때 얻는 기본값으로 정의되어야합니다. 대부분의 경우 밝은 테마입니다 다른 테마로 전환하는 방법이 있어야합니다(자동으로 수행 될 수 있음). 사용자가 버튼을 클릭하면 색상 테마가 변경됩니다. 이를 수..

DOM과 CSSOM 첫째, 브라우저에는 자바스크립트 엔진과 렌더링 엔진이 포함되어 있다는 것을 이해하는 것이 중요합니다. 우리는 후자에 초점을 맞출 것입니다. 예를 들어 WebKit (Safari), Blink (Chrome), Gecko (Firefox) 및 Trident / EdgeHTML (IE / Edge)과 관련된 세부 정보를 논의 할 것입니다. 브라우저는 DOM 및 CSSOM을 구성하는 Conversion, Tokenization, Lexing 및 Parsing 프로세스를 거칩니다. Conversion : HTML 및 CSS에서 원시 바이트를 읽어냅니다. Tokenization : 입력단위를 청크단위로 나눕니다. (시작태그, 종료태그, 속성이름, 속성값 등). 공백 및 줄바꿈과 같은 관련 없는..