Interview

웹 표준

유지 보수에 용이하다.
- HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조와 표현,동작이 뒤섞인 코드가 많았는데, 이를 분리하였기에 유지 보수가 용이해졌고 코드가 경량화되며 트래픽 비용이 감소되었다.
웹 호환성을 확보한다.
- 웹 사이트가 특정 운영체제나 브라우저에 종속적이라면 그 외 환경에서는 사용이 불가능하다.
- 웹 표준을 준수하면 브라우저의 종류나 버전, 운영 체제나 사용 기기의 종류에 상관없이 항상 동일한 결과가 나온다.
검색 효율성이 올라간다.
- 적절한 HTML요소의 사용, 정확한 정보 작성 등은 검색 엔진에서 더 높은 우선 순위로 노출된다.
웹 접근성이 향상된다.
- 브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 다양한 환경에서도 일관된 화면을 보여줄 수 있다.

Semantic HTML은 의미가 있는 구조를 말하며 Header,Nav,Main 등의 태그를 말한다.
적절하게 사용하면 구조를 명시적으로 나타내기 때문에, 태그명만 보고 어떤 역할을 하게 될지 보다 명확하게 알 수 있어 개발자간 원활한 소통이 가능하다.
Semantic HTML를 사용하여 요소의 우선 순위가 매겨지는데, HTML 구조를 파악하는 검색엔진이 요소의 중요성을 평가하여 읽기 때문에 검색엔진의 효율성을 높일 수 있다.
장애인의 웹 페이지 접근 등에 대한 행동이 발생했을 때, 스크린리더를 사용해 화면을 읽고, Semantic HTML로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달할 수 있는 등의 웹 접근성이 향상된다.

요소 종류	설명
`<header>`	페이지나 요소의 최상단에 위치하는 머릿말 역할을 한다.
`<nav>`	메뉴,목차 등에 사용되는 요소이다.
`<aside>`	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소이다.
`<main>`	문서의 메인이 되는 주요 콘텐츠를 담는 요소이다.
`<article>`	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소이다. 각각의 `<article>`을 구분하기 위한 수단이 필요하며, 보통 (`<hgroup>`)을 포함하는 방법을 사용한다.
`<section>`	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용한다. 제목(`<hgroup>`)을 포함하는 경우가 많다.
`<hgroup>`	제목을 표시할 때 사용하는 요소로 `<h1>`~`<h6>`이다.
`<footer>`	페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소이다.

HTML 요소는 인라인 요소와 블록 요소로 나뉘는데, 블록 요소는 콘텐츠의 길이만큼 차지하기 때문에 요소의 영역만큼 차지하는 인라인 요소 안에 들어가면 안된다.
1 <a href=""><h1>나쁜 예시</h1></a> <span><div>나쁜 예시</div></span>
웹 표준을 준수하기 위해선 글씨를 굵게 하거나 기울일 때 사용하는 <b>,<i>는 쓰지 않는 것이 좋으며, 콘텐츠 자체에 의미를 부여하며 똑같은 스타일을 가진 <strong>,<em>을 사용하는 것이 좋다.
<h>요소의 무분별한 사용은 사용자에게 잘못된 화면 구조 정보를 전달한다.
요소 사이에 여백을 주거나 단락을 구별하고 싶을 때는 연속되는 <br>을 사용하는 것이 아닌 CSS 속성을 주거나 별도의 단락을 구별하는 등의 방법이 필요하다.
<h1 style="color:blue"> 등과 같이, 요소에 직접 스타일을 적용할 경우 웹 표준에 의한 HTML,CSS가 분리되지 않기 떄문에 따로따로 작성한다.

웹 사이트에 접근하는 브라우저의 종류와 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다.
- 모든 브라우저에서 완전히 똑같은 화면이 보이도록 만드는 것이 아니라, 동등한 수준의 정보와 기능을 목표로 하는 것이다.
ActiveX는 익스플로러용 플러그인으로, 웹 브라우저와 웹 문서만으로는 이용할 수 없는 추가 기능들을 사용할 수 있게 해주는 브라우저 외부 프로그램인데, 인터넷 익스플로러에서만 가능했기 때문에 어떤 기능을 사용하기 위해 무한대로 확장을 해야만 했다.