웹 표준

ock·2023년 2월 28일

웹표준

웹 : 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간

웹표준: W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 기술이나 규칙’

사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있또록 하는 웹페이지 제작 기법을 담고있다.

웹개발에서 사용되는 언어인 HTML,CSS, JavaScript 등의 기술을 다룬다. 이 세 기술은 화면의 구조, 표현, 동작을 각각 담당한다.

<웹표준의 장점>

유지 보수의 용이성
웹 호환성 확보
검색 효율성 증대
웹 접근성 향상

Semantic HTML

semantic : 의미의, 의미가 있는 이라는 뜻의 영단어
HTML : 화면의 구조를 만드는 마크업 언어

<div> 와 <span> 으로 화면 구성하기

HTML에는 굉장히 많은 종류의 요소가 있다. 그 중에서도 <div>와 <span>만으로도 화면을 구성할 수 있다.

하지만 <div>와 <span>만으로는 화면이 어떤 구조로 나누어져있는지까지만 알 수 있지, 어떤 애용이 들어갈지는 명시되어 있지않기 때문에 각 요소의 정확한 역할은 알 수 없다.

시맨틱 요소로 화면 구성하기

<div>와 <span>만으로 구성했을 때와 비교하면, 각 요소의 이름만 보고도 화면에서 어떤 역할을 하게 될 지, 어떤 내용을 담게 될지 보다 더 명확하게 알 수 있게 되었다.

요소의 이름에 맞게 화면을 구성한다면 <header>는 헤더의 역할을, <nav>는 네비게이션 바 역할을 하게 될 것이다.

이처럼 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소를 시멘틱 요소라고 한다.

그리고 시맨틱 요소를 적절하게 사용하여 구성한 HTML을 시멘틱 HTML이라고 한다.

시맨텍 HTML의 필요성

개발자간의 소통
검색 효율성

⇒ 검색엔진은 HTML 코드를 보고 문서의 구조를 파악한다.

시맨택요소를 사용하면 어떤 요소에 더 중요한 내용이 들어있을지 우선순위를 정할 수 있고, 우선순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 된다.
웹 접근성

⇒ 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 함을 뜻한다.

시맨틱 요소의 종류

<자주 사용되는 시맨틱 요소들>

<header> : 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소

<nav>: 메뉴, 목차 등에 사용되는 요소

<aside> : 문서와 연관은 있지만, 직접적인 연관은 없는 내용들 담는 요소

<main> : 이름 그대로 문서의 메인이 되는 주요 컨텐츠를 담는 요소

<article> : 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소 ⇒ 각각의 <article> 을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용한다.

<section> : 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용한다. 제목(<hgroup>)을 포함하는 경우가 많다.

<hgroup> : 제목을 표시할 때 사용하는 요소로 <h1>~ <h6>요소가 <hgroup> 이다.

<footer> : 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소

MDN 사이트 Semantics 페이지

자주틀리는 마크업

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

⇒ HTML 요소는 표시방법에 따라 인라인 요소, 블록 요소로 나뉜다.

인라인 요소는 콘텐츠가 차지하는 만큼만, 블록 요소는 가로로 넓게 화면 영역을 차지한다.
- 대표적인 인라인 요소: <span>
- 대표적인 블록 요소: <div>
인라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안된다.
<b>, <i> 요소 사용하기

⇒ <b>,<i> 요소들은 표현을 기준으로 이름이 지어진 요소이기 때문에 아래와 같이 대체하여 사용하는 것이 좋다.
- <b>: 글씨를 굵게 만들 때 사용하는 요소 ⇒ <strong>
- <i>: 글씨를 기울일 때 사용하는 요소 ⇒ <em>
<strong>,<em> 두 요소는 글씨에 효과를 줌과 동시에 각 콘텐츠를 강조하는 의미를 부여한다.
<hgroup> 마구잡이로 사용하기

⇒ <hgroup> 요소들은 목차의 역할을 하면서 콘텐츠의 상하 관계를 표시하기 위해서 사용한다.
<br />연속으로 사용하기

⇒ 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소.

이러한 목적이 아닌 요소 사이에 간격을 만들기 위한 목적으로 남발해서는 안된다.

요소 사이에 간격이 필요한 경우에는 아예 별도의 단락으로 구별하거나 CSS 속성을 주어 여백을 조정해주는 것이 바람직하다.
인라인 스타일링 사용하기

⇒ HTML과 CSS 코드를 분리해서 작성해라.