[개발자되기: 웹표준 & 접근성] Day-41

Kyoorim LEE·2022년 7월 8일

Semantic HTML cross browsing seo 검색엔진 최적화 시맨틱 HTML 웹접근성 웹표준 크로스 브라우징

코드스테이츠 부트캠프 FE 개념정리

목록 보기

38/54

웹표준

W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙
어떤 운영체제나 브라우저(크롬, 엣지, 사파리, 파이어폭스..)를 사용하더라도 웹페이지에서 동일하게 보이도록 하는 웹페이지 제작기법
HTML, CSS, JavaScript

웹표준의 장점

유지보수의 용이성
웹 호환성 확보
검색 효율성 증대
웹 접근성 향상

Semantic HTML

의미를 갖도록 작업한 HTML
<div>와 <span>으로만 구성하지 않고 요소의 이름에 맞게 화면을 구성하는 것

Semantic HTML 필요성

개발자간 원활한 소통
검색 효율성
- 검색 엔진은 HTML 코드를 보고 문서구조를 파악함. 시맨틱 요소를 사용하면 검색엔진의 우선순위에 걸리게 될 확률이 높음 -> 노출효과 증대
웹 접근성
- 시각장애인의 경우 웹페이지 접근 시 음성으로 화면을 읽어주는 스크린 리더 사용함. semantic HTML로 되어있을 경우 화면 구조에 대한 정보까지 추가로 전달 가능

Semantic 요소 종류

<header> : 최상단 머릿말 역할
<nav> : 메뉴, 목차 등에 사용
<aside> : 문서와 연관은 있으나 직접적 연관은 없는 내용
<main> : 문서의 메인이 되는 주요 콘텐츠 담은 요소
<article> : 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분. 보통 제목(<hgroup>)을 포함하는 방법 사용.
<section> : 문서의 독립적인 구획. 딱히 적합한 의미의 요소가 없을 때 사용. 제목(<hgroup>)을 포함하는 경우 많음.
<hgroup> : 제목 표시 시 사용. <h1> ~ <h6>
<footer> : 페이지나 요소의 최하단에 위치

지켜야하는 마크업

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

// h1, div 요소는 블록 요소이고,
// a, span 요소는 인라인 요소입니다.
<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>

2. `<b>`, `<i>` 요소 사용 자제하기

시맨틱하지 않은 표현임
콘텐츠에 의미를 부여하는 <strong>, <em> 사용하기

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

3. `<hgroup>` 순서대로 사용하기

4. `<br />` 남발 금지

요소 간 간격이 필요할 경우에는 별도의 단락으로 구별하거나 CSS로 여백을 줘서 조정하기

5. HTML과 CSS 코드 분리해서 작성하기

인라인으로 스타일링 설정하는 것 자제하기

크로스브라우징 (Cross Browsing)

브라우저마다 사용하는 렌더링 엔진이 다르므로 화면을 완전히 동일하게 만들수는 없지만 크로스 브라우징을 통해 최대한 동등한 수준의 정보와 기능을 제공하는 것이 목표
ex) 크로스 브라우징의 가장 큰 걸림돌 => 인터넷 익스플로러(2022년 6월 15일부로 지원 종료) <= Active X

크로스브라우징 Work Flow

초기 기획
개발
- 사용하는 코드가 각 브라우저에서 호환성이 어떤지 파악하고 사용
- MDN, Can I Use 등의 사이트에서 파악 가능
테스트/ 발견
- 기능 구현 후 테스트 진행
  - 안정적인 데스크톱 브라우저 (크롬, 엣지, 파이어폭스, 사파리 등)에서 테스트 진행
  - 휴대폰 및 태플릿 브라우저에서 테스트 진행
  - 그 외 해당브라우저가 있다면 진행
  - Window, Linux, Mac 등의 운영체제에서도 진행
- 자동으로 테스트 진행해주는 도구 : TestComplete, LambdaTest, BitBar
수정/ 반복

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

On-Page SEO : 페이지 내부에서 진행할 수 있는 SEO => 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 사용법 이용
Off-Page SEO : 웹사이트 외부에서 이뤄지는 방법. SNS 홍보, 백링크(타 사이트에서 연결되는 링크) => 웹페이지 내용이나 구조와는 관계 없음

1. `<title>` 요소

검색 결과창에서 제목에 해당하는 요소로 <head> 요소의 자식 요소로 작성.

<title> 내용에 따라 검색 후 유입까지 유도 가능
- 검색 시 제목으로 뜨는 만큼 사용자가 이해하기 쉽도록 간결하고 정확해야함
<title> 요소에 핵심 키워드가 포함되면 상위 노출확률 높아짐

2. `<meta>` 요소

해당 웹사이트에서 다루고 있는 데이터가 무엇인지 알려주는 메타 데이터를 담는 요소로 <head>요소의 자식 요소로 작성

