[TIL] Day53 #웹표준

Beanxx·2022년 7월 8일

TIL web

TIL

목록 보기

53/120

2022.07.08(Fri)

[TIL] Day53
[SEB FE] Day52

📎 웹 표준

🤷‍♀️ Q: 인터넷은 웹 기반으로 작동한다⁉️
🙅‍♀️ A: No (웹 ⊂ 인터넷)

🌎 인터넷이란? 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망
🌎 웹이란? 다양한 정보를 여러 사람들과 공유할 수 있는 공간

🧐 웹 표준이란?
: 브라우저간 호환이 되지 않아 개발자들이 각 브라우저마다 따로 개발해야 했던 수고를 없애기 위해 웹 개발 형식을 통일시킨 것
👉 웹에서 표준적으로 사용되는 기술이나 규칙

➰ 웹 표준 장점

유지 보수의 용이성: 각 영역이 분리되면서 유지보수 용이, 코드 경량화로 인해 트래픽 비용 감소
웹 호환성 확보
검색 효율성 증대: 검색 엔진에서 더 높은 우선 순위로 노출될 수 있음
웹 접근성 향상

🎧 Semantic HTML

semantic(의미의, 의미가 있는) ✚ HTML(화면의 구조를 만드는 마크업 언어)

⌘ 시맨틱 요소: 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소
⌘ 시맨틱 HTML: 시맨틱 요소를 적절하게 사용하여 구성한 HTML

➰ Semantic HTML 필요성

개발자간 소통
검색 효율성: 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시
웹 접근성: 누구든지 항상 동일한 수준의 정보를 제공할 수 있어야 함

😈 자주 틀리는 MarkUp

인라인 요소 안에 블록 요소 넣기 ❌
- 인라인 요소: <span>, <a>
- 블록 요소: <div>, <h1>
```
<a href=""> <h1>bad example1</h1> </a>
<span> <div>bad example2</div> </span>
```

<b>, <i> 요소 사용하기 ❌
: 시맨틱하지 않음 → 각각 <strong>, <em> 으로 대체하기
⇒ 글씨에 효과 + 각 콘텐츠 강조 의미
```
<b>글씨 두껍게</b>   ->  <strong>글씨 두껍게</strong>
<i>글씨 기울이기</i>  ->  <em>글씨 기울이기</em>
```

<hgroup> 마구잡이로 사용하기 ❌
- 목차 역할을 하면서 콘텐츠 상하 관계 표시를 위해 사용

<br/> 연속으로 사용하기 ❌

텍스트 흐름에 줄 바꿈을 해주기 위해 사용하는 요소
But, 요소 사이 간격을 위해 남발해선 ❌

// bad example
<br/><br/>

// good example1
<p>요소 사이 여백을 주고싶을 땐</p>
<p>아예 별도 단락으로 구별</p>

// good example2
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백 설정</p>

// .css
.margin {margin: 10px}

인라인 스타일링 사용하기 ❌

// .html
<head>
  <style>
    h1 {color : "red"}
  </style>
</head>

(O) <h1>style 요소로 스타일링<h1>
(O) <h2>별도의 css 파일로 스타일링<h2>
(X) <h3 style="color: blue">태그 안 인라인 스타일링 사용 지양</h3>  
 
// .css
h2 { color : "yellow" }

🎧 Cross Browsing

브라우저 종류에 상관없이 ‘동등한’ 화면과 기능을 제공할 수 있도록 만드는 작업
✋ 브라우저마다 사용하는 렌더링 엔진이 다르므로 완전히 동일한 화면을 만드는 것은 불가능

➰ Cross Browsing Work FLow

초기 기획
개발
테스트 / 발견
수정 / 반복

📎 SEO

Search Engine Optimization; 검색 엔진 최적화
👉 검색 엔진에서 웹 페이지를 보다 더 상위에 노출되도록 만들 수 있음

On-Page SEO: 페이지 내부에서 진행 가능한 SEO
- 제목, 콘텐츠, 핵심 키워드 배치, 효율적인 HTML 요소 사용법 … 이용
Off-Page SEO: 웹 사이트 외부에서 이루어지는 SEO
- 소셜 미디어 홍보, 백링크, 광고비 지불 … 이용
- 웹 페이지 내용 및 구조와는 관계 ❌

➰ SEO에 영향을 미치는 요소 (On-Page)

<title> 요소: 검색 결과창에서 제목에 해당하는 요소
1. <head> 요소의 자식 요소로 작성
2. 핵심 키워드 포함 → 상위 노출 확률 UP ⬆️

<meta> 요소: 메타 데이터(해당 웹사이트에서 어떤 데이터를 다루고 있는지에 대한 데이터)를 담는 요소

a. <head> 요소의 자식 요소로 작성

제목 밑 설명글에 사용 ← name 속성 사용하며, SEO를 위해 사용하는 것이 목적
```
<meta name="속성값" content="내용" />
```
name 속성값 설명
description 콘텐츠에 대한 간략한 설명
keywords 웹 페이지 관련 키워드들 나열
author 콘텐츠 제작사 표시

name 속성값	설명
description	콘텐츠에 대한 간략한 설명
keywords	웹 페이지 관련 키워드들 나열
author	콘텐츠 제작사 표시

링크 미리보기에 사용 ← property 속성 사용하며, 다른 사람에게 공유 목적
- Open Graph (게시물 공유 목적) 👈 property 속성을 사용하는 경우
- 각 속성값 앞에 “og” 붙음

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

property 속성값	설명
og:url	페이지 표준 url
og:site_name	사이트 이름
og:title	콘텐츠 제목
og:description	콘텐츠 간략 설명 (검색 결과시 제목 밑 내용)
og:image	미리보기로 표시될 이미지
og:type	콘텐츠 미디어 유형 (기본값: website \| video, music …)
og:locale	리소스 언어 (기본값: en_US \| 한국-ko_KR)

<hgroup> 요소: 핵심 키워드를 의식해서 넣어주기!
콘텐츠
a. 개성있는 브랜딩: 아이디어나 이름이 겹치지 않으면 검색 결과 상위 노출 가능성 UP ⬆️
b. 복붙 금지: 복붙시 검색 엔진이 중복 문서로 판정해서 검색 결과에 아예 생략하기도 함
c. 간결한 제목과 설명글
d. 이미지보단 최대한 글자로 작성: 꼭 이미지를 넣어야 한다면 alt 속성으로 이미지 설명 작성

<!-- meta 요소를 활용하여 링크 미리보기 내용 확인해보기! -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta property="og:title" content="제목입니다" />
    <meta property="og:description" content="설명입니다" />
    <meta
      property="og:image"
      content="http://source.unsplash.com/random/300x300"
    />
	<!-- body 태그 내에 img가 존재해도 링크 공유 미리보기 이미지는 og:image content 사진이 뜸 -->
    <title>title입니다</title>
  </head>
  <body>
    <img src="http://source.unsplash.com/random/300x300" />
  </body>
</html>

벌써 금요일이라니 요즘 일주일 단위 시간이 넘 빠르다.
엊그제 알바갔다온 것 같은데 벌써 내일 또 알바가야 한다니 🫠
오늘은 하루종일 혼자 학습하는 날 ٩( ᐛ )و
방에 에어컨이 없어서 카페를 갈까말까 고민 중인데 가기까지가 넘 귀찮아서 pass…ㅎ
집에서 늘어지지 말고 할 일 후딱후딱 끝내자!

Beanxx

FE developer

이전 포스트

[TIL] Day52 #Redux

다음 포스트