01. 웹 표준의 개념

Q. 인터넷 === 웹?

A. 정답은 X 인터넷이 > 웹 보다 더 포괄적인 개념이다.

🔨 1. 인터넷

• '전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망'을 의미하며
• 웹 뿐만 안니라 온라인게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스를 모두 포함한다.

🔨 2. 웹

• 한 마디로 '공간'을 의미하는데, 문서, 이미지, 영상 등 다양한 정보를 여러사람들과 공유할 수 있는 공간을 웹이라고 한다.
• 인터넷만 연결되어 있다면 '웹'이라는 공간 안에서 사용자들은 자유롭게 소통할 수 있다.

02. 웹 표준

• 하지만 익스플로러, 사파리, 파이어폭스 등 브라우저간 호환이 되지 않아 소통이 마냥 자유롭지 않았고, 개발자들은 각 브라우저마다 따로 개발해줘야했다. 이를 보완하기 위해 웹 개발의 형식을 통일 시킨 것이 바로 '웹 표준’이다.

• W3C(World Wide Web Consortium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'으로, 사용자가 어떤 운영체제나 브라우저를 사용하더라도 → 웹 페이지가 동일하게 보이고 정상적으로 작동하도록 하는 웹페이지 제작 기법을 담고 있다.
• 웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다루며, 각 기술은 화면의 구조, 표현, 동작을 담당한다.

🔨 1. 웹 표준의 장점

1. 유지보수의 용의성

• ☑️ before : 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전엔 → 구조, 표현, 동작이 뒤섞인 코드가 많아, 어느 한 부분을 수정하려면 전부 손대야 하기도 했다.
• ✅ after : 각 영역이 분리되면서 유집조수가 용이해졌고 && 코드가 경량화되면서 → 트래픽 비용이 감소하였다.

2. 웹 호환성 확보

• ☑️  before : 웹 사이트가 특정운영체제, 브라우저에 의존적이면 → 그 외 환경에선 사용 불가능 했다.
• ✅ after : 웹 표준을 준수해 웹 사이트를 제작하면 → 웹 브라우저의 종류, 버전, 운영체제, 사용기기의 종류에 상관없이 항상 동일한 결과가 나온다.

3. 검색 효율성 증대

• ✅  after : 웹 표준에 맞춰 웹 사이트를 작성하는 것만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다.
  → 적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있기 때문이다.
  → 따라서 웹 표준을 잘 준수하면 홍보를 위한 비용을 들이지 않고도 검색의 효율성을 높일 수 있다.

4. 웹 접근성 향상

• ✅  after : 웹 표준에 맞춰 개발하면 → 브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 다양한 웹 환경에 맞춰 개발할 수 있다.

03.Semantic HTML

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

⇒ semantic HTML : HTML이 구조를 만드는 것을 넘어 의미를 갖도록 만든다는 의도를 가짐.

🔨 1. HTML을 사용하는 두 가지 방식

🔧 1.

와 만으로 화면 구성하기

• 어떤 구조, 어떤 내용인지 파악하기 힘들다.

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

• 각 요소의 이름만 봐도 화면에서 어떤 역할, 어떤 내용인지 명확히 알 수 있다.

이처럼 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소를 **'시맨틱 요소'**라고 한다. 
그리고 시맨틱 요소를 적절하게 사용해 구상한 HTML을 **시맨틱 HTML**이라고 한다.

🔨 2. 시맨틱 HTML의 필요성

1. 개발자간 소통
2. 검색 효율성
- 시맨틱 요소를 사용하면 어떤 요소에 더 중요한 내용이 들어 있을지 우선순위를 정할 수 있고, 우선 순위가 높은 페이지를 검색 결과 상단에 표시할 수 있다.
-> 시맨틱 HTML를 잘 짜면 -> 웹 페이지를 검색엔진에 더 자주 뜨게 해 광고비 등 지출을 줄일 수 있다.
3. 웹 접근성
- 웹 접근성은  나이, 성별, 장애 여부, 사용 환경을 떠나 항상 동일한 수준의 정보를 제공할 수 있어야 한다.
-> HTML을 시맨틱 요소로 구성한다면 화면 구조에 대한 정보까지 추가로 전달할 수 있어 콘텐츠를 좀 더 정확히 전달할 수 있어 웹 접근성을 향상시킬 수 있다.

🔨 3. 시맨틱 요소의 종류

🔨 4. 예시로 보는 시맨틱 HTML

• <header>

현재 페이지에서는 페이지 최상단에 위치하고 있습니다.
페이지 최상단에 위치하는 경우 사이트 전체에서 사용할 수 있는 내용을 담습니다. 지금은 로고, 사이트 이름, 사이트를 구성하는 메인 페이지들, 다크모드, 검색 폼 등의 콘텐츠가 들어가 있습니다.
<article>, <main> 등 다른 요소의 머릿말 역할로도 사용할 수 있습니다
우측의 <aside> 요소에도 <header> 요소가 들어가 있습니다.

• <aside>

메인 콘텐츠와 관련이 있긴 하지만, 직접적인 연관은 없는 내용이 들어가는 요소입니다.
우측에 있는 제목별 북마크, 페이지 하단에 있는 콘텐츠 오류 제보 등의 내용이 <aside> 요소 안에 들어가 있습니다.

• <main>

페이지의 메인 콘텐츠가 들어가는 요소입니다.
해당 페이지의 주제인 Semantics와 관련된 내용이 들어있습니다.

• <article>

게시글, 뉴스 기사처럼 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다.
재사용하는 부분인 만큼, 각각의 <article> 을 식별할 수 있는 요소가 필요합니다.
<hgroup> 요소를 사용하여 식별하는 경우가 많습니다.

• <section>

문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다.
적합한 의미의 요소가 없을 때 사용하기 때문에, 의미를 부여하기 위한 요소를 포함시키는 것이 좋습니다.
<hgroup> 을 포함하는 경우가 많습니다.

• <hgroup>

제목을 표시하기 위해서 사용하는 요소입니다.
<h1> 부터 <h6> 까지 있으며, 숫자가 클 수록 글자의 크기는 작아집니다.
숫자가 작은 제목이 숫자가 큰 제목을 포함하는 방식으로 사용합니다.
해당 페이지에서는 <article> 요소의 제목으로는 <h1>, <section> 요소의 제목으로는 <h2> 를 사용하고 있습니다.
<hgroup> 요소의 숫자만 봐도 <article> 요소가 <section> 요소를 포함하는 관계임을 파악할 수 있습니다.

• <footer>

페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다.
사이트 제공자, 저작권, 정책, 사이트맵 등의 내용을 포함하고 있습니다.

04. 자주 틀리는 마크업

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

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

• 인라인 요소는 : 콘텐츠가 차지하는 만큼만. (<span>, <a>)
  • 인라인 요소는 항상 블록 요소 안에 들어가야 하며 반대의 경우는 불가능하다.
• 블록 요소는 : 가로로 넓게 화면 영역을 차지한다. (<div>, <p>)

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

🔨 2. , 요소 사용하기

- <b> 요소 : 글씨 굵게 
- <i> 요소 : 글씨 기울일 때

=> But, 웹 표준을 준수하기 위해선 이 요소들을 사용하지 않는 것이 좋다.
=> Becuase, **시맨틱하지 않고 표현을 기준으로 이뤄진 요소**이기 때문이다.

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

// 나쁜 예시
<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>

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

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

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

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

/HTML 파일
<head>
  <style>
    h1 { color : "red" }
  </style>
</head>

(O) <h1>스타일링 속성은 CSS로 작성해주세요.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>  
 
//CSS 파일
h2 { color : "yellow" }