검색 결과창 목적 : `name`속성 사용 => SEO 위한 것

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

name 속성값	설명
description	콘텐츠에 대한 간략한 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다.
keywords	웹 페이지의 관련 키워드들을 나열할 때 사용합니다.
author	콘텐츠의 제작자를 표시합니다.

SNS나 카톡 링크 공유 시 링크 미리보기 목적: `property` 속성 사용 => 다른 사람과 공유 목적

<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입니다.

3. `<hgroup>` 요소

핵심 키워드를 포함할 가능성이 높은 만큼 검색엔진도 <hgroup> 요소를 중요하게 취급함

4. 콘텐츠

개성있는 브랜딩
복사 + 붙여넣기 금지 : 복사할 경우 검색엔진에서 중복 문서로 판정하여 결과에서 생략해버리기도 함.
간결한 제목과 설명글
최대한 글자로 작성
- 꼭 이미지로 넣어야 할 경우 alt속성 사용 (이마저도 너무 길게 작성하면 스팸 요소로 인식할 수 있음)

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

SEO 실습

HTML 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" property="og:title" content="꾸덕이요거트" />
    <meta
      property="og:description"
      content="그릭요거트, 그래놀라, 과일쨈, 프룬과 함께해요 언제까지 어깨춤을 추게할거야"
    />
    <!-- <meta
      property="og:image"
      content="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAhl0U37o6O55z29E3F7hnQp1ybquHfNkdwg&usqp=CAU"
    /> -->
    <title>꾸덕이의 그릭요거트</title>
  </head>
  <body>
    <img
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAhl0U37o6O55z29E3F7hnQp1ybquHfNkdwg&usqp=CAU"
      alt="그릭요거트 이미지"
    />
    <h1>👆 이 화면의 링크를 복사해서 공유해주세요!</h1>
  </body>
</html>

공유화면

이미지를 <head> 에 넣었을 때와 <body>안에 넣었을 때 공유되는 화면에는 차이가 없지만,
링크로 들어갔을 때,
<body>에 들어간 이미지의 경우 화면에 노출이 되고
<head>에 <meta>속성으로 들어간 이미지의 경우 화면에 노출이 안된다
당연히 그렇겠지 ^^

Kyoorim LEE

oneThing

이전 포스트

[개발자되기: Redux] Day-40

다음 포스트

[개발자되기: 웹표준 & 접근성] Day-41

코드스테이츠 부트캠프 FE 개념정리

웹표준

웹표준의 장점

Semantic HTML

Semantic HTML 필요성

Semantic 요소 종류

지켜야하는 마크업

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

2. `<b>`, `<i>` 요소 사용 자제하기

3. `<hgroup>` 순서대로 사용하기

4. `<br />` 남발 금지

5. HTML과 CSS 코드 분리해서 작성하기

크로스브라우징 (Cross Browsing)

크로스브라우징 Work Flow

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

1. `<title>` 요소

2. `<meta>` 요소

검색 결과창 목적 : `name`속성 사용 => SEO 위한 것

SNS나 카톡 링크 공유 시 링크 미리보기 목적: `property` 속성 사용 => 다른 사람과 공유 목적

3. `<hgroup>` 요소

4. 콘텐츠

SEO 실습

HTML 코드

공유화면

[개발자되기: Redux] Day-40

[개발자되기: 웹접근성] Day-42

0개의 댓글

[개발자되기: 웹표준 & 접근성] Day-41

코드스테이츠 부트캠프 FE 개념정리

웹표준

웹표준의 장점

Semantic HTML

Semantic HTML 필요성

Semantic 요소 종류

지켜야하는 마크업

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

2. <b>, <i> 요소 사용 자제하기

3. <hgroup> 순서대로 사용하기

4. <br /> 남발 금지

5. HTML과 CSS 코드 분리해서 작성하기

크로스브라우징 (Cross Browsing)

크로스브라우징 Work Flow

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

1. <title> 요소

2. <meta> 요소

검색 결과창 목적 : name속성 사용 => SEO 위한 것

SNS나 카톡 링크 공유 시 링크 미리보기 목적: property 속성 사용 => 다른 사람과 공유 목적

3. <hgroup> 요소

4. 콘텐츠

SEO 실습

HTML 코드

공유화면

[개발자되기: Redux] Day-40

[개발자되기: 웹접근성] Day-42

0개의 댓글

2. `<b>`, `<i>` 요소 사용 자제하기

3. `<hgroup>` 순서대로 사용하기

4. `<br />` 남발 금지

1. `<title>` 요소

2. `<meta>` 요소

검색 결과창 목적 : `name`속성 사용 => SEO 위한 것

SNS나 카톡 링크 공유 시 링크 미리보기 목적: `property` 속성 사용 => 다른 사람과 공유 목적

3. `<hgroup>` 요소