Jaddong's Lab

CSS-in-CSS빌드타임에서 모든 스타일을 생성되어 빌드의 결과물인 css파일의 클래스네임으로 html에 스타일링된다.ex) bootstrap, tailwinds, sass, less우리 컴포넌트에서 알아보기이미 빌드타임에 만들어져 있는 stylesheet로 스타일이 변경되는 걸 확인할 수 있다. 장점단순한 CSS 작성으로 러닝 커브가 낮다.styled-component나 emotion같은 라이브러리가 포함되어있지 않아 번들 사이즈가 작다.style과 관련하여 가독성을 해치지 않는다.{text}단점초기 로딩에 거대한 stylesheet 파일들이 포함될 수 있다.중복 코드가 발생할 수 있다.더보기List라는 컴포넌트가 아래와 같은 스타일이 필요했고, 이에 row라는 클래스네임을 지정했다. Item이라는 ..

reflow와 repaint가 많을수록 성능저하를 유발한다고 알고있는데, 이론으로 말고 실제로 구현과 측정을 통해서 어떤 차이가 있는지 알아보고 싶어서 테스트를 작성해봤다. 1. DevTool에서 성능(performance)탭에서 알아본다. 2. 레이아웃이 다시 되는지 확인한다. -> reflow를 확인한다. relfow 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업입니다. repaint reflow 과정이 끝난 후, 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 background-color, visibility, outline 등의 스타일 변경시에는 reflow 과정이 생략 된 repaint ..

폰트 확장자 opentype : IE6-IE8 woff2 : woff보다 더 나은 압축 (IE를 제외한 모든 브라우저에서 사용) woff : W3C 권장 사항 (IE 에서 가능) ttf/otf: 모두에서 가장 일반적인 글꼴 형식 폰트 적용 방법 cdn보단 local에서 폰트 파일을 사용하는 것이 렌더 속도를 빠르다. ✔ 초기화 css 파일에 적용 @font-face { font-family: 'SpoqaHanSansNeo'; font-style: normal; font-weight: 300; src: url("../src/fonts/SpoqaHanSansNeo-Light.woff2") format('woff2'), url("../src/fonts/SpoqaHanSansNeo-Light.woff") for..

그냥 얼마전에 링크드인 둘러보다가 알게 된 :is 선택자! CSS4에 추가된 사항으로 코드를 상당 부분 줄일 수 있고 가독성에도 큰 효과를 보지 않을까 싶다....! 와웅,,,, CSS는 무궁무진 계속 성장중! 물론 익스플로어에서는 안된다ㅋ 밑에 codesandbox를 간단히 확인해볼 수 있게 만들었다 :) CSS4 에 추가된 내용이고 아래에 자세한 설명은 볼 수 있다. :where 선택자도 비슷한데, 우선순위에 있어서 차이가 있는 것 같다. https://www.w3.org/TR/selectors-4/#matches-pseudo Selectors Level 4 www.w3.org