웹 표준이란 웹에서 사용되는 기술들의 표준화를 의미한다. 즉 웹 사이트를 구성하는 HTML, CSS, Javascript 등의 언어들이 표준화된 방식으로 작성되어야 한다는 것. 쉽게 말하면 사용자가 어떤 브라우저나 기기를 사용하더라도 웹 페이지 화면을 동일하게 볼 수 있도록 하는 것이 바로 웹 표준인 것이다.
웹 표준의 장점
웹 페이지를 작성할 때 웹 표준을 준수하면 아래와 같은 효과를 누릴 수 있게 된다.
1. 웹 페이지의 호환성
웹 표준을 준수하면 웹 페이지가 모든 브라우저에서 일관되게 표시된다. 이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있어 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성과 운용성이 확보된다.
2. 검색 엔진 최적화(SEO)
웹 표준을 준수하면 검색 엔진에서 웹 페이지를 더욱 잘 인식할 수 있다. 이를 통해 보다 높은 검색 결과를 얻을 수 있다.
3. 유지보수 및 확장성
웹 페이지를 만드는 데 필요한 시간과 비용을 줄일 수 있어 유지보수 및 확장성이 좋아진다. 또한 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄어들고 결국 서버 부담의 감소로 이어진다.
4. 웹 접근성 향상
모든 사용자가 쉽게 웹 페이지에 접근할 수 있도록 웹 접근성을 고려할 수 있다. 예를 들어 다양한 브라우저, 휴대폰 및 PDA, 장애인 지원용 프로그램에서도 대응이 가능하므로 접근성이 향상되고 크린리더기 등 보조공학기기 사용자들이 보다 정확한 정보를 얻을 수 있도록 도움을 준다.
웹 표준을 준수하는 방법
1. DOCTYPE 선언하기
웹 페이지의 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML 또는 XHTML을 사용하는지 명시한다.
<!-- HTML 5 -->
<!DOCTYPE html>
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML !DOCTYPE declaration</title>
</head>
<body>
<p>이 문서는 HTML 문서입니다.</p>
</body>
</html>
2. 시맨틱 태그 사용하기
시맨틱 태그는 HTML5에서 새로 추가된 태그로 <header>, <nav>, <section>, <footer> 등의 태그를 사용하여 웹 페이지의 구조를 더욱 명확하게 표현할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시맨틱 태그 예제</title>
</head>
<body>
<header>
<h1>시맨틱 태그 예제</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
<section>
<h2>섹션 1</h2>
<p>본문 내용</p>
</section>
<section>
<h2>섹션 2</h2>
<p>본문 내용</p>
</section>
<aside>
<h2>광고</h2>
<p>광고 내용</p>
</aside>
<footer>
<p>저작권 © 2024 Upstage. All Rights Reserved.</p>
</footer>
</body>
</html>
3. CSS 스타일 시트 사용
CSS 스타일 시트를 사용하여 디자인과 레이아웃을 분리하고 웹 페이지의 내용과 디자인을 분리하여 유지보수 및 확장성을 높일 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>example</title>
<!-- css 파일 분리 -->
<link href="/example/examples/example.css" rel="stylesheet">
</head>
<body>
<p>이 문서는 HTML 문서입니다.</p>
</body>
</html>
4. 웹 접근성 고려
웹 페이지를 만들 때 모든 사용자가 쉽게 접근할 수 있도록 웹 접근성을 고려해야 한다. 예를 들어 시각 장애인이 스크린 리더를 사용하여 웹 페이지를 읽을 수 있도록 alt 속성을 사용하여 이미지에 대한 설명을 제공하거나, 키보드만으로 모든 기능을 사용할 수 있도록 tabindex 속성을 사용하는 등의 세심한 작업이 필요하다.
<input type="text" name="name" tabindex="1">
<input type="text" name="email" tabindex="2">
<input type="submit" value="Submit" tabindex="3">
'WEB' 카테고리의 다른 글
[WEB] HTTP의 Connectionless (1) | 2024.10.14 |
---|---|
[WEB] HTTP의 Stateful과 Stateless (0) | 2024.10.11 |
[WEB] 웹 접근성(Web Accessibility) (0) | 2024.10.07 |
[WEB] HTTP란? HTTP의 기본 개념 이해하기 (0) | 2024.10.02 |
[WEB] 브라우저 렌더링 과정 바로 알기 (0) | 2024.08.02 |