HTML2 프론트엔드 개발 팁 모음 HTML(2) FOIT(Flash of Invisible Text)와 폰트 로딩시 폰트로딩 최적화 방법css의 font-display 속성 활용swap: 폰트 로딩 동안 시스템 폰트를 사용하고, 폰트가 로드되면 즉시 원래 폰트로 교체합니다. 가장 일반적이고 사용하기 쉬운 방법입니다.fallback: 100ms 동안 텍스트를 숨기고, 3초 이내에 폰트가 로드되면 원래 폰트로 적용합니다. FOIT를 완전히 방지할 수 있지만, 짧은 지연 시간이 발생할 수 있습니다.opt-in: 폰트 로딩이 완료될 때까지 텍스트를 숨깁니다. FOIT를 완벽하게 방지하지만, 사용자에게 가장 오랜 지연 시간을 초래합니다.Font Subsetting사용되는 글자만 포함된 폰트 파일을 로드하여 로딩 속도를 향상시킬 수 있습니다. 특히 다양한 언어를.. 2024. 4. 25. 프론트엔드 개발 팁 모음 HTML(1) doctype 명시하기브라우저 렌더링 모드 설정최신 브라우저는 HTML5를 기본 렌더링 모드로 사용하기 때문에, DOCTYPE 선언이 없어도 대부분의 경우 정상적으로 작동합니다. doctype을 명시하여 이전 버전의 브라우저와의 호환성을 유지하고, 문서가 정확하게 렌더링되도록 합니다.문서 유효성 검사코드 오류를 방지하고 웹 표준을 준수하는 데 도움을 줍니다.문서 구조 파악브라우저가 문서 구조를 빠르게 파악하도록 돕습니다.주의 사항DOCTYPE 선언은 문서의 최상단에 한 번만 선언해야 합니다.선언 시 대소문자를 구분하지 않아도 됩니다.HTML5 이후 버전에서는 선언만 사용하며, 이전 버전의 형식은 더 이상 사용되지 않습니다.권장되지 않는 태그 사용을 피하세요 (굵게 표시): 과거에는 텍스트를 강조하기 위.. 2024. 4. 25. 이전 1 다음 반응형