본문 바로가기

전체 글294

CSS animation 최적화 기법 CSS animation 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 주는 역할을 한다. 이를 통해 웹 페이지를 생동감 있게 만들 수 있지만 너무 많이 사용하면 웹 페이지의 성능을 떨어뜨릴 수 있다. 애니메이션을 사용했을 때 웹 페이지의 성능이 떨어지는 이유는 CPU의 저원을 많이 사용하는 reflow 와 repaint 가 발생하기 때문이다. reflow : 브라우저가 웹 페이지를 렌더링할 때, html 요소의 위치나 크기가 변경되면 해당 요소와 요소를 포함하는 상/하위 요소의 레이아웃을 다시 계산하고 렌더링 하는 과정 repaint : 요소가 변경되어 reflow 과정이 끝난 후 재생성된 웹 페이지의 CSS 속성 등을 다시 렌더링 하는 과정 이렇게 reflow 와.. 2023. 5. 20.
Font를 Preload하는 방법 여러 사이트에서 사용되는 폰트를 크게 나누면 웹 폰트와 로컬 폰트가 있다. 웹 폰트 서버에서 제공하는 폰트 파일을 사용해 렌더링하므로 로딩 시간이 있다. preload 속성을 사용하여 폰트 파일을 미리 다운받아 놓고 사이트에 방문할 때마다 폰트를 렌더링하지 않게 많들어 로딩 속도를 향상시키는 Font Preload 방식을 사용하면 웹 폰트의 단점을 보완할 수 있다. 웹 폰트를 최적화 하는 방법 1. HTML에서 link 태그 preload 옵션을 사용하기 rel = "preload" 속성을 사용하여 웹 폰트를 미리 다운로드하면, 사이트 방문 시 폰트를 렌더링하지 않아도 되기 때문에 로딩 속도가 향상된다. 하지만 너무 많은 폰트를 preload 하면 로딩 시간이 길어진다. 2. CSS 에서 font-dis.. 2023. 5. 18.
[제로베이스]HTML/CSS 미션 회고 프론트엔드 스쿨이 시작한지 벌써 한 달이 지났고, 할 수 있을까? 걱정했던 HTML/CSS 미션이 끝났다. 그래서 적는 회고록! 1. HTML/CSS를 공부하면서 느낀점 프론트엔드 스쿨에 들어오기 전에도 html/css 를 이용한 간단한 코딩 정도는 할 수 있었기에 내가 html/css 에 대해서는 어느정도 알고 있다고 생각했지만 웬걸..? 처음 듣는 개념들이 많아서 내가 자만했다는걸 느꼈지만 그래도 어느정도는 알고 있었기에 배움에 어려움이 많지는 않았다. 하지만 종류가 워낙 다양하기 때문에 미션을 진행할 때 필요한 것들을 기억해내는게 어려웠다. 덕분에 열심히 구글링하고 개발자 도구를 통해 어떤 속성을 사용해야 하는지 눈치껏 알게되는 능력이 조금 생겼다. 그리고 대부분 비슷한 속성들을 사용하는 느낌이라 .. 2023. 5. 10.
[제로베이스]제로베이스 5주차 학습 요약 벌써 5주차라니...믿을 수가 없다. html/css 미션도 마지막을 향해 가고있다. 저번주(4주차)와 이번주는 아주 피곤했다. 제공된 투두리스트 대로 미션을 진행했더니 일주일에 두 개씩 미션을 완성해야 해서 매일 밤을 샜다. 물론 내 속도가 느리기도 했고, 원하는 대로 구현되지 않는 것은 일단 내버려 두고 다음날 다시 해결하고 했더니 미션 하나당 이틀정도의 시간이 소요된것 같다. 그래도 미션을 진행하면서 문제를 해결하려는 끈기와 의지가 점점 늘어나는걸 느꼈다. 전에는 문제가 있어도 그냥 다른 일을 하거나 주변 사람들에게 바로 도움을 요청했는데 이제는 구글링으로 사람들이 작성한 코드와 내 코드를 비교하며 문제를 찾아보거나 gpt의 도움을 받아 문제를 하나씩 해결해 가는 것이 즐거웠다. 즐거운 와중에 한가.. 2023. 5. 7.

티스토리툴바