나의 HTML 보일러플레이트

6 days ago 13

웹은 하위 호환성을 지키면서 새 기능을 도입해 왔으며, HTML 보일러플레이트는 최신 기능을 활성화하고 소셜 미디어 미리보기·스타일·브라우저 테마 등을 설정하는 기본 틀임 head 요소 순서는 성능에 큰 영향을 주므로, 문자 인코딩을 문서 첫 1,024바이트 안에 선언하고 스타일시트를 직접 연결하며 필요한 글꼴을 사전 로드함 모바일 화면에는 width=device-width 를 사용하고 시스템 글자 크기를 따르는 text-scale을 고려하되, 확대·축소 제한은 극히 드문 예외를 제외하면 접근성을 해치므로 피해야 함 Open Graph와 브라우저 연동 설정으로 공유 미리보기, SVG 파비콘, 테마 색상, 피드 자동 탐색, OpenSearch 검색, 홈 화면 추가를 지원함 이 템플릿은 사이트별 수정이 필요한 출발점이며, 학술 인용·기사·영상 등 콘텐츠 유형과 페이지 요구에 맞춰 메타 태그와 JSON-LD 구조화 데이터를 선택해야 함 호환성을 유지하며 최신 기능을 선택하는 기본 틀 초기 HTML은 TITLE, H1, P, A만으로도 유효한 문서를 만들 수 있었으며, 첫 공식 표준인 HTML 2.0이 1995년 등장하면서 DOCTYPE, head, body를 갖춘 문서 구조가 자리 잡음 웹 표준의 “웹을 깨뜨리지 않는다” 원칙 덕분에 초기 웹사이트도 대체로 현대 브라우저에서 작동하지만, 기존 사이트를 깨뜨리지 않아야 한다는 제약은 변경을 어렵게 함 특정 요소가 있으면 새 기능을 사용하고 없으면 기존 동작으로 돌아가는 방식으로 호환성을 유지함 외부 서비스와 시스템의 요구까지 더해지면서 반복적으로 사용하는 보일러플레이트가 필요해짐 이 템플릿은 개인 CSS 초기화 스타일과 마찬가지로 개인의 취향과 선택이 강하게 반영된 기본 구조이자 HTML 문서 작성용 참고 자료임 문서 선언과 head 순서 head 요소 순서는 성능에 큰 영향을 주며, Capo.js로 성능 관점에서 순서를 평가할 수 있음 <!doctype html> 은 HTML 5에서 도입된 HTML Living Standard용 문서 유형 선언으로, 쿼크 모드 진입을 피하기 위해 포함함 <html lang="en"> 은 문서를 감싸고 RFC 5646에 맞는 언어 태그로 페이지 기본 언어를 지정함 개별 요소에서 언어를 재정의할 수 있음 언어 지정은 자동 번역, 하이픈 처리 같은 조판, 특히 스크린 리더를 비롯한 보조 기술에 중요함 <meta ...

Read Entire Article

나의 HTML 보일러플레이트

Related

LLM과 함께 글 쓰는 법

Show GN: 묻기 전에 먼저 움직이는 Slack AI 팀원

Show GN: 채널톡, intercom 에 지친 팀들을 위해,, 레닛(lenit)을 소개합니다.

Qwen 3.8 Omni Flash

배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것

Show GN: SQLBraid - SQL을 그대로 쓰는 TypeScript 라이브러리

OpenAI 해킹

사진작가 오스틴 만의 iPhone 18 Pro 카메라 리뷰

Tips

Trending

Popular

[美특징주]월마트, 동일매장 매출 성장 둔화에 주가 10% 급락

[속보] 네팔 홍수로 고립됐던 한국인 10명 중 9명 안전지역 이송

“돌발적으로 저질렀다”…제자 물통에 소변 넣은 교사, 日 교육계 ‘발칵’

한로로, 코르티스 ‘조롱 가사’ 논란 직접 등판…“좋은 뜻으로 받아들여”

베테랑 김현수 끝내기안타…KT 선두 지켰다, 4년차 김정운은 데뷔 첫 승 감격 [SD 수원 스타]

네팔 홍수 버티고 명소된 ‘기적의 초록집’…집주인이 밝힌 비밀은

Qwen 3.8-Flash-Next(125B a6B), 2026년 8월 26일 공개 예정

부러진 히말라야 빙하가 물 가뒀다가 ‘펑’…“화산 폭발 같았다”

에브리봇, 中 피지컬 AI 기업 엑스스퀘어와 MOU…휴머노이드 사업 확대

'AI 의약 플랫폼' 미라보 바이오, 프리 A 40억원 투자 유치[마켓인]