◎웹표준
웹: 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할수 있는 공간
- 웹표준
: W3C에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’
-사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할수 있도록 하는 웹페이지 제작기법을 담고 있다.
-크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원한다.
-
Semantic HTML
<div>와<span>으로 화면 구성하기
: 화면이 어떤 구조로 나누어져있는지 까지만 알 수있고, 어떤 내용이 들어갈지는 명시되어있지 않아 잘 알수 없다.- 시맨틱요소로 화면 구성하기
:<header>,<nav>요소의 이름에 맞게 화면을 구성하면 명확하게 알수있다.
- 시맨틱 HTML의 필요성
- 개발자간 소통
- 검색 효율성
- 웹 접근성
-
자주 틀리는 마크업
- 인라인 요소안에 블록 요소 넣기
-인라인요소 : 콘텐츠가 차지하는 만큼 ex)<span>,<h1>
-블록요소 : 가로로 넓게 화면영역을 차지 ex)<div>,<a>
=> 블록요소 안에 인라인 요소가 들어가야한다.ex)
<h1><a href=“”>좋은예시</h1></a> <b>,<i>요소 사용하기
-<b>: 글씨를 굵게 만들때 --><strong>으로 대체
-<i>: 글씨를 기울일때 --><em>으로 대체<strong>글씨 매우 강조하기</strong> <em> 글씨 기울이기</em><hgroup>마구잡이로 사용하기
-<hgroup>:목차의 역할을 하면서 콘텐츠의 상하관계를 표시하기 위해 사용<h1>제목</h1> <h2>큰 목차</h2> <h3>작은 목차</h3> <h2>큰 목차</h2> <h3>작은 목차</h3> <h4>더 작은 목차</h4><br/>연속으로 사용하기
-<br/>: 쭉 이어지는 텍스트 흐름에 줄바꿈을 해주기 위해서 사용하는 요소<p>줄</p> <p>바꿈</p>- 인라인 스타일링 사용하기
: HTML과 CSS코드를 분리해서 작성하기
- 인라인 요소안에 블록 요소 넣기
-
크로스 브라우징
: 웹사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할수 있도록 만드는 작업
=> 초기 기획 → 개발 → 테스트/발견 → 수정/반복의 단계로 진행된다.
◎SEO
- SEO(Searching Engine Optimization)
: 검색엔진의 작동방식에 맞게 웹페이지를 최적화해주는 작업- On-Page SEO : 페이지 내부에서 진행할수있는 SEO
=> 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
ex)<meta>요소와<title>요소에 검색 키워드인 ‘프론트엔드’를 넣으면 검색결과에 영향을 준다. - Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO
=> 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법
ex) 광고비를 지불하고 검색결과 상위에 뜨게 만드는것
- On-Page SEO : 페이지 내부에서 진행할수있는 SEO
- SEO에 영향을 미치는 요소(ON-Page)
<title>요소
: 검색결과창에 제목에 해당하는 요소,<head>요소의 자식요소로 작성
=> 제목이 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어진다.
=> 핵심키워드가 포함되면 상위에 노출될 확률이 높다. (단, 핵심키워드는 한번만 포함하기)<meta>요소
: 메타데이터를 담는 요소,<head>요소의 자식요소로 작성
(메타데이터: 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터)
- name속성 사용
: 검색결과창에서 제목밑에 따라오는 설명글, SEO를 위해서 사용
<meta name="속성값" content="내용" />
-property속성 사용(오픈 그래프)name 속성값 설명 description 콘텐츠에 대한 간략한 설명이다. (검색 결과에서 제목 밑에 뜨는 내용) keywords 웹 페이지의 관련 키워드들을 나열할 때 사용한다. author 콘텐츠의 제작자를 표시한다.
: 링크를 공유했을때 뜨는 링크 미리보기, 다른 사람에게 공유하기 위한것이 목적
<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>요소
: 콘텐츠의 제목을 표시하는 용도
=> 이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나 핵심키워드의 관련 키워드들을 쭉 포함시키는 것이 좋다.
◎웹접근성
-
웹 접근성
: 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할수있도록 보장하는 것- 웹 접근성을 갖추면 얻을 수 있는 효과
1. 사용자층 확대
=> 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할수 있게 된다.
2. 다양한 환경 지원
3. 사회적 이미지 향상
- 웹 접근성을 갖추면 얻을 수 있는 효과
-
한국형 웹 콘텐츠 접근성 지침
- 인식의 용이성(Perceivable)
: 모든 콘텐츠는 사용자가 인식할 수 있어야한다.
- 적절한 대체 텍스트
: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할수 있도록 대체 텍스트를 제공해야한다.
=> 시각적으로 화면을 인식할 수 없는 사용자 혹은상황을 대비해서 텍스트를 제공할필요가 있다.
=>alt속성 사용하기
<img src="이미지 주소" alt="대체 텍스트" />
- 자막제공
: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야한다.
=> 비디오 요소 안쪽에track요소를 사용하여 자막 파일 불러오기<video ... > <track src="자막.vtt" kind="captions" /> </video>
- 이해의 용이성(Understandable)
: 콘텐츠는 이해할 수 있어야 한다.
- 기본언어 표시
:주로 사용하는 언어를 명시해야 한다.
=> HTML 요소에 lang 속성을 사용하여 제공하면 됩니다.
<html lang="ko"> - 사용자 요구에 따른 실행
:사용자가 의도하지 않은 기능은 실행되지 않아야 한다.
=> 페이지 진입 시에 팝업이 뜨지 않게 해야 하며, 화면을 가리는 레이어 창(모달)이 있는 경우, 가장 상단에 제공하여 가장 먼저 제어할 수 있도록 해야 한다.
=> 새 창임을 알려줄 수 있어야 한다.1) 링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주기 <a href="...">페이지<span class="blind">새 창</span></a> 2) 링크 요소에 title 속성으로 새 창 작성하기 <a href="..." title="새 창">페이지</a> 3) 링크 요소에 target=”_blank” 속성을 넣기 <a href="..." target="_blank">페이지</a> - 콘텐츠 선형 구조
: 콘텐츠는 논리적인 순서로 제공해야 한다.
=> 탭에 해당하는 내용이 있는 경우, 탭 제목 다음에 탭 내용이 오도록 마크업을 구성해야합니다.<div>탭1</div> <div>탭1 관련 내용</div> <div>탭2</div> <div>탭2 관련 내용</div> - 표의 구성
: 표는 이해하기 쉽게 구성해야 한다.
=> 테이블 요소 안에<caption>요소를 사용해서 표에 제목을 제공하기
=> 표의 셀은 제목 셀과 데이터 셀이 구분되도록 구성해야 합니다. 제목 셀은<th>, 데이터 셀은<td>를 사용하면 됩니다.
=>표의 구조가 복잡할 경우, 최대한 간소화하거나scope혹은id와headers속성을 사용하여 작성한다. - 레이블 제공
: 사용자 입력에는 대응하는 레이블을 제공해야 한다.
=><input>요소에 id 를 설정하고<label>요소의 for 속성으로 연결
=><label for="user_id">아이디</label> <input id="user_id" type="text" placeholder="아이디" />title속성을 사용
=>WAI-ARIA의<input type="text" title="아이디" placeholder="아이디" />aria-label속성을 사용<input type="text" aria-label="아이디" placeholder="아이디" />
- 견고성(Robust)
: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
8. 마크업 오류 방지
: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
=>요소의 열고 닫음에 오류가 없어야 한다.
=>요소의 속성을 중복해서 사용해선 안된다.<div><span></span></div>
=>id 를 중복해서 사용해선 안된다.<div class="class하나만"></div>잘못된 예 => <div id="아이디"><span id="아이디"></span></div>
- 인식의 용이성(Perceivable)
-
WAI-ARIA
: WAI에서 발표한 RIA환경에서의 웹 접근성 기술규격
(RIA: 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션)- WAI-ARIA 사용법
: HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있다.
속성
- 역할(role) : HTML 요소의 역할을 정의하는 속성
ex)<div role="button">button으로 사용되는 요소</div> <div role="tabList"> <li role="tab">Tab1</li> <li role="tab">Tab2</li> </div> <div role="tabpanel">Tab menu ONE</div> <div role="tabpanel">Tab menu TWO</div> - 상태(state) : 요소의 현재 상태를 나타내는 속성
=>Aria-selected: 여러개의 선택 가능한 요소 중에서 선택 상태인 요소를 표시할수 있는 속성
ex)
=><div role="tabList"> <li role="tab" aria-selected="true">Tab1</li> //선택 o <li role="tab" aria-selected="false">Tab2</li> //선택 x </div> <div role="tabpanel">Tab menu ONE</div> <div role="tabpanel">Tab menu TWO</div>aria-expanded: 아코디언 UI가 펼쳐진 상태인지 표시해주는 속성
=>aria-hidden: 요소가 숨김 상태인지를 표시하는속성 - 속성(property) :요소의 특징을 정의하는 속성(attribute)
=>aria-label: 요소에 라벨을 붙여주는 기능
ex)
=><button aria-label="닫기"/> <img src="X.png" /> </button>aria-live: 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시
1) polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달합니다.
2) assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달합니다.
- WAI-ARIA 사용법
출처
코드스테이츠
