[💻 코드스테이츠 FE 44기] 웹 표준

JE·2023년 4월 26일

부트캠프 웹 표준 웹표준 코드스테이츠 프론트엔드

부트캠프[코드스테이츠 FE 44기]

목록 보기

52/81

✔️ 시작

웹 표준에 대해 학습하면서 카톡 링크 공유시 보여지는 화면이 무엇인지 실습을 진행했다.

📍 배운 것

✔️ W3C(World Wide Web Consortium)

웹에서 표준적으로 사용되는 기술이나 규칙
사용자가 어떤한 운영체제나 브라우저를 사용해도 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는
웹 페이지 제작 기법
최신 웹 브라우저들은 모두 웹 표준을 지원한다.

✔️ 웹 표준 장점

1.유지 보수의 용이성

각 영역이 분리 되면서 유지보수가 용이해 졌고, 코드가 경량화 되면서 트래픽 비용이 감소하는 효과도 생겼다.

2.웹 호환성 확보

웹 브라우저의 종류나 버전, 운영체제나 사용 기기 종류에 상관 없이 항상 동일한 결과가 나오도록 할 수 있다.

3.검색 효율성 증대

웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 높은 우선순위로 노출 될 수도 있다. (검색 효율성과 관련된 내용도 웹 표준에서 다루고 있기 때문)

4.웹 접근성 향상

모든 환경과 사용자에 맞춰 웹 페이지를 개발하는 것은 쉽지 않지만, 웹 표준에 맞춰 개발하는 것 만으로도 해결 할 수 있다.

✔️ Semantic HTML

semantic: 의미의, 의미가 있는
HTML: 화면의 구조를 만드는 마크업 언어
요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소를 시멘틱 요소라 한다.

✔️ 시멘틱 HTML의 필요성

1.개발자 간의 소통

시멘틱 요소를 사용해 어떤 기능인지 파악하기 수월하고 분석하는데 시간을 단축할 수 있다.

2.검색 효율성

검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다.
시멘틱 요소를 사용해 어떤 요소에 더 중요한 내용이 들어 있을지 우선순위를 정할 수 있고, 우선순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 된다.

3.웹 접근성

HTML이 시멘틱 요소로 구성되어 있을 경우 구조에 대한 정보까지 추가로 전달해 줄 수 있어 콘텐츠를 좀 더 정확하게 전달 할 수 있다.

✔️ 시멘틱 요소의 종류

`<header>`

페이지나 요소의 최상단에 위치하는 머리말 역할의 요소
로고, 사이트 이름, 사이트를 구성하는 메인 페이지들, 검색폼 등

`<nav>`

메뉴, 목차 등에 사용되는 요소
내비게이션 바의 역할로 링크들을 담고 있다.

`<aside>`

문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소

`<main>`

이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소
페이지의 메인 콘텐츠

`<article>`

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

`<section>`

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

`<hgroup>`

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

`<footer>`

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

✔️ 크로스 브라우징(Cross Browsing)

웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
크로스 브라우징은 모든 브라우저에서 완전히 똑같은 화면이 보이도록 만드는 것이 아닌 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것

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

1.초기 기획

2.개발

3.테스트/발견

4.수정/반복

✔️ SEO(Search Engine Optimization)

검색 엔진 최적화
검색 엔진의 작동 방식에 맞게 페이지를 최적화해 주는 작업

SEO는 크게 On-Page, Off-Page SEO 두가지로 나뉨

1.On-Page SEO

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

2.Off-Page SEO

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

✔️ On-Page에 통제 할 수 있는 요소

1.`<title>`

검색 결과창에서 제목에 해당하는 요소
<head>요소의 자식 요소로 작성된다.
어떤 내용을 작성하는가에 따라 검색 후 유입까지 유도 할 수 있다.
- 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어진다.
핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.
- 그렇다고 같은 키워드를 반복하면 검색 시 불이익을 받을 수 있다.
(제목에 핵심 키워드는 한 번만 포함 시켜주는게 좋다.)

2. `<meta>`

메타 데이터를 담는 요소
<head>요소의 자식 요소로 작성된다.

메타 데이터란?

해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터

✔️ SEO를 위한 meta 요소

<meta name="속성 값" content="내용" />

description

콘텐츠에 대한 간략한 설명

검색 결과에서 제목 밑에 뜨는 내용

keywords

웹 페이지의 관련 키워드들을 나열할 때 사용

author

콘텐츠의 제작자를 표시

✔️ 오픈 그래프 (open graph)

오픈 그래프 (open graph)

<meta property="속성값" content="내용" />

og:url

페이지의 표준 URL

og:site_name

사이트의 이름

og:title

콘텐츠의 제목

og:description

콘텐츠에 대한 간략할 설명

검색 결과에서 제목 밑에 뜨는 내용

og:image

미리보기로 표시될 이미지

og:type

콘텐츠 미디어의 유형

기본 값은 website로, video, music 등의 유형을 표시

og:locale

리소스의 언어로, 기본값은 en_US 한국은 ko_KR

만약 og 태그 작성 후 카톡에 공유 했는데도 변경이 이루어지지 않았을 경우 캐시 제거가 이루어지지 않아서 그런걸 수도 있다.
🔗 카카오톡 미리보기 링크 캐시 제거 바로가기

✏️ 마치며

웹 표준과, 웹 접근성과 헷갈렸던 거 같다.
이번 학습을 통해 웹 표준이 어떠한 의미를 가지고 어떻게 작성을해야하는지, 왜 중요하는지 알게 되었다.

우리가 흔히 카톡에 링크를 공유할 때 나오는 이미지와 소개글도 관련이 있다는 것을 이번에 알게 되었다.

다음에 학습하는 건 웹 접근성인데 웹 표준과 어떻게 다르고 어떠한 부분이 연관되어 있는지 궁금하다.

[프론트 애송이] 작은 깨달음도 기록하기

이전 포스트

[💻 코드스테이츠 FE 44기] ✨야간자율학습반✨ Redux 실습 의사코드 작성

다음 포스트

[💻 코드스테이츠 FE 44기] 웹 표준

부트캠프[코드스테이츠 FE 44기]

✔️ 시작

📍 배운 것

✔️ W3C(World Wide Web Consortium)

✔️ 웹 표준 장점

1.유지 보수의 용이성

2.웹 호환성 확보

3.검색 효율성 증대

4.웹 접근성 향상

✔️ Semantic HTML

✔️ 시멘틱 HTML의 필요성

1.개발자 간의 소통

2.검색 효율성

3.웹 접근성

✔️ 시멘틱 요소의 종류

<header>

<nav>

<aside>

<main>

<article>

<section>

<hgroup>

<footer>

✔️ 크로스 브라우징(Cross Browsing)

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

1.초기 기획

2.개발

3.테스트/발견

4.수정/반복

✔️ SEO(Search Engine Optimization)

1.On-Page SEO

2.Off-Page SEO

✔️ On-Page에 통제 할 수 있는 요소

1.<title>

2. <meta>

메타 데이터란?

✔️ SEO를 위한 meta 요소

description

keywords

author

✔️ 오픈 그래프 (open graph)

og:url

og:site_name

og:title

og:description

og:image

og:type

og:locale