[TIL] 웹 표준

ㅜㅜ·2022년 11월 5일
TIL
1

Today I learn

목록 보기
47/77
post-thumbnail

웹 표준

  • 웹 : 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간.
    (💡 인터넷은 웹보다 좀 더 포괄적 개념으로, ‘전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망’을 의미.)
  • 웹 표준 등장 배경 : 이전에는 브라우저 간 호환이 되지 않아서 개발자들이 각 브라우저마다 따로 개발을 해주어야 했음. 이런 수고를 없애고 웹 개발의 형식을 통일 시킨 것이 웹 표준.

  • 웹 표준
    : W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로 사용자가 어떤 운영체계나 브라우저 사용하더라도 웹페이지가 동일하게 보이고, 정상적으로 작동할 수 있게 하는 웹 페이지 제작 기법을 담고 있음. 웹 개발에 사용되는 HTML, CSS, JS 등의 기술이 포함됨.

  • 웹 표준의 장점

    1. 유지 보수 용이
    2. 웹 호환성 확보
    3. 검색 효율성 증대
    4. 웹 접근성 향상




Semantic HTML

  • what is semantic ?
    : semantic은 ‘의미의, 의미가 있는’ 이라는 뜻의 영단어로 semantic요소는 요소가 어떤 내용을 담게 될 지, 어떤 기능을 하게 될 지 확실하게 의미를 가지고 있는 요소를 말한다. 그리고 이런 시맨틱 요소를 적절하게 사용해 구성한 HTML을 semantic HTML이라고 함!
  • Why is it needed?

    1. 개발자간 소통

      : 요소의 기능을 정의하고 설명하느라 쏟아야 하는 시간 절약 가능.

    2. 검색 효율성

      : 검색 엔진은 HTML 코드 보고 문서 구조 파악함.

      시맨틱 요소 사용시, 어떤 요소에 더 중요한 내용이 들어있을지 우선순위 정할 수 있고, 우선순위가 높다고 파악된 페이지를 검색 결과 상단에 표시함.

    3. 웹 접근성

      : 시각 장애인의 경우 음성으로 화면을 읽는 스크린 리더 이용하는데, 이 때 HTML이 시맨틱 요소로 구성되어 있다면 화면 구조에 대한 정보도 추가로 전달해줄 수 있어 콘텐츠를 정확하게 전달할 수 있음.

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




자주 틀리는 마크업

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

    :인라인 요소는 항상 블록 요소 안에 들어가야 함.

    • 인라인 요소 : 콘텐츠가 차지하는 만큼만 영역 차지 ( ex: span)
    • 블록 요소 : 가로로 넓게 화면 영역을 차지 (ex: div)

  2. b, i 요소 사용

    각각 글씨를 굵게 만들 때나 기울일 때 사용하는 요소인데, 웹 표준을 준수하기 위해서는 이 요소들 지양해야 함.

    시맨틱하지 않은 표현을 기준으로 이름이 지어진 요소이기 때문.

    대신 strong 이나 em 요소를 사용하는 것 권장. 

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

  1. <hgroup> 마구잡이로 사용하기

    시맨틱 요소로서 역할을 간과한 채 글자에 스타일 속성을 적용하기 위한 목적으로 사용해서는 안 됨. 

    // 나쁜 예시
<h1>엄청 큰 글씨</h1>
    <h3>적당히 큰 글씨</h3>
  <h2>큰 글씨</h2>
          <h6>엄청 작은 글씨</h6>
      <h4>그냥 글씨</h4>

// 좋은 예시
<h1>제목</h1>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
    <h3>작은 목차</h3>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
      <h4>더 작은 목차</h4>
      <h4>더 작은 목차</h4>

  1. br 연속으로 사용하기

    요소들 사이에 간격을 만들기 위한 목적으로 남발해서는 안 됨.

    요소 사이 간격이 필요한 경우 아예 별도 단락으로 구분하거나, CSS 속성을 주어 여백을 조정해주는 것 권장. 

    // 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.

// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>

// 좋은 예시 2
  //HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>

  //CSS 파일
.margin { margin: 10px }

  1. 인라인 스타일링 사용하기

    웹 표준으로 HTML, CSS, JS 등의 사용방법 정리하면서 각 영역이 분리되어 있는데 HTML 요소 내부에 인라인으로 스타일링 속성을 정리하는 것은 영역을 구분을 흐려 놓을 수 있음. 

    //HTML 파일
