웹 표준
: 어떤 환경에서도 이용할 수 있는 웹 페이지
웹 접근성
: 어떤 사람이든 이용할 수 있는 웹 페이지

Chapter1. 웹 표준

개념, 등장배경, 필요성, 웹 표준 규칙에 맞게 HTML코드 작성하는 방법을 알아보자

웹이 뭘까?
인터넷은 웹 기반으로 작동한다(X)
=> 인터넷이 웹보다 포괄적인 개념이다.
인터넷 : 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망

• 웹, 온라인 게임, 모바일 앱, 이메일 등 네트워크 사용하는 다양한 서비스를 모두 포함
  웹 : '공간'
• 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간
• 2000년대 초에는 인터넷 익스플로러에서는 작동이 되어도 사파리나 파이어폭스 같은 다른 브라우저에서는 작동이 안되는 등 브라우저간 호환이 되지 않았다. (화면도 정상적으로 안나왔음) => 개발자가 각 브라우저마다 따로 개발을 했음 => 골치 아픈 상황 => 웹 개발의 형식을 통일시키자!!! : 웹 표준

웹 표준의 개념

웹 표준

• 웹에서 표준적으로 사용되는 기술이나 규칙
• 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일, 정상 작동
• 웹 개발 사용 언어 HTML, CSS, JAVASCRIPT 기술을 다룬다(화면의 구조, 표현, 동작)

웹 표준의 장점

1. 유지 보수 용이성

• 웹 표준으로 HTML, CSS, JS로 사용방법을 정리하기 전에는 구조, 표현, 동작이 뒤섞인 코드들이 많았다. => 한 부분을 고치려면 전부 고쳐야 할 때가 생김
• 웹 표준으로 인해 각 영역이 분리 => 유지 보수 용이
• 코드 경량화 => 트래픽 비용 감소

2. 웹 호환성 확보

• 웹 사이트가 웹 표준을 준수하여 제작되면 웹 브라우저 종류, 버전, 운영체제, 사용 기기 종류에 상관없이 동일한 작동이 가능해졌다.

3. 검색 효율성 증대

• 적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 => 검색 엔진에서 더 높은 우선순위로 노출된다.

4. 웹 접근성 향상

• 웹을 사용하는 사람들은 다양하다. 이 모든 사용자에 맞춰서 웹페이지를 개발하는 것은 어렵다. 사용자가 웹 표준을 습득하고 모두가 익숙하게 웹페이지에 접근하는 것이 더 좋은 방법

Semantic HTML

semantic : 의미가 있는
html : 화면의 구조를 만드는 마크업 언어

semantic html

• 구조를 만드는 것을 넘어 의미를 갖도록 만든다.
• 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지는 것
• 시맨틱 요소를 적절하게 사용하여 구성한 html

두 html을 비교해보자
화면의 구조만 알 수 있고, 어떤 내용일지는 잘 모르겠다.

요소가 어떤 내용, 어떤 기능을 할지 확실하게 알 수 있다.

시맨틱 HTML의 필요성

1. 개발자간 소통

• div태그나 span태그로만 작성하게 되면 어떤 기능을 하는지 주석, id, class 를 사용해 표기, 설명해야 한다. 각 요소의 기능을 정의하느라 쏟는 시간이 너무 많아짐

2. 검색 효율성

• 검색 엔진은 html 코드를 보고 문서의 구조를 파악한다. div 태그나 span 태그만 사용한 문서에서는 모든 요소가 비슷한 중요도의 내용을 담고 있다고 판단한다. 하지만 semantic 요소를 사용하면 내용의 우선순위를 파악=> 검색 결과 상단에 표시
• semantic HTML 코드를 잘 작성하는 것 만으로도 웹 페이지를 검색 엔진에 잘 노출시켜 광고비 등의 지출을 줄일 수 있다.

3. 웹 접근성

• 웹 접근성이란 나이, 성별, 장애 여부, 사용환경을 떠나 동일한 수준의 정보를 제공하는 것
• 시각 장애인의 경우, 웹 페이지에 접근할 때 음성으로 화면을 스크린리더를 통해 인식한다. 이때 HTML이 시맨틱 요소로 구성되어 있다면 구조에 대한 정보까지 추가로 전달할 수 있다. 콘텐츠를 더 정확하게 전달할 수 있다는 뜻

시맨틱 요소의 종류

1. header 태그
   : 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소

• 로고, 사이트 이름, 사이트 구성하는 메인 페이지들, 다크모드, 검색 폼등의 콘텐츠
• article, main, aside 태그의 머릿말 역할로도 가능

2. nav 태그
   : 메뉴, 목차 등에 사용되는 요소

• 링크들을 담고 있다.

3. aside 태그
   : 문서와 연관은 있지만 , 직접적인 연관은 없는 내용을 담는 요소

• 우측에 있는 제목별 북마크, 페이지 하단에 있는 콘텐츠 오류 제보 등의 내용

