본문 바로가기
Tips

프론트엔드 개발 팁 모음 HTML(2)

by 구월에작은섬 2024. 4. 25.
  1. FOIT(Flash of Invisible Text)와 폰트 로딩시 폰트로딩 최적화 방법
    • css의 font-display 속성 활용
      1. swap: 폰트 로딩 동안 시스템 폰트를 사용하고, 폰트가 로드되면 즉시 원래 폰트로 교체합니다. 가장 일반적이고 사용하기 쉬운 방법입니다.
      2. fallback: 100ms 동안 텍스트를 숨기고, 3초 이내에 폰트가 로드되면 원래 폰트로 적용합니다. FOIT를 완전히 방지할 수 있지만, 짧은 지연 시간이 발생할 수 있습니다.
      3. opt-in: 폰트 로딩이 완료될 때까지 텍스트를 숨깁니다. FOIT를 완벽하게 방지하지만, 사용자에게 가장 오랜 지연 시간을 초래합니다.
    • Font Subsetting
      1. 사용되는 글자만 포함된 폰트 파일을 로드하여 로딩 속도를 향상시킬 수 있습니다. 특히 다양한 언어를 지원하는 웹사이트에서 효과적입니다.
    • Woff2 형식 사용
      1. woff1 대비 더 작은 파일크기와 빠른 로딩 속도를 제공합니다.
    • Font Preloading 활용
      1. <link rel="preload" as="font" href="font.woff2"> 처럼 preload 태그를 사용하여 폰트 파일을 사전 로드할 수 있습니다.
    • CDN
      1. CDN(Content Delivery Network)을 사용하면 사용자의 위치에 가까운 서버에서 폰트 파일을 제공하여 로딩 속도를 향상시킬 수 있습니다.
  2. FOIT란, 웹 페이지 로딩 시 텍스트가 표시되기 전까지 일시적으로 보이지 않는 현상을 말합니다. 이는 웹 폰트가 아직 로드되지 않아 발생하는 문제입니다.
  3. input의 속성을 활용하기
    1. type 활용
      1. type="text": 가장 기본적인 유형으로, 문자열 입력을 허용합니다. 블로그 댓글, 검색 상자 등에 많이 사용됩니다.
      2. type="password": 비밀번호 입력을 숨기고 보안을 강화합니다. 로그인 페이지, 결제 페이지 등에 필수적입니다.
      3. type="checkbox": 하나 이상의 옵션 중 선택할 수 있도록 합니다. 설문조사, 체크리스트 등에 사용됩니다.
      4. type="radio": 여러 옵션 중 하나만 선택할 수 있도록 합니다. 설문조사, 선호도 선택 등에 사용됩니다.
      5. type="number": 숫자 입력을 허용하고, 범위 제한, 단계 설정 등이 가능합니다. 상품 가격 입력, 수량 선택 등에 사용됩니다.
      6. type="email": 이메일 주소 입력을 허용하고, 유효성 검사 기능을 제공합니다. 회원 가입, 문의 양식 등에 사용됩니다.
      7. type="date": 날짜 입력을 허용하고, 달력 인터페이스를 제공합니다. 일정 관리, 예약 시스템 등에 사용됩니다.
      8. type="search": 검색 상자를 표시하고, 검색어 자동 완성 기능을 제공합니다. 웹사이트 내 검색 기능 구현에 사용됩니다.
      9. type="url":   웹 주소 (URL) 입력을 허용. 자바스크립트로 유효성 검사와 보안 유지 방안이 필요합니다.
      10. type="tel":  전화번호 입력을 허용합니다.
    2. label 활용
      1. label 속성을 사용하여 input 요소와 레이블을 연결하면, 접근성을 향상시키고 화면 리더 사용자에게도 입력 내용을 명확하게 전달할 수 있습니다. 또한, 레이블을 클릭하면 해당 input 요소가 자동으로 선택되어 사용자 편의성을 높일 수 있습니다.
    3. aria-label 활용
      1. 시각적으로 표시되지 않는 요소에 사용합니다.
      2. label을 대체하는 것이 아니며, 보조적인 역할을 위해 사용합니다.
    4. required 활용
      1. required 속성을 사용하여 input 요소를 필수 입력 항목으로 설정하면, 사용자가 필수 정보를 입력하지 않으면 제출을 방지하여 데이터 유효성을 보장할 수 있습니다.
    5. maxLength 활용
      1. 최대 입력 글자수를 제한 할 수 있습니다.
    6. pattern 활용
      1. 사용자가 올바른 형식의 정보를 입력하도록 안내하고 데이터 유효성을 높일 수 있습니다. 예를 들어, 이메일 주소 형식, 전화번호 형식 등을 제한하는 데 사용할 수 있습니다.
  4. 브라우저 자동 번역 요청 방지
    1. translate 속성을 사용하면 자동 번역 요청을 방지할 수 있습니다.
      1. <html translate=””>
    2. 일반적으로 translate 속성은 웹사이트의 lang 속성으로 지정된 언어와 페이지 내의 컨텐츠 언어가 다를 때 사용됩니다.
반응형
저작자표시

'Tips' 카테고리의 다른 글

프론트엔드 개발 팁 모음 CSS(2)  (0) 2024.04.25
프론트엔드 개발 팁 모음 CSS(1)  (0) 2024.04.25
프론트엔드 개발 팁 모음 HTML(1)  (0) 2024.04.25
티스토리에 마크다운 스타일 게시물 작성하기  (4) 2018.09.12
프로그래밍 인터넷 강의 사이트 추천  (3) 2018.07.09

관련글

티스토리툴바