브라우저가 css 셀렉터를 해석하는 방법과 성능 향상 방법

브라우저가 css 셀렉터를 해석하는 방법브라우저가 css 선택자를 해석하는 방식은 일반적으로 css를 작성하는 방식과는 반대다. 브라우저는 오른쪽에서 왼쪽으로 css 선택자를 해석 한다.div p a { } 예를 들어, div p a 라는 선택자가 있다면, 브라우저는 먼저 모든 a 태그를 찾고, 그 중에서 부모 요소가 p 인 것을 찾고, 마지막으로 이 중에서 또 다시 부모 요소가 div인 것을 찾는다. 이러한 방식은 브라우저가 불필요한 요소를 검사하는 시간을 줄이는 데 도움이 된다. 왜냐하면 가장 일반적인 요소 (여기서는 a 태그)부터 검사를 시작하므로, 좀 더 빠르게 원하는 요소를 찾을 수 있기 때문이다.  css 선택자의 성능 향상 방법선택자의 복잡성 줄이기가능한 한 간단한 선택자를 사용하는 것이 좋..

2024.06.28

SCSS

SCSSSASS (Synthetically Awesome StyleSheets)SCSS는 Sass로부터 등장했습니다. Sass는 CSS 전처리기로서 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공합니다.전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행시킬 수 있습니다. SCSS는 Sass3 버전부터 새롭게 등장했습니다. SCSS는 Sass의 모든 기능을 지원하는 Superset 입니다.게다가 SCSS는 CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있습니다. Sass와 SCSS의 차이점Sass: 중괄호가 아닌 들여쓰기 사용SCSS: CSS처럼 `{}`와 `;` 을 사용 1. DataTypesSCSS는 다양한 데이터 타입을 정의하고 있어 이를 변수처럼 활용할 수 있습니다.type  ..

2024.05.16

CSS | backdrop-filter

backdrop-filter해당 요소에 블러 처리되는 `filter: blur()`와 달리 요소의 배경 영역에 블러 처리가 된다.`backdrop-filter` CSS 속성을 사용 하면 요소 뒤 배경 영역에 흐림이나 색상 변경과 같은 그래픽 효과를 적용할 수 있다. 이는 요소 뒤에 있는 모든 것에 적용되므로 효과를 보려면 요소나 배경이 투명하거나 부분적으로 투명해야 한다. 사파리 에서는 vender prefix와 함께 사용해야 한다. `-webkit-backdrop-filter`    See the Pen [css]backdrop-filter3 by miok song (@miok-song) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 Syntax..

2024.04.25

iPhone overscroll, user-scale 제어

css*,*:before,*:after{-webkit-box-sizing: border-box; box-sizing: border-box; outline:none; -webkit-tap-highlight-color:transparent !important; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; overscroll-behavior-y:none; touch-action: pan-x pan-y;}

2023.10.04

사파리 overflow:hidden + border-radius 관련 이슈 해결법

사파리의 렌더링 엔진 Webkit의 버그 해결법.box {border-radius:1.2rem; overflow:hidden; isolation: isolate; } https://www.sungikchoi.com/blog/safari-overflow-border-radius/ 사파리 overflow:hidden + border-radius 관련 이슈 해결법사파리에서 overflow:hidden + border-radius 관련 문제를 해결했던 과정을 공유합니다www.sungikchoi.com

2023.09.08

[CSS] 웹 접근성을 고려한 .blind .hidden 처리

스크린리더와 브라우저별, 그리고 매해 업데이트 되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법 으로 해결될 수 있습니다~' 라는 방법은 아직 없다고 봐야 한다. 이 글에서 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개한다. 대체 텍스트(숨긴 텍스트)는 언제 사용할까?화면상에는 나타나지 않지만 구조성 숨겨진 제목을 넣어줘야 하는 경우디자인상 아이콘을 사용하면서 적절한 대체 텍스트(숨긴 텍스트)를 제공해줘야 하는 경우 잘못된 방법1. 화면상 영역을 지니지 않게 하는 방법.hidden{display:none;}// 또는.hidden{visibility:hidden;}우선, 기본적으로 displ..

2023.02.24