🔍 웹 표준

어떤 환경(다양한 브라우저)에서도 동일하게 이용할 수 있는 웹 페이지를 위해, W3C(World Wide Web Consortium)에서 권장하는 웹에서 표준적으로 사용되는 기술이나 규칙을 의미하며, HTML, CSS, JavaScript 등의 기술을 다룬다.

웹 표준을 준수하며 웹 페이지를 만들면 다음과 같은 장점이 있다.

• 1. 유지보수의 용이성
  
  HTML, CSS, JavaScript 각 영역이 세분화되면서 코드가 경량화되어, 유지보수 및 트래픽 비용이 감소한다.
  
  

• 2. 웹 호환성
  
  웹 부라우저의 종류, 버전, 운영체제나 기기 종류에 상관없이 항상 동일한 화면을 볼 수 있다.
  
  

• 3. 검색 효율성
  
  검색 효율성을 높이기 위한 적절한 HTML 요소 사용, 정확한 정보 작성 등의 내용또한 웹 표준에 포함되어 있다.
  
  

• 4. 웹 접근성
  
  모든 환경과 사용자에 맞춰서 개발할 필요가 없다.

👀 Semantic HTML

화면의 구조는 <div>와 <span> 요소만으로도 만들 수 있지만, 각 요소들이 어떤 역할을 할지 파악하는데에 어려움이 있다.

하지만 같은 구조로 나누되, 시맨틱 요소를 사용하여 구성한다면, 각 요소의 이름을 보고 어떤 역할을 할 지 파악할 수 있다.

📔 HTML 공부할 때, 따로 블로깅 해둠. => 시맨틱 요소

👀 Mark-up 사용 시 주의사항

• 1. inline 요소 안에 block 요소 작성 X
  
  inline은 콘텐츠가 차지하는 만큼만(ex. <span>), block은 한 줄(<div>)을 차지하며, inline 요소는 항상 block 요소 안에 작성되어야 한다.
  
  

<h1><a>옮은 예시</a></h1>
<a><h1>나쁜 예시</h1> </a>

<div><span>옳은 예시 2</span></div> 
<span><div>나쁜 예시 2</div></span>

• 2. <b>, <i> 요소 사용 X
  
  
  각각 글씨를 굵게, 기울일 때 사용하는 요소이나, 시맨틱 요소가 아니므로, 위의 요소들을 대체할 수 있는 <strong>, <em> 요소를 사용하는 것을 권장한다.

• 3. <hgroup> 의 무분별한 사용 X
  
  
  <hgroup> 요소의 사용은 콘텐츠의 상하 관계를 표시하기 위함으로, 단지 글자의 스타일 속성을 적용하기 위한 목적으로 사용하는 것은 사용자에게 잘못된 화면 구조 정보를 전달하게 된다.

• 4. <br /> 연속 사용 X
  
  <br /> 의 사용은 줄 바꿈을 위한 목적으로, 단지 요소 사이의 간격을 만들기 위한 목적으로 사용하는 것은 옳지 않다.
  요소 사이의 간격이 필요한 경우, <p> 요소를 사용하여 별도의 단락으로 구별하거나 CSS속성으로 조정하는 것이 적합하다.

• 5. inline 스타일링 사용 X

  inline으로 스타일링 속성을 설정하는 것은 HTML, CSS, JavaScript로 분리한 영역을 다시 합치는 것과 같기 때문에, 웹 표준에 어긋난다. 따라서, HTML과 CSS코드는 분리해서 작성하는 것이 바람직하다.

👀 크로스 브라우징

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

브라우저마다 사용하는 렌저링 엔진이 다르므로, 화면을 완전히 동일하게 만드는 것은 불가능하기 때문에, 동등한 수준의 정보와 기능을 제공하는 것이 크로스 브라우징의 목적이라고 볼 수 있다.

✔ 워크 플로우

• 1. 초기 기획
  
  

어떤 웹사이트를 만들 것인지 결정 -> 어떤 콘텐츠+기능이 있어야 하는 지, 디자인 결정 -> 타겟 고객층 생각 -> 고객이 사용하는 브라우저 및 기기는 무엇일 지 생각

• 2. 개발
  
  

각 브라우저의 호환성을 파악한 후, 코드를 작성한다. 아래와 같이 MDN, Can I Use 에서 코드의 호환성을 확인할 수 있다.

❕ 일부 오래된 브라우저에서는 제대로 기능하지 않을 수도 있다. 또한, 크로스 브라우징이 힘든 상황에 대한 대체 수단을 마련할 필요성이 있다.

• 3. 테스트/발견
  
  

-안정적인 desktop 브라우저에서 테스트를 진행한다.
-desktop외 기기(스마트폰, 태블릿 등)의 브라우저에서 테스트를 진행한다.
-그 외, 기획단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행한다.
-Window, Linux, Mac 등 다양한 운영체제에서도 테스트를 진행한다.

⭐ TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴을 사용해 자동으로 테스트를 진행할 수도 있다.

• 4. 수정/반복
  
  

테스트단계에서 발견한 버그를 수정한다. 단, 섣불리 수정하지 않고 조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다. 수정 후 3번으로 돌아가 반복한다.

Reference: 코드스테이츠