22.07.08

📌 웹 표준과 SEO는 개념을 알고 있긴 하지만 살짝 알고 있을 뿐이고 기술 면접에서 자주 나오는 부분이니 열심히 암기해야 하는 학습이다.!

인터넷

웹

웹 표준

웹 표준의 장점

Semantic HTML

HTML을 사용하는 두 가지 방식

<div>와 <span>으로 화면 구성
- 두 가지의 요소만 알면 충분히 화면의 구조를 만들 수 있지만, 어떤 내용이 들어갈지는 명시되지 않아서 경험을 토대로 태그가 어떤 역할을 하는지 추측해야하는 어려움이 있다.
시맨틱 요소로 화면 구성
- <header>, <nav>, <main>, 등 여러가지 태그를 사용하여 어떤 역할을 하는 하는지 확실하게 알 수 있다.

시맨틱 HTML의 필요성

자주 틀리는 태그

인라인 요소 안에 블록 요소 넣기
- 인라인 요소(<span>)
  - 컨텐츠가 차지하는 만큼 영역 지정
  - 항상 블록 요소 안에 들어가야 한다.
- 블록 요소(<div>)
  - 가로로 넓게 화면 영역을 차지한다.
<b>, <i> 요소 사용
- 웹 표준을 준수하기 위해서는 이 요소들을 사용하지 않는 것이 좋다.
- 표현을 기준으로 이름이 지어진 요소이기 때문이다.
- 대신 <strong>, <em>을 사용하는 것이 좋다.
<hgroup> 난발하여 사용
- 글자에 스타일 속성을 적용하기 위한 목적으로 사용하면 안된다.
<br/> 연속 사용
- 이어지는 텍스트 흐름에 줄 바꿈을 하기 위해 사용
- 요소 사이에 간격이 필요한 경우 별도의 단락으로 구별하거나, CSS 속성에 여백을 주는 것이 좋다.
인라인 스타일링 사용
- HTML 요소 안에서 스타일링을 하는 방법보다 CSS 코드를 분리하여 작성하는 것이 좋다.
- HTML 안에 작성할 경우 분리한 영역을 다시 합치는 것이 되기 때문이다.

크로스 브라우징(Cross Browsing)

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

초기 기획
- 어떤 웹 사이트를 만들 것인지 정확하게 결정
- 어떤 컨텐츠와 기능, 디자인은 어떻게 할지 등의 사항을 결정한다.
개발
1. 코드를 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야 한다.
2. https://caniuse.com/
테스트 / 발견
1. 안정적인 테스크톱 브라우저에서 테스트를 진행한다.
2. 휴대폰 및 태플릿 브라우저에서 테스트를 진행한다.
3. 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행한다.
4. Window, Linux, Mac 등 다양한 운영 체제에서도 테스트를 진행한다.
수정 / 반복
- 버그의 수정을 하기 위함

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

SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출 될 수 있게끔 할 수 있다.
On-Page SEO
- 페이지 내부에서 진행할 수 있는 SEO, 제목과 컨텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
Off-Page SEO
- 웹 사이트 외부에서 이루어지는 SEO, 소셜 미디어 홍보, 백링크 등을 이용하는 방법

On-Page 통제 요소

<title> 요소
- 검색 결과창에 제목에 해당하는 요소이며, <head>의 자식 요소이다.
- 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다. (제목 길이를 짧게)
- 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다. (핵심 키워드는 한번만 포함)
<meta> 요소
- 메타 데이터를 담는 요소이며, <head>의 자식요소이다.
- 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터
- 검색 결과창에서 제목 밑에 따라오는 설명글
<hgroup> 요소
- 제목을 표시하는 용도
컨텐츠
- 개성있는 브랜딩
- 복사 + 붙여넣기 금지
- 간결한 제목과 설명글
- 최대한 글자로 작성하기

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

[python] leetcode 문제풀이

[React] 혼자 제작한 CRUD 프로젝트 리팩토링

Homile