데굴데굴

TIL: 2022-11-04 본문

Lesson/TIL

TIL: 2022-11-04

aemaaeng 2022. 11. 4. 20:38

⚙️ 오늘 배운 주제

웹 표준

 

🐹 오늘의 기분

어제 머리 싸매고 고민했던 트리 dfs 문제는 레퍼런스를 보니 단 몇 줄로 해결할 수 있는 문제였다.. 디버거를 돌려봐도 잘 이해가 안 되어서 결국 직접 태블릿에 과정 하나하나 다 써가면서 이해했다. 와.. 이걸 어떻게 스스로 생각해내서 쓰지? ㅜㅜ 

오늘 학습은 이론 위주였던 데다가 전에 공부하면서 몇 번 봤던 내용들이라 그렇게 버겁진 않았다. 남은 시간은 코플릿 이해하고 dfs 찾아보는데에 쓴 듯.. 내일은 주말이니까 이번 주에 올렸던 내용 다시 읽어보고 코플릿 문제들도 다시 풀어봐야겠다. 

 

🗝 키워드

웹 표준, Semantic HTML, 크로스 브라우징, SEO, open graph

 

🗣 스스로에게 설명

웹 표준

예전엔 브라우저마다 따로 개발을 해주어야 했음. (개발자 살려...)
웹 개발의 형식을 통일시키기 위해 등장한 것이 웹 표준
사용자가 어떤 브라우저를 쓰더라도 동등한 웹 페이지를 보여줄 수 있도록 제작 기법을 담고 있다.

 

장점
1. 유지 보수의 용이성 + 구조, 표현, 동작 영역이 분리되면서 코드의 경량화로 트래픽 비용 감소
2. 웹 호환성 확보
3. 검색 효율성 증대
4. 웹 접근성 향상

 

Semantic HTML

요소의 이름만 보고도 어떤 역할을 하는지 알 수 있음.
그냥 <div>랑 <span>만 쓰면 구별하기가 힘들다.

 

장점
1. 개발자간 소통
2. 검색 효율성
3. 웹 접근성

 

크로스 브라우징

목표: 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것

최신 문법을 지원하지 않는 인터넷 익스플로러 때문에 강제로 웹 표준을 저해하는 코드를 작성하게 됨.

 

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

  1. 초기 기획: 어떤 웹사이트를 만들지 정확하게 결정하기
  2. 개발: 호환성 확인하기, MDN, Can I Use 이용
  3. 테스트: 데스크톱 브라우저, 휴대폰 및 태블릿 브라우저, 운영 체제 (테스트 도구 또한 존재)
  4. 수정/ 위 과정 반복

 

SEO

Search Engine Optimization

On-Page SEO: 페이지 내부 SEO, 제목/콘텐츠/핵심키워드 배치/HTML 요소 사용법 이용
Off-Page SEO: 웹사이트 외부 SEO, 소셜 미디어 홍보/백링크/웹페이지 내용과는 무관

 

On-Page에서 통제할 수 있는 요소
1. <title>
검색 결과창의 제목에 해당
<head> 요소의 자식 요소로 작성
핵심 키워드는 한 번만 포함하기

 

2. <meta>
메타 데이터를 담는 요소
<head> 요소의 자식 요소로 작성
검색 결과창에서 제목 밑에 따라오는 녀석들. -> name 속성

<meta name="속성 이름" content="작성할 내용" />


채팅방에 공유했을 때 밑에 뜨는 정보 -> <property> 속성 (Open graph), 페이스북에서 게시물을 공유하기 위한 목적으로 만듦

<meta property="속성 이름" content="작성할 내용" />

 

 

 

Meta Tag , OG(오픈그래프) 사용하기

오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓

velog.io

 

<meta>: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language | MDN

HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

developer.mozilla.org

 

3. <hgroup>

h1, h2.. 등등을 통틀어 hgroup이라고 한다.

콘텐츠의 제목이기에 검색 엔진에서는 핵심 정보를 포함하고 있을 가능성이 높다고 판단한다.

그래서 콘텐츠의 제목도 신경써서 써주는 것이 검색 엔진 노출에 도움된다.

단, 같은 단어를 반복하면 스팸으로 취급될 수 있으니 주의해야 한다.

 

 

 

'Lesson > TIL' 카테고리의 다른 글

TIL: 2022-11-08  (0) 2022.11.08
TIL: 2022-11-07  (0) 2022.11.07
TIL: 2022-11-03  (0) 2022.11.03
TIL: 2022-11-02  (0) 2022.11.02
TIL: 2022-11-01  (0) 2022.11.01
'Lesson/TIL' Related Articles more
Comments