[2022.2.28.]

웹표준

웹표준이란 W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙이다.

웹표준의 장점으로는 아래와 같은것들이 있다.

1. 유지보수의 용이성

구조 표현 동작 등 각 영역이 분리되면서 유지 보수가 용이해지고, 코드가 경량화되면서 트래픽비용이 감소하였다.

2.웹호환성확보

웹브라우저의 종류나 버전, 운영체제나 사용기기에 관계없이 동일한 결과가 나오도록 할 수 있다.

3.검색효율성증대

적절한 HTML요소 사용, 정확한 정보작성 등 검색효율성과 관련된 내용도 웹 표준에서 다루고 있다.

4.웹접근성 향상

 

시맨틱 HTML

각요소의 이름만 보고도 화면에서 어떤 역할을 하게 될지, 어떤 내용을 알게 될지 보다 명확하게 알 수 있다,

자주틀리는 마크업

1. 인라인 요소 안에 블록요소 넣기

// h1, div 요소는 블록 요소이고,
// a, span 요소는 인라인 요소입니다.
<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>

인라인 요소는 항상 블록요소안에 들어가야하고 반대의 경우는 있어서는 안된다.

 

2. <b> <i>요소 사용하기

<b>글씨를 두껍게</b>   -- 대체하기 -->  <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i>   -- 대체하기 -->  <em>콘텐츠 강조하기</em>

웹표준을 준수하기 위해 <b> <i>는 사용하지 않는것이 좋음

 

3. <hgroup>마구잡이로 사용하기 

// 나쁜 예시
<h1>엄청 큰 글씨</h1>
    <h3>적당히 큰 글씨</h3>
  <h2>큰 글씨</h2>
          <h6>엄청 작은 글씨</h6>
      <h4>그냥 글씨</h4>

// 좋은 예시
<h1>제목</h1>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
    <h3>작은 목차</h3>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
      <h4>더 작은 목차</h4>
      <h4>더 작은 목차</h4>

4. <br/>연속으로 사용하기

// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.

// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>

// 좋은 예시 2
  //HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>

  //CSS 파일
.margin { margin: 10px }

아예 별도 단락으로 구성하거나, css속성으로 여백을 조정하는 것이 바람직하다.

 

크로스 브라우징

크로스 브라우징이랑 웹사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있게 만드는 작업을 의미한다.

 

크로스브라우징 워크 플로우

 

1. 초기기획: 초기기획단계에서 정확하게 결정해야한다. 어떤컨텐츠와 기능이 필요한지, 고객이 사용하는 브라우저와 기기는 무엇인지 생각해보고 여기에 맞는 기술을 사용해서 개발할 수 있도록 기획해야한다.
2. 개발: 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야한다. 크로스브라우징이 힘든 상황을 만나게 될 경우, 이를 인정하고 대체수단을 마련해야한다,
3. 테스트/발견: 직접 테스트를 수행할 수도 있지만 자동으로 테스트를 진행해주는 도구를 이용하는 것도 방법이다.
4. 수정/반복: 섣불리 코드를 수정했다가는 다른 브라우저에서 버그가 발생할 수 있으므로, 조건문을 작성해 다른코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다.