4. main 태그
   : 문서의 메인이 되는 콘텐츠를 담는 요소

• 해당 페이지의 주제인 semantics와 관련된 내용이 들어있다.

5. article 태그
   : 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소

• article 태그를 구분하기 위한 수단으로, 보통 제목을 포함하는 hgroup 태그로 식별한다.

6. section 태그
   : 문서의 독립적인 구획 나타냄

• 제목 hgroup 태그를 포함하는 경우가 많다.

7. hgroup 태그
   : 제목을 표현할 때 사용하는 요소
   : h1 ~ h6 태그

• article 태그의 제목으로는 h1 태그 . section 태그 요소의 제목으로는 h2태그를 사용하고 있다.

8. footer 태그
   : 페이지나 요소의 최하단에 위치하는 꼬릿말 역할

• 사이트 제공자, 저작권, 정책, 사이트맵 등의 내용을 포함한다.
  그 외 시맨틱 요소 100개정도 ㅎㅎhttps://developer.mozilla.org/ko/docs/Glossary/Semantics

자주 틀리는 마크업

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

html 요소는 표시 방법에 따라 inline 요소, block 요소로 나뉜다.
inline 인라인 요소는 콘텐츠가 차지하는 만큼만 차지

• ex) span태그, a태그
  block 블록 요소는 가로로 넓게 화면 영역을 차지
• ex) div 태그, h1 태그

<a href=""><h1> 나쁜 예시1</h1></a>
<span><div> 나쁜 예시2</div></span>

블록 요소의 자식 요소로 인라인 요소가 들어있는 것 맞게 작성된 것 !!
<h1> <a href="#">h1의 자식 요소</a> </h1>

2. b태그, i태그 사용하기

b태그랑 i태그는 시맨틱 하지 않은 태그다. 그대신 strong 태그와 em태그를 사용하자.

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

3. hgroup 태그 마구잡이로 사용하기

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/ 태그를 남발하면 안된다.
요소 사이에 간격이 필요할 땐 아예 별도의 단락으로 구별, css 속성을 주어 여백을 조정하는 것이 바람직하다.

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

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

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

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

5. 인라인 스타일링 사용하기

웹 표준으로 html, css, js 등의 사용방법을 정리하면서 각 영역이 분리되어 여러 이점을 얻을 수 있었다. 그런데 html 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 기것 분리한 영역을 다시 합치는 것과 같다. 웹 표준을 지키기 위해서는 html css 코드를 분리해서 작성하자.

 <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3> 

크로스 브라우징

크로스 브라우징

• 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
• 완전히 똑같은 화면이 보이도록 만드는 것이 아니다.
• 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 동일하게 만드는 것은 불가능하다.
• 인터넷 익스플로러의 ActiveX는 인터넷 익스플로러에서만 사용 가능했고, 최식 스펙의 CSS, JS는 제대로 지원하지 못해 크로스 브라우징을 위해 웹 표준을 저해하는 코드를 작성했다.
• 인터넷 익스플로러의 퇴출로 크로스 브라우징의 난이도가 한결 낮아졌다.

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

1. 초기 기획

• 어떤 웹 사이트를 만들것인가?
• 어떤 콘텐츠와 기능이 있어야 하는지?
• 디자인은?
• 이 사이트의 고객은 누구일지?
• 고객이 사용하는 브라우저는 무엇일까? 기기는 무엇일까?
  => 파악 후 이에 맞는 기술을 사용해서 개발할 수 있도록 기획

2. 개발

• 코드 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악해야 한다
• MDN, Can I Use 사이트에서 코드의 호환성 확인할 수 있음
• 코드 작성하다 보면 크로스 브라우징이 힘든 상황이 만나는데, 이를 인정하고 대체 수단을 마련해야 한다. (오래된 브라우저에서 제대로 기능하지 않을 수도 있음)

3. 테스트/ 발견

• 기능 구현후, 기능 테스트가 필요하다
• 안정적인 데스크톱 브라우저(롬, 엣지, 파이어폭스, 오페라, 사파리)에서 테스트를 진행하자
• 휴대폰 및 태플릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬)에서 테스트를 진행하자
• 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행하자
• Window, Linux, Mac 등 다양한 운영 체제에서도 테스트를 진행하자
• 자동으로 테스트를 진행해주는 도구들도 있다. (TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴)

4. 수정 / 반복

• 테스트 과정에서 버그가 발견되면 수정이 필요하다.
• 버그가 발생하는 위치를 최대한 좁히고,버그가 발생하는 특정 브라우저에서의 해결방법을 정해야 한다. 섣불리 코드를 수정했다가는 다른 브라우저에서 버그가 발생할 수 있기 대문에 , 조건문을 작성해 다른 코드를 실행하는 방식으로 고쳐나가는 것이 좋다.

