Tip3 프론트엔드 개발 팁 모음 CSS(2) 1. 태그의 너비 관리하는 방법table { width: 400px; /* 100%; */ table-layout: fixed; /* 고정 너비 레이아웃 */ table-layout: auto; /* 자동 너비 레이아웃 (기본값) */}table th, td { width: 100px; /* 25%; */} 2. CSS fallback특정 브라우저나 버전에서 지원하지 않는 CSS 속성이나 값을 대체할 수 있는 방법을 제공합니다.벤더 프리픽스(Vendor Prefixes):아직 표준화되지 않은 기능을 특정 브라우저에서 사용할 수 있도록 하는 방법입니다.예를 들어, webkit-, moz-, ms-, o- 등의 벤더 프리픽스를 속성 앞에 붙여 사용합니다.display: -webkit-flex; di.. 2024. 4. 25. 프론트엔드 개발 팁 모음 CSS(1) CSS @import 사용을 피하세요@import선언을 찾기 위해 이 선언이 포함된 CSS파일을 먼저 다운로드해야 하기 때문에 Request chain이 발생하여 처음 렌더링 시간을 지연 시킵니다. 방법으로 대체할 수 있습니다.CSS 전처리기(SASS, LESS등)를 사용한다면 @import구문을 사용할 때 별개의 더 모듈화된 소스파일을 허용하므로 Request Chain 패널티를 방지합니다.자식요소에서 current color 속성을 사용해서 코드 반복을 줄이고 유지보수성을 높일 수 있습니다. This is a child element. This is a grandchild element. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 This .. 2024. 4. 25. 프론트엔드 개발 팁 모음 HTML(2) FOIT(Flash of Invisible Text)와 폰트 로딩시 폰트로딩 최적화 방법css의 font-display 속성 활용swap: 폰트 로딩 동안 시스템 폰트를 사용하고, 폰트가 로드되면 즉시 원래 폰트로 교체합니다. 가장 일반적이고 사용하기 쉬운 방법입니다.fallback: 100ms 동안 텍스트를 숨기고, 3초 이내에 폰트가 로드되면 원래 폰트로 적용합니다. FOIT를 완전히 방지할 수 있지만, 짧은 지연 시간이 발생할 수 있습니다.opt-in: 폰트 로딩이 완료될 때까지 텍스트를 숨깁니다. FOIT를 완벽하게 방지하지만, 사용자에게 가장 오랜 지연 시간을 초래합니다.Font Subsetting사용되는 글자만 포함된 폰트 파일을 로드하여 로딩 속도를 향상시킬 수 있습니다. 특히 다양한 언어를.. 2024. 4. 25. 이전 1 다음 반응형