W3C 웹 표준

W3C(Web Consortium)란?

월드 와이드 웹 컨소시엄(W3C)은 웹 기술의 표준을 개발하고 유지하는 국제 기구로,
HTML, CSS, JavaScript, 웹 접근성 등의 웹 기술을 표준화.

웹 표준(Web Standards)이 중요한 이유

• 다양한 브라우저 및 디바이스에서 일관된 웹 환경을 제공.
• 웹 접근성(Accessibility)과 사용성을 보장.
• SEO(검색 엔진 최적화) 향상.
• 웹 페이지의 유지보수 및 확장성 증가.

HTML 표준과 시맨틱 태그

• 최신 표준 : HTML5
• 시맨틱 마크업 사용 권장
  ✅ <header>, <nav>, <section>, <article>, <aside>, <footer> 등.
  ❌ <div class="header">, <div class="footer">등 비시맨틱 태그 지양.
• 웹 접근성과 SEO에 긍정적인 영향.

CSS 표준과 반응형 디자인

• 최신 표준 : CSS3
• 반응형 웹 디자인(RWD, Responsive Web Design) 필수
  ✅ 미디어쿼리 사용 : @media (max-width: 768px) { ... }
  ✅ 플렉스박스(Flexbox), 그리드(Grid) 레이아웃 활용.

• 브라우저별 CSS 차이 해결 방법
  • autoprefixer 사용 (-webkit-, -moz- 등 자동 추가).
  • normalize.css 또는 reset.css 적용.

웹 접근성 (Web Accessibility, WCAG)

• 모든 사용자(장애 포함)가 웹을 사용할 수 있도록 보장.
• W3C의 WCAG(Web Content Accessibility Guidelines) 준수
  • 대체 텍스트(alt) 제공 : <img src="..." alt="설명">
  • 키보드 네비게이션 지원 : tabindex, aria-* 속성 활용.
  • 명확한 대비(Contrast Ratio) : 색상 대비 4.5:1 이상.

🛞 TIL - 웹 접근성

JavaScript & 최신 표준 (ES6+)

• 최신 JS 표준 : ECMAScript(ES6 이상)
• 주요 기능
  • let / const (var 사용 지양).
  • Arrow Function : const func = () => {};
  • Destructuring(구조 분해 할당) : const { name, age } = person;
  • 모듈 시스템(ES Modules) : import { func } from './module.js';
  • 크로스 브라우징을 위해 Babel 같은 트랜스파일러 사용 가능.

웹 성능 최적화 (LCP, FID, CLS)

웹 페이지 로딩 속도 개선 필수.

W3C의 Core Web Vitals 지표

• LCP(Largest Contentful Paint) : 주요 콘텐츠 표시 시간.
• FID(First Input Delay) : 첫 상호작용 응답 시간.
• CLS(Cumulative Layout Shift) : 레이아웃 이동량.

최적화 방법

• 이미지 최적화 : <img srcset="">, WebP 사용
• 코드 스플리팅 및 Lazy Loading 활용.
• HTTP/2, HTTP/3 적용하여 요청 속도 향상.

웹 보안 & HTTPS

W3C 보안 가이드라인 준수
✅ HTTPS 사용(SSL/TLS 암호화).
✅ CSP(Content Security Policy) 설정으로 XSS 공격 방지.
✅ 쿠키 보안 설정 (Secure, HttpOnly, SameSite 속성).

API 표준 (Fetch API, Web Components)

최신 웹 API

• Fetch API (fetch(url).then(res => res.json()))
• Web Components (재사용 가능한 UI 컴포넌트)
• WebRTC (실시간 통신 지원)
• AJAX 대신 fetch() 또는 axios 권장.

크로스 브라우징 & 호환성 검사

W3C 표준을 따른다고 해도 모든 브라우저에서 동일하게 보이지 않음.

해결 방법
✅ caniuse.com에서 지원 여부 확인.
✅ 폴리필(Polyfill) 사용 : core-js, babel-polyfill.
✅ 브라우저 개발자 도구(DevTools)에서 테스트.

---

🔥 정리

✅ HTML5 : 시맨틱 태그 사용
✅ CSS3 : 반응형 웹 디자인 적용
✅ WCAG : 웹 접근성 고려
✅ JS(ES6+) : 최신 문법 사용
✅ 웹 성능 : LCP, FID, CLS 최적화
✅ 보안 : HTTPS 및 CSP 적용
✅ API : Fetch API 및 Web Components 사용
✅ 크로스 브라우징 : 폴리필 및 브라우저 지원 확인

➡️ W3C 웹 표준을 준수해 웹 사이트의 품질, 유지보수성, 접근성, 보안성 높일 수 있음