IT/HTML,CSS,JavaScript

[프론트엔드] 웹 표준 & 브라우저

j8970 2025. 3. 8. 22:25

웹 표준 (Web Standards)

📌 웹 표준의 정의

웹에서 사용되는 기술이나 규칙을 ‘표준화’한 것
✅ 웹 페이지가 다양한 장치 및 브라우저에서 일관되고 예측 가능한 방식으로 작동하도록 보장


📌 웹 표준 준수의 필요성

✅ 일반 사용자

  • 장소나 브라우저에 상관없이 쉽게 웹 사이트를 볼 수 있음

✅ 웹 개발자와 디자이너

  • 코드의 유지 보수 용이, 개발 시간 절약

✅ 호환성 (Compatibility)

  • 다양한 브라우저 및 장치에서 동일한 사용자 경험 제공
  • 브라우저 간의 기능적 차이 최소화

✅ 접근성 (Accessibility)

  • 장애가 있는 사용자 및 다양한 환경에서의 웹 접근성 향상
  • 스크린 리더와 같은 보조 기술의 사용이 용이

✅ 지속 가능성 (Sustainability)

  • 표준 준수 코드는 미래 기술 변화에도 적응력이 뛰어남
  • 유지 관리 및 확장성 개선

💡 크로스 브라우징 (Cross Browsing)
→ 웹 페이지 제작 시 모든 브라우저에서 동일한 사용자 경험을 제공하는 기술과 방법
→ HTML5, CSS3, JavaScript를 W3C의 웹 표준에 맞게 코딩하면 크로스 브라우징이 정상적으로 동작
브라우저마다 렌더링 엔진이 다름


📌 웹 표준의 주요 구성 요소

🔹 HTML (HyperText Markup Language)

  • 웹 페이지의 구조와 내용을 정의하는 언어
  • 최신 버전: HTML5

🔹 CSS (Cascading Style Sheets)

  • 웹 페이지의 스타일과 레이아웃을 지정하는 언어
  • 스타일 규칙을 통해 콘텐츠의 디자인을 제어
  • 최신 버전: CSS3

🔹 JavaScript

  • 동적인 상호작용과 웹 페이지의 행동을 제어하는 스크립트 언어
  • DOM (Document Object Model) 조작 가능

🔹 접근성 지침 (Accessibility Guidelines)

  • 웹 콘텐츠를 모든 사용자(특히 장애가 있는 사용자) 가 접근하고 이해할 수 있도록 하는 웹 접근성 가이드라인
  • 스크린 리더 호환성
    • 스크린 리더 사용자를 위해 ARIA(Accessible Rich Internet Applications) 레이블과 role을 적절히 사용
    • 요소의 목적과 기능을 명확히 설명

💡 웹 접근성(Web Accessibility)
모든 사용자가 웹사이트를 효과적으로 사용할 수 있도록 보장하는 일련의 권고사항
‘사람’에 초점 (장애가 있는 사용자 OR 고령 사용자)


📌 브라우저 (Browser)

웹 콘텐츠를 사용자에게 제공하는 도구

🔹 브라우저의 기본 인터페이스

요소 정의
창(Window) 웹 콘텐츠가 표시되는 메인 인터페이스, 사용자가 이를 통해 인터넷을 탐색
탭(Tab) 하나의 브라우저 창에서 여러 웹 페이지를 동시에 열고 관리 가능
주소창(Address Bar) 사용자가 웹 사이트의 URL을 입력하거나 확인하는 영역
뷰포트(Viewport) 브라우저 창에서 실제로 웹 페이지가 표시되는 영역, 사용자가 한 번에 볼 수 있는 콘텐츠 범위

📌 웹 표준을 준수하면 다양한 환경에서 웹 사이트가 안정적으로 동작하며, 유지보수성과 접근성이 향상된다! 🚀