웹 표준
W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로 사용자가 어떤 브라우저나 기기를 사용하더라도 내용을 동일하게 볼 수 있도록 하는 것이 웹 표준이다
1.유지 보수의 용이성
각 영역이 분리되면서 유지 보수가 편리하고 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다
2.웹 호환성 확보
웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다
3.검색 효율성 증대
적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있다
4.웹 접근성 향상
브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양 하고 모든 환경과 사용자에 맞춰서 개발할 필요가 없다.
Semantic HTML
semantic HTML은 각 HTML 태그가 포함하는 내용에 대한 정보를 제공한다는 것을 의미 한다
1. SEO ( Search engine optimization )
검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 테그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹싸이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우져의 검색 엔진이 내가 만든 웹싸이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수있다.
2. 웹 접근성
웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹싸이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹싸이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있습니다.
3. 유지보수성
단순히, div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.
자주 틀리는 마크업
1. 인라인 요소안에 블록요소 넣지말기
=>블록요소안에 인라인 요소가 들어가야 한다.
HTML5의 블록요소 종류
address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video
HTML5의 인라인 요소 종류
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var
<div><span>좋은 예시</span></div>
<span><div>나쁜예시</div></span>2.< b>, < i> 요소 사용하지 말기
- < b>은 글씨를 두껍게하는 요소이고, < i>는 글씨를 기울일 때 사용하는 요소입니다
웹표준을 준수하기 위해서는 대신 < strong>과< em>을 사용하기< b> => < strong>
< i> => < em>
3.< hgroup> 마구잡이로 사용하기말기
- 제목의 크기는 < h1> ~< h6>까지 다양한데 상하관계를 일관적으로 써야한다
- 1로 갈수록 크기가 커지고 6으로 갈수록 작아진다
4.< br /> 연속으로 사용하지말기
- 요소사이 여백을 주고 싶을때는 css 마진을 이용
5. 인라인 스타일링 사용하지말기
- html에 인라인 스타일링을 사용하지 말고 css에 사용하기
크로스 브라우징
Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말한다
또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미한다
크로스 브라우징은 똑같이 보이게 구현해내는 것이 아니라는 것이다. "동등한" 수준의 정보, 기능을 제공하는 것이 크로스 브라우징이다.
1. 도움이 되는 사이트를 이용하여 브라우저에 맞게 작업한다.
- 크롬 : -webkit-
- 사파리 : -webkit-
- 파이어폭스 : moz- (mozila 라는 단체가 파이어폭스를 만들었기 때문에)
- 오페라 : -o-, -webkit-
- 익스플로러 : -ms-
2. 초기화 작업 (CSS 초기화 작업)
'웹 브라우저'마다 default 값으로 스타일이 적용되어 있기 때문에 우리는 브라우저마다의 기본 디폴트 스타일 값이 아니라 동일한 CSS 스타일을 보여주기 위해 default 디폴트 값을 초기화 해주어야 한다.
3. 핵(Hack)
스타일을 줄 때 특수문자를 넣어서 다른브라우저들에서는 인식이 안되지만 IE 특정 버전에서는 인식되도록 하는 방법이다. 이 방법은 추천하지 않는다.
IE8 이상의 브라우저에서 구분해내기가 어려우며 CSS 유지 보수를 어렵게 한다.
크롬 핵
@media screen and (-webkit-min-device-pixel-ratio:0){
여기에 css 작업
}
파이어폭스 핵
@-moz-document url-prefix() {
여기다 쓸 css 넣기
}
==
선택자핵
/* IE 6 이상 */
* html #uno { }
/* IE 7 이상 */
*:first-child+html #dos { }
/* IE 7 과 현대 브라우저 */
html>body #tres { }
/* 현대 부라우저 (IE 7 빼고) */
html>/**/body #cuatro {}
/* 오페라 9.27 이상 */
html:first-child #cinco {}
/*사파리,크롬,오페라 다수브라우저핵*/
html[xmlns*=""] body:last-child #seis { }
/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
html[xmlns*=""] body:last-child #seis { }
/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:nth-of-type(1) #siete { }
/* 사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:first-of-type #ocho { }
/* 사파리 3, 크롬 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
}
4. 메타 태그를 이용한 IE모드
<head>
// ...
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
//...
</head>
<head> 요소 안에 넣어두며 IE가 문서를 읽고 랜더링 할 때 원하는 모드로 랜더링을 하게 해줍니다.
만약 content에 값이 "IE=edge"라면 해당브라우저가 할 수 있는 가장 최신의 모드로 랜더링합니다.
SEO
검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화하는 작업을 의미한다
On-Page SEO: 제목, 콘텐츠, 핵심 키워드, 시맨틱 요소 사용으로 부터 이루어진다 ( 페이지 내부에서 진행)
Off-Page SEO: 웹 페이지의 내용이나 구조와는 관계없이 SNS 홍보, 백링크 등을 통해 이루어진다.( 페이지 외부에서 진행)
HTML 요소의 종류와 요소에 들어가는 내용이 검색 결과에 영향을 주는 것은 On-Page SEO에 해당되며,
광고비를 지불하고 검색 결과 상위에 뜨게 만드는 것은 Off-Page SEO에 해당된다.
SEO에 영향을 미치는 요소
- <title> 요소
- 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성한다.
- <title> 요소에 작성하는 내용에 따라, 검색 후 유입을 유도할 수 있기 때문에 제목으로 사이트를 파악하기 쉽도록 적절한 길이로 작성해야한다.
- <title> 요소에 핵심 키워드를 포함시켜, 상위에 노출될 확률을 높일 수 있다. 단, 핵심 키워드는 중복없이 한 번만 포함시켜야 한다.
- <meta> 요소
- 메타 데이터를 담는 요소로, <title> 요소와 마찬가지로 <head> 요소의 자식 요소로 작성한다.
- 메타 데이터는 웹 페이지가 어떤 데이터를 다루고 있는 지 설명하는 데이터로, 검색 결과창에서 제목 밑에 따라오는 설명글을 예시로 들 수 있다.
- <meta> 요소에 작성된 내용은 검색 결과창 뿐만 아니라 SNS에 링크를 공유했을 때 뜨는 링크 미리보기에서도 확인할 수 있다.
- 단, 검색 결과창에서는 SEO를 위한 목적으로 name 속성을, 링크 미리보기의 경우 공유를 목적으로 property 속성을 사용한다.
- property 를 사용하는 경우는 오픈 그래프(Open Graph)라고 하며, 속성값 앞에 og가 붙는다.
- 잘 작성된 오픈 그래프는 유입을 늘릴 수 있어 SEO와 간접적으로 연관이 있다고 볼 수 있기 때문에, SEO 향상에 도움이 된다.
<!-- SEO를 위한 <meta> 요소 -->
<meta name="속성값" content="내용" />
<!-- 오픈 그래프 (open graph) <meta> 요소 -->
<meta property="속성값" content="내용" />
- name 속성값의 종류
- description : 콘텐츠에 대한 간략한 설명, 검색 결과창에서 제목 밑에 따라오는 설명글
- keywords : 웹 페이지 관련 키워드 나열
- author : 콘텐츠 제작자 표시
- property 속성값의 종류
- og:url : 페이지의 표준 URL
- og:site_name : 사이트 이름
- og:title : 콘텐츠 제목
- og:description : 콘텐츠에 대한 간략한 설명, 미리보기 제목 밑에 따라오는 설명글
- og:image : 미리보기 이미지
- og:type : 콘텐츠 미디어의 유형(video, music 등, default = website)
- og:locale : 리소스의 언어(한국 = ko_KR, default = en_US)
- <hgroup> 요소
- 콘텐츠의 제목을 표시하는 요소로, 핵심 키워드를 포함하고 있을 가능성이 높다.
- 따라서, 검색 엔진도 hgroup 요소의 내용을 중요하게 취급하므로 작성시 핵심 키워드를 의식하면서 작성해야한다.
- 단, 이미 핵심 키워드를 사용했다면 비슷한 키워드로 대체하여 사용하거나 관련 키워드를 사용하는 것이 좋다.(핵심 키워드 중복X)
- Contents
- 개성있는 브랜딩
=>해당 웹사이트만 검색되도록 또는 최상위권에 뜰 수 있도록, 아이디어나 이름이 겹치치 않도록 구상하고 독창적인 이벤트나 콘텐츠를 구상하는 것도 좋다. - 복사 및 붙여넣기 금지
=>중복 문서로 취급될 가능성이 매우 높기 때문에 검색 결과에서 생략될 수 있으며, 먼저 작성된 글들이 있으므로 상위권에 뜰 가능성이 적다.
따라서, 타 사이트의 글을 인용하고 싶다면 일부만 가져오고 링크를 첨부하는 식으로 출처를 표기한다. - 간결한 제목, 설명글
=>검색 후 유입을 유도할 수 있기 때문에 제목과 설명글만으로 사이트를 파악하기 쉽도록 적절한 길이로 작성해야한다. - 텍스트로 작성
=>검색엔진의 경우 이미지를 읽을 수 없기 때문에 최대한 텍스트로 작성하는 것이 좋다.
꼭 이미지가 필요하다면 alt 속성을 사용하여 이미지에 대한 설명을 간결하게 텍스트로 작성하자.
<img src="이미지.png" alt="이미지에 대한 간결한 설명" />웹 접근성
「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다
인식의 용이성(Perceivable)
=>모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
- 적절한 대체 텍스트 제공
텍스트가 아닌 콘텐츠는 의미와 용도를 이해할 수 있도록 alt 속성을 사용하여 대체 텍스트를 제공해야한다.
정보를 인식할 필요가 없는 경우, alt 속성값에 빈 문자열을 주어 스크린 리더가 인식하지 않게하며, 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우에는 이미지 정보를 중복 제공하게 되므로 작성하지 않는다.
<img src="이미지 주소" alt="대체 텍스트" />
- 자막 제공
=>멀티미디어 콘텐츠는 자막, 원고 또는 수화를 제공해야 한다.
<!--vtt 또는 TTML 형식 사용-->
<video ... >
<track src="자막.vtt" kind="captions" />
</video>
- 색에 관계없이 콘텐츠 인식이 가능해야 함
=>색을 인지하는 데 어려움이 있는 사용자를 염두해, 색 구분이 명확하지 않아도 콘텐츠를 구분할 수 있도록 콘텐츠에 테두리를 설정한다든가, 레이블을 다는 방식 작성한다.
- 명확한 지시사항 제공
=>지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야한다.
텍스트 콘텐츠와 배경 간의 명도 대비를 충분히 확보해야 함
=>텍스트 콘텐츠와 배경 간의 명도가 충분히 확보되지 않으면 텍스트를 읽기 어려움으로, 4.5:1 이상을 꼭 지켜준다. 단, 장식 목적이거나 비활성화된 콘텐츠이거나 필요한 상황에서는 3:1까지 허용된다.
- 동영상 및 오디오 자동 재생 금지
- 웹 페이지를 구성하는 모든 콘텐츠는 시각적으로 구분할 수 있어야 함
=>테두리, 구분선, 무늬, 명도대비, 간격 등 사용하여 시각적으로 구분해야 한다.
운용의 용이성(Operable)
=>UI 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
- 키보드 사용 보장
=>모든 기능은 키보드만으로도 사용할 수 있어야 한다. - 키보드에 의한 초점은 논리적으로 이동해야하며 구별할 수 있어야 함
=>왼쪽->오른쪽, 위->아래로 이동
- 사용자 입력 및 컨트롤은 조작 가능해야 함
=>컨트롤 대각선의 길이는 6mm 이상, 연이은 컨트롤 요소 간 여백 1px 이상을 준다.
- 시간 제한이 있는 콘텐츠는 응답 시간 조절이 가능해야 함
=>충분한 시간, 종료 안내, 조절 수단을 제공해야한다.(ex.은행 사이트)
- 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 함
=>캐서렐 슬라이드의 경우 이전, 다음, 정지 기능을 제공해야 하며, 실시간 검색어의 경우, 접근 시 모든 콘텐츠를 확인할 수 있어야 한다. - 깜빡임, 번쩍인 효과 사용 제한
=>눈에 피로와 발작을 일으킬 수 있으므로, 불가피하게 제공되는 경우, 콘텐츠의 면적을 10% 미만, 시간을 3초 미만으로 제공해야하며 사전에 경고하고 중단할 수 있는 수단을 제공해야 한다. - 반복 영역 건너뛰기
=>가장 앞에 건너뛰기 링크 제공, 필요한 경우에만 메뉴를 열 수 있도록 만들기 등, 중복되는 요소를 건너뛸 수 있는 방법을 제공한다. - 페이지, 프레임, 콘텐츠 블록에 적절한 제목 제공
=>특수 문자는 1개까지만 사용해야 한다. - 용도와 목적을 이해할 수 있는 링크 텍스트 제공
이해의 용이성(Understandable)
=>콘텐츠는 이해할 수 있어야 한다.
- 기본 언어 표시
=> lang 속성을 사용하여 주로 사용하는 언어를 명시해야 한다.
html lang = "ko"
- 사용자가 의도하지 않은 기능은 실행되지 않아야 함
=>페이지 진입 시 팝업X, 모달은 최상단에 제공하여 가장 먼저 제어 가능해야 하고 새 창이 떴을 때, 새 창에 접근하게 됨을 알려주어야 한다.
<!--링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주기-->
<a href="...">페이지<span class="blind">새 창</span></a>
<!--링크 요소에 title 속성으로 새 창 작성하기-->
<a href="..." title="새 창">페이지</a>
<!--링크 요소에 target=”_blank” 속성 넣기-->
<a href="..." target="_blank">페이지</a>
- 콘텐츠는 논리적인 순서로 제공되어야 함(선형 구조)
<!--잘못된 예시-->
<div>탭1</div>
<div>탭2</div>
<div>탭1 관련 내용</div>
<div>탭2 관련 내용</div>
<!--옳은 예시-->
<div>탭1</div>
<div>탭1 관련 내용</div>
<div>탭2</div>
<div>탭2 관련 내용</div>
- 표는 이해하기 쉽게 구성해야 함
=>테이블 요소 안에 caption 요소를 사용하여 표의 제목을 제공함으로써 표의 제목만 보고도 표의 내용을 파악할 수 있도록하며, 제목 셀과 데이터 셀이 구분 되도록 구성해야한다.(제목: <th>, 데이터: <td>)
또한, 표의 구조는 간결하게, scope 또는id, header 속성을 사용해 작성한다.
- 사용자 입력에 대응하는 레이블을 제공해야 함
=>어떤 정보를 입력해야 하는 지 명시한다.
<!--<input> 요소에 id 를 설정, <label> 요소의 for 속성으로 연결-->
<lable for="user_id">아이디</label>
<input id="user_id" type="text" placeholder="아이디" />
<!--title 속성 사용-->
<input type="text" title="아이디" placeholder="아이디" />
<!--WAI-ARIA의 aria-label 속성 사용(사용 자제, 차선책으로 사용)-->
<input type="text" aria-label="아이디" placeholder="아이디" />
- 입력 오류를 정정할 수 있는 방법을 제공해야 함
=>오류 발생 시 입력한 내용을 유지하고, 발생 원인과 위치를 제공해야 한다.(위치: 초첨 이동)
견고성(Robust)
=>웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
- 마크업 언어의 요소는 여닫음, 중첩 관계 및 속성 선언에 오류가 없어야 함
- 웹 애플리케이션 접근성 준수
WAI-ARIA
WAI는 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관이며, ARIA는 웹 점근성을 갖추기 위한 기술이다. 또한, RIA는 빠른 반응의 UI를 갖는 웹 애플리케이션을 의미한다.
따라서, WAI-ARIA란 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격을 의미한다.
WAI-ARIA는 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에서 보조적으로 사용하며, HTML 요소에 추가적인 의미를 부여함으로써 원활한 페이지 탐색을 도울 수 있다.
또한, SPA와 같이 AJAX를 사용하는 상황(새로고침 없이 페이지 내용 변경)에서도 변경된 영역에 대한 정보를 전달해줌으로써 동적인 콘텐츠에서의 웹 접근성 향상이 가능하다.
=>WAI-ARIA의 경우 꼭 필요한 경우가 아니라면 사용하지 않는 것이 좋다. 다른 HTML 속성이나 요소로 대체 가능한 경우에는 해당 속성이나 요소를 우선적으로 사용 해야한다
WAI-ARIA 사용
HTML 태그 내부에 role / state / property 속성을 추가함으로써 의미를 부여한다.
role
어떤 역할을 하는 요소인지 명시하는 속성
<!--올은 예시: 버튼 요소를 만들었는데 div 요소를 사용했을 경우, 역할 명시-->
<div role="button">div이지만 button으로 사용되는 요소</div>
<!--잘못된 예시: HTML 요소로도 충분히 파악할 수 있는 경우, 사용X-->
<button role="button">button인 요소</button>
state
- aria-selected
어떤 요소를 선택했는 지 알 수 있도록 표시해주는 속성 - aria-expanded
아코디언 UI가 펼쳐진 상태인지 표시해주는 속성 - aria-hidden
요소가 숨김 상태인지를 표시해주는 속성
property
- aria-label
요소에 라벨을 붙여주는 속성으로, 예시로 텍스트 콘텐츠가 없는 이미지 버튼이 어떤 역할을 하는 지 명시할 수 있다. - aria-live
해당 요소가 실시간으로 내용을 갱신하는 영역(동적으로 작동하는 콘텐츠)인지 표시하는 속성(polite, assertive, off(default) 값이 있음)
'웹' 카테고리의 다른 글
| WebSocket 과 WebRTC (1) | 2023.09.24 |
|---|---|
| CORS 정책이 필요한 이유 와 Proxy (0) | 2022.12.08 |
| [Deploy] CI/CD (0) | 2022.12.07 |
| [최적화] Optimization (0) | 2022.12.05 |
| UI, UX (0) | 2022.10.24 |