웹 페이지 개발할 때 웹 표준만 잘 지켜도 크로스 브라우징을 어느 정도 실현할 수 있다. 따라서 당장은 브라우저에 따라 제대로 표시되지 않는 화면, 작동하지 않는 기능이 있을 수 있음을 인지하고 개선하려는 태도만 가져도 충분하다. 웹 표준에 맞는 코드를 작성하는 것이 왜 중요한지 알겠져?

Chapter2. SEO

SEO가 무엇인지, 어떤 종류가 있는지, 왜 필요한지?
SEO에 영향을 미치는 요소의 종류와 각 요소의 작성 방법도 알아보자.
SEO에 영향을 주는 요소를 직접 작성해보고, 실제로 어떻게 표시되는지 확인하는 실습도 해보자!

Chapter2-1. SEO 개념

검색 결과가 상위에 있는건 너무너무 중요하다.
검색 결과가 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹페이지가 되어버린다. => 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업 SEO

SEO
: Search Engine Optimization (검색 엔진 최적화)

• SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출

• On-Page SEO : 페이지 내부에서 진행할 수 있는 SEO로, 제목/콘텐츠/핵심 키워드의 배치/ 효율적인 HTML 요소 사용법등을 이용하는 방법

• Off-Page SEO : 웹 사이트 외부에서 진행하는 SEO로, 소셜미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없다.

우리는 On-Page SEO에 대해 알아보자!

프론트엔드 부트캠프 검색하면 코드스테이츠 웹 페이지가 가장 상위에 노출된다
=> 실제 홈페이지에서 어떤 HTML 요소를 사용한 것인지 확인해보자!

• meta 태그, title 태그 요소에 '프론트엔드' '부트캠프'가 많이 들어가 있다. 이건 SEO에 영향을 주는 수많은 요소 중 일부일 뿐이다. 쨌든, HTML요소의 종류와 요소에 들어가는 내용도 검색 결과에 영향을 준다!!!

Chapter2-2. SEO에 영향을 미치는 요소

1. title 태그

: 검색 결과창에서 제목에 해당하는 요소 head 태그 의 자식 요소로 작성

• 이 제목으로 사용자가 페이지에 들어갈지 결정할정도로 중요하다
• 제목 길이를 적절하게
• title 태그 요소에 핵심 키워드가 포함되면 상위에 노출될 확률 업! (그러나 같은 키워드를 반복하면 검색시 불이익을 받는다. 제목에 핵심 키워드는 한 번만 포함)

2. meta 태그

: 메타 데이터를 담는 요소

• 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지 알려주는 데이터
• head 태그의 자식 요소로 작성해주는 것이 일반적
• 검색 결과창에서 제목 밑에 따라오는 설명글이 meta 태그 요소안에 들어있는 내용이다.
  목적: name 속성을 사용해, SEO를 위해서 사용한다.
• 소셜 미디어나 채팅 앱에서 링크를 공유했을 때 뜨는 링크 미리보기에서 뜨는 글도 meta태그 요소에 들어가 있는 내용이다.
  목적: property 속성을 사용하며, 다른 사람에게 공유하기 위한 것
  property 속성을 사용하는 경우는 오픈 그래프(open graph)라고 하면 페이스북에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 "og"가 붙는다.
  
  
  

3. hgroup 태그

• 검색엔진은 hgroup 태그 요소의 내용을 중요하게 취급한다.
• 이미 사용한 핵심 키워드를 비슷하게 대체해서 사용하고, 관련 키워드들을 쭉 포함시키자!

4. 콘텐츠

개성있는 브랜딩

해당 웹사이트만 검색될 수 밖에 없는 아이디어나 이름을 생각하는 것도 좋은 SEO 전략이다. 웹사이트만의 독특한 이벤트나 콘텐츠를 만들어내는 것도 좋다.

복사 + 붙여넣기 금지

타 사이트 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정해 아예 검색 결과에서 생략해버린다. 타 사이트의 글을 인용하고 싶다면, 일부만 가져오면서 링크를 첨부해 출처를 표기하자

간결한 제목과 설명글

페이지 제목과 설명글에 이것저것 많이 넣는다고 검색이 잘되지 않는다.
관련 키워드라고 반복해서 작성하면 스팸 요소 사이트로 분류될 수도 있다.

최대한 글자로 작성하기

검색엔진은 이미지에 적힌 글은 못 읽는다. 꼭 이미지를 넣어야 한다면 alt 속성을 사용해 해당 이미지에 대한 설명을 텍스트로 작성하는 것이 좋다. 근데 이또한 너무 길게 작성하면 스팸 요소로 인식될 수 있으니 꼭 필요한 설명만 작성하자 !!

(O) <img src="코드스테이츠_로고.png" alt="코드스테이츠 로고" />
(X) <img src="코드스테이츠_로고.png" alt="프론트엔드 백엔드 블록체인 프로덕트매니지먼트 인공지능 데브옵스 등 다양한 커리어 전환 부트캠프를 진행하는 코드스테이츠 로고" />

SEO에 영향을 주는 요소는 굉장히 많다.
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko
https://searchadvisor.naver.com/guide