Box model

safe area 대응

아이폰X 부터 생긴 노치영역 및 하단 부분 대응을 위한 코드 추가

• constant(safe-area-inset-top): ios 11
• env(safe-area-inset-top): ios 11.2 이상

content-visibility 속성

.contents {
	content-visibility: auto;
	contain-intrinsic-size: 1000px;
}

• 화면 밖 콘텐츠의 렌더링을 생략하여 초기 로드 시간을 단축시키는 기술 (230ms → 30ms)
• 마치 인피니트 스크롤 처럼 스크롤을 내려야 아래 컨텐츠를 로드함
• chrome85 부터 지원
• contain-intrinsic-size 속성은 아직 불러오지않은 콘텐츠의 placeholde처럼 지정된 사이즈만큼 공간을 차지할 수 있게 해줌(스켈레톤UI같네)

https://wit.nts-corp.com/2020/09/11/6223

FONT

FOIT / FOUT

브라우저가 폰트를 렌더링하는 방식

FOIT

• Flash Of Invisible Text
• 웹폰트의 로드가 끝날때까지 빈 텍스트를 보여주는 방식