본문 바로가기

WEB

[WEB] 웹 표준(Web Standards)

728x90
반응형

 

 

 

웹 표준이란 웹에서 사용되는 기술들의 표준화를 의미한다. 즉 웹 사이트를 구성하는 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">

 

 

 

 

 

 

728x90
반응형