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
을 적절히 사용 - 요소의 목적과 기능을 명확히 설명
- 스크린 리더 사용자를 위해 ARIA(Accessible Rich Internet Applications) 레이블과
💡 웹 접근성(Web Accessibility)
→ 모든 사용자가 웹사이트를 효과적으로 사용할 수 있도록 보장하는 일련의 권고사항
→ ‘사람’에 초점 (장애가 있는 사용자 OR 고령 사용자)
📌 브라우저 (Browser)
웹 콘텐츠를 사용자에게 제공하는 도구
🔹 브라우저의 기본 인터페이스
요소 | 정의 |
---|---|
창(Window) | 웹 콘텐츠가 표시되는 메인 인터페이스, 사용자가 이를 통해 인터넷을 탐색 |
탭(Tab) | 하나의 브라우저 창에서 여러 웹 페이지를 동시에 열고 관리 가능 |
주소창(Address Bar) | 사용자가 웹 사이트의 URL을 입력하거나 확인하는 영역 |
뷰포트(Viewport) | 브라우저 창에서 실제로 웹 페이지가 표시되는 영역, 사용자가 한 번에 볼 수 있는 콘텐츠 범위 |
📌 웹 표준을 준수하면 다양한 환경에서 웹 사이트가 안정적으로 동작하며, 유지보수성과 접근성이 향상된다! 🚀