본문 바로가기

분류 전체보기63

프론트엔드 개발 팁 모음 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- 등의 벤더 프리픽스를 속성 앞에 붙여 사용합니다.displ.. 2024. 4. 25.
프론트엔드 개발 팁 모음 CSS(1) CSS @import 사용을 피하세요@import선언을 찾기 위해 이 선언이 포함된 CSS파일을 먼저 다운로드해야 하기 때문에 Request chain이 발생하여 처음 렌더링 시간을 지연 시킵니다. 방법으로 대체할 수 있습니다.CSS 전처리기(SASS, LESS등)를 사용한다면 @import구문을 사용할 때 별개의 더 모듈화된 소스파일을 허용하므로 Request Chain 패널티를 방지합니다.자식요소에서 current color 속성을 사용해서 코드 반복을 줄이고 유지보수성을 높일 수 있습니다.Test .parent { color: blue; } .child { border: 1px solid currentColor; } .grandc.. 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.
프론트엔드 개발 팁 모음 HTML(1) doctype 명시하기브라우저 렌더링 모드 설정최신 브라우저는 HTML5를 기본 렌더링 모드로 사용하기 때문에, DOCTYPE 선언이 없어도 대부분의 경우 정상적으로 작동합니다. doctype을 명시하여 이전 버전의 브라우저와의 호환성을 유지하고, 문서가 정확하게 렌더링되도록 합니다.문서 유효성 검사코드 오류를 방지하고 웹 표준을 준수하는 데 도움을 줍니다.문서 구조 파악브라우저가 문서 구조를 빠르게 파악하도록 돕습니다.주의 사항DOCTYPE 선언은 문서의 최상단에 한 번만 선언해야 합니다.선언 시 대소문자를 구분하지 않아도 됩니다.HTML5 이후 버전에서는  선언만 사용하며, 이전 버전의 형식은 더 이상 사용되지 않습니다.권장되지 않는 태그 사용을 피하세.. 2024. 4. 25.

티스토리툴바