Jaddong's Lab

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

인스타 피드에서 만든거 보고 너무 귀여워서 css 안까먹을 겸 만들어서 깃헙에만 넣어놨었는데 오랜만에 깃헙로그인했다가 찾아서 꺼내올린다. (interactive web 공부하고 싶다면서 현생이 그냥 지나갈 것 같다.... 이것도 일이었다면 재미없었겠지....) See the Pen by Jayoung Lee (@Jayoung) on CodePen.

현생이 치여 회사에서 업무 하면서 궁금한 것들을 매번 구글링만 하다 보니 뭔가 내 머릿속에 있던 깊은 것들이 사라지는 느낌이다.... ㅎ ㅏ.... 역시나 반복하지 않으면 뭐든 잊어버리게 되는 듯하다. 웹에 관해 간결하게 핵심만 정리하여 주 1회 공부 겸 포스팅을 해보려 한다. 시작이 반이다.... 그래.... 현생에 치여 회사에서 업무 하면서 궁금한 것들을 매번 구글링만 하다 보니 뭔가 내 머릿속에 있던 깊은 것들이 사라지는 느낌이다.... ㅎ ㅏ.... 역시나 반복하지 않으면 뭐든 잊어버리게 되는 듯하다. 웹에 관해 간결하게 핵심만 정리하여 주 1회 공부 겸 포스팅을 해보려 한다. 거의 다른 글 복붙 수준인뎈ㅋㅋㅋ 그래도 곱씹어 읽어보게 되니 그걸로 만족한다. 시작이 반이다.... 그래.... 1. ..