Post

Tips HTML(2)

Posted Updated
By SungNam Kim 6 min read

1. FOIT(Flash of Invisible Text)와 폰트 로딩시 폰트로딩 최적화 방법

FOIT란, 웹 페이지 로딩 시 텍스트가 표시되기 전까지 일시적으로 보이지 않는 현상을 말합니다. 이는 웹 폰트가 아직 로드되지 않아 발생하는 문제입니다.

  • css의 font-display 속성 활용
    • swap: 폰트 로딩 동안 시스템 폰트를 사용하고, 폰트가 로드되면 즉시 원래 폰트로 교체합니다. 가장 일반적이고 사용하기 쉬운 방법입니다.
    • fallback: 100ms 동안 텍스트를 숨기고, 3초 이내에 폰트가 로드되면 원래 폰트로 적용합니다. FOIT를 완전히 방지할 수 있지만, 짧은 지연 시간이 발생할 수 있습니다.
    • opt-in: 폰트 로딩이 완료될 때까지 텍스트를 숨깁니다. FOIT를 완벽하게 방지하지만, 사용자에게 가장 오랜 지연 시간을 초래합니다.
  • Font Subsetting
    • 사용되는 글자만 포함된 폰트 파일을 로드하여 로딩 속도를 향상시킬 수 있습니다. 특히 다양한 언어를 지원하는 웹사이트에서 효과적입니다.
  • Woff2 형식 사용
    • woff1 대비 더 작은 파일크기와 빠른 로딩 속도를 제공합니다.
  • Font Preloading 활용
    • <link rel="preload" as="font" href="font.woff2"> 처럼 preload 태그를 사용하여 폰트 파일을 사전 로드할 수 있습니다.
  • CDN
    • CDN(Content Delivery Network)을 사용하면 사용자의 위치에 가까운 서버에서 폰트 파일을 제공하여 로딩 속도를 향상시킬 수 있습니다.

2. input의 속성을 활용하기

  1. type 활용
    • type="text": 가장 기본적인 유형으로, 문자열 입력을 허용합니다. 블로그 댓글, 검색 상자 등에 많이 사용됩니다.
    • type="password": 비밀번호 입력을 숨기고 보안을 강화합니다. 로그인 페이지, 결제 페이지 등에 필수적입니다.
    • type="checkbox": 하나 이상의 옵션 중 선택할 수 있도록 합니다. 설문조사, 체크리스트 등에 사용됩니다.
    • type="radio": 여러 옵션 중 하나만 선택할 수 있도록 합니다. 설문조사, 선호도 선택 등에 사용됩니다.
    • type="number": 숫자 입력을 허용하고, 범위 제한, 단계 설정 등이 가능합니다. 상품 가격 입력, 수량 선택 등에 사용됩니다.
    • type="email": 이메일 주소 입력을 허용하고, 유효성 검사 기능을 제공합니다. 회원 가입, 문의 양식 등에 사용됩니다.
    • type="date": 날짜 입력을 허용하고, 달력 인터페이스를 제공합니다. 일정 관리, 예약 시스템 등에 사용됩니다.
    • type="search": 검색 상자를 표시하고, 검색어 자동 완성 기능을 제공합니다. 웹사이트 내 검색 기능 구현에 사용됩니다.
    • type="url":   웹 주소 (URL) 입력을 허용. 자바스크립트로 유효성 검사와 보안 유지 방안이 필요합니다.
    • type="tel":  전화번호 입력을 허용합니다.

  2. label 활용

    • label 속성을 사용하여 input 요소와 레이블을 연결하면, 접근성을 향상시키고 화면 리더 사용자에게도 입력 내용을 명확하게 전달할 수 있습니다. 또한, 레이블을 클릭하면 해당 input 요소가 자동으로 선택되어 사용자 편의성을 높일 수 있습니다.

  3. aria-label 활용

    • 시각적으로 표시되지 않는 요소에 사용합니다.
    • label을 대체하는 것이 아니며, 보조적인 역할을 위해 사용합니다.

  4. required 활용

    • required 속성을 사용하여 input 요소를 필수 입력 항목으로 설정하면, 사용자가 필수 정보를 입력하지 않으면 제출을 방지하여 데이터 유효성을 보장할 수 있습니다.
  5. maxLength 활용
    • 최대 입력 글자수를 제한 할 수 있습니다.
  6. pattern 활용
    • 사용자가 올바른 형식의 정보를 입력하도록 안내하고 데이터 유효성을 높일 수 있습니다. 예를 들어, 이메일 주소 형식, 전화번호 형식 등을 제한하는 데 사용할 수 있습니다.

3. 브라우저 자동 번역 요청 방지

  • translate 속성을 사용하면 자동 번역 요청을 방지할 수 있습니다.
    • <html translate=””>
  • 일반적으로 translate 속성은 웹사이트의 lang 속성으로 지정된 언어와 페이지 내의 컨텐츠 언어가 다를 때 사용됩니다.
HTML, Tips
web html tip
This post is licensed under CC BY 4.0 by the author.