<head>
  <style>
    h1 { color : "red" }
  </style>
</head>

(O) <h1>스타일링 속성은 CSS로 작성해주세요.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>  
 
//CSS 파일
h2 { color : "yellow" }




크로스 브라우징

웹 사이트에 접근하는 브라우저 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업.

완전히 똑같은 화면을 추구하는 게 아니라 동등한 수준의 정보와 기능이 제공될 수 있도록 하는 것이 키포인트.

크로스 브라우징을 저해했던 ActiveX와 Internet Explorer…

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

    1. 초기 기획

      : 어떤 웹 사이트를 만들지, 고객이 사용하는 브라우저는 무엇인지, 기기는 무엇일지 등을 파악하고 맞는 기술 사용해 개발할 수 있게 기획.

    2. 개발

      : 코드 작성 시 사용하는 코드가 각 브라우저 호환성 어떤지 파악하고 사용. (caniuse , MDN)

      크로스 브라우징이 힘든 상황을 만나게 되면 이를 인정하고 대체 수단을 마련해야 함.

    3. 테스트& 발견

      : 기능에 대한 테스트 필요. 크로스 브라우징 테스트 진행해주는 도구들도 존재함. (TestComplete, LambdaTest, BitBar)

    4. 수정 & 반복

      : 섣불리 코드를 수정했다가는 다른 브라우저에서 버그가 발생할 수 있으므로, 조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋습니다. 수정이 완료되면 3번 과정부터 반복.





SEO

Search Engine Optimization, 검색 엔진 최적화 !

  • 종류
    • On-Page SEO : 페이지 내부서 진행할 수 있는 SEO 제목, 콘텐츠, 핵심 키워드의 배치, 효율적 HTML 요소 사용법 등 이용.
    • Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO. 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크),광고비 지불하고 광고로 걸기 등 이용. (웹 페이지 내용이나 구조와 상관 없음)
  • On-Page 에서 통제할 수 있는 요소들

title 요소

: 검색 결과창에서 제목에 해당하는 요소로 요소의 자식 요소로 작성함. title 요소에 어떤 내용 작성하는가에 따라 검색 후 유입까지 유도 가능. 너무 길거나 짧으면 유입률 떨어짐. 핵심 키워드가 포함되면 상위에 노출될 확률 높아짐. 그러나 같은 키워드 반복하면 검색시 불이익 받을 수 있음.

meta 요소
: 메타 데이터를 담는 요소.
메타 데이터는 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터. meta요소도 head 요소의 자식 요소로 작성해주는 것이 일반적.
검색 결과창 뿐만 아니라 소셜미디어나 채팅 앱에서 링크 공유할 때도 meta 요소에 들어가 있는 내용이 링크 미리보기로 뜸. 다른 사람에게 공유하기 위한 목적으로 property 속성을 사용하는 경우는 Open Graph라고 하며, 페이스북에서 게시물을 공유하기 위한 목적으로 만들었고, 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙음.

hgroup 요소

: 콘텐츠 제목 표시하는 용도인 만큼 핵심 키워드 포함할 가능성이 높고, 검색 엔젠도 hgroup 요소 내용을 중요하게 취급함.
그러나 이미 사용한 핵심 키워드를 그대로 사용하기 보다는 비슷한 키워드로 대체해 핵심 키워드 관련 키워드들 쭉 포함시키는 것이 중요.

콘텐츠

  • 개성있는 브랜딩 (아이디어, 이름이 겹치지 않는다면 상위권에 뜰 가능성이 높음)
  • 복사 붙여넣기 금지 (타 사이트 글을 복사해오면 중복 문서로 판정해버림)
  • 간결한 제목과 설명글
  • 최대한 글자로 작성 : 이미지로 넣는 경우 alt 속성 이용하면 이미지에 대한 설명 작성 가능 (but 너무 길면 스팸 요소로 인식)

구글 SEO 가이드

네이버 SEO 가이드

profile
ㅜㅜ
다시 일어나는 중
이전 포스트

[TIL] Redux 과제

다음 포스트

[TIL] 웹 접근성

0개의 댓글