🗂 WIL/📁 Html & Css

못 본 척한 리페인트, 리플로우

# 그땐, 못 본 척했습니다. 3차 프로젝트 중반쯤 될 무렵, velog 글을 구경하다 웹 성능 최적화 방법이라는 글을 보게 되었다. 웹 성능 최적화 가 중요하다는 것은 이미 알고 있었지만, 구현에 집중하다 보니 , 나쁜 코드가 되지 않도록 주의하며 구현하는 것만으로도 내 실력으로는 벅찼기에 모른 척하고 있었다. 그나마 하는 것은 번들 사이즈를 줄이기 위해 무분별한 라이브러리 사용을 지양한다는 것 정도... 위 사이트에서 CSS 최적화에는 리플로우, 리페인트를 고려한 스타일 작성이 있다는 것을 알게 되었다. 리플로우를 발생시키는 속성과 리페인트를 발생하는 속성이 각각 있고, "리페인트 속성 사용하는 것이 성능에 좋다." 와 각 속성이 기재되어있었는데, 사실 제대로 이해가 되지 않았고, 이미 프로젝트는 중..

💡 마진 겹침 현상

📅 본 글은 2022년 4월 14일 개인github 에 작성된 글입니다. 🚀 마진 겹침 현상 ✅ BFC? BFC는 웹페이지의 블록 레벨 소를 렌더링하는데 사용되는 CSS의 비주얼 서식 모델 중 하나이다. ✔️블록 레벨 요소와 인라인 레벨 요소는 알고 있던 개념이였지만, 오랜만에 보니 잘 생각나지 않았다...ㅠㅠ 다행히 잘 정리되어있는 블로그들을 참고하여 다시 기억을 상기시켰다! 익히 알려진, BFC 생성 조건이다. 1. 루트 혹은 이를 포함하는 요소 2. float가 none이 아니면서 clear 되지 않은 경우 3. position이 absolute / fixed 4. display가 inline-block / tabel-cell / tabel-caption 5. overflow가 visible이 아님..