웹표준 W3C
웹에서 표준적으로 사용되는 기술이나 규칙
사용자가 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 제작 기법
웹표준 왜 지켜?
유지보수
웹 호환성
검색 효율
웹 접근성
Semantic HTML
HTML요소가 의미를 갖도록 만드는 것. 태그만 보고도 어떤 기능을 하는지 알 수 있게된다.
<div>, <span> 👉 👉 👉 <header>, <nav>, <main>, <aside>
시멘틱은 또 왜야?
개발자간 소통: 일일히 클래스 아이디 안줘도 됨!
검색 효율성: 검색엔진에 더 자주 뜰 수 있다.
웹 접근성: 스크린리더로 읽을 때 의미를 더 잘 전달할 수 있다.
<header> | 페이지나 요소의 최상단 |
<nav> | 메뉴, 목차 |
<aside> | 문서와 연관은 있지만, 직접적인 연관은 없는 내용 |
<main> | 메인이 되는 주요 콘텐츠 |
<article> | 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분. (각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용한다.) |
<section> | 문서의 독립적인 구획. 딱히 적합한 의미의 요소가 없을 때. 제목(<hgroup>)을 포함 |
<hgroup> | 제목 |
<footer> | 페이지나 요소의 최하단 |
hgroup은 처음 보는 태그인데, mdn에서 사용법을 찾아봤다.
<hgroup> <h1>Calculus I</h1> <p>Fundamentals</p> </hgroup> <p>This course will start with a brief introduction about the limit of a function. Then we will describe how the idea of derivative emerges in the Physics and Geometry fields. After that, we will explain that the key to master calculus is …</p>
article과 section
article > section 임
<article> <h1>article header</h1> <section> <h2>section header</h2> <div>section content</div> </section> </article>
자주 틀리는 마크업
마크업을 제대로 공부한 적이 없다. 자주 쓰는 태그 몇개만 알고... 어떤 태그 내에 어떤 태그를 넣으면 안되는지를 몰라서 실수한 적도 많음. 화면에는 대부분 제대로 나오기 때문에 잘못된 줄 모르고 나중에 오픈왁스였나? W3C validator였나에서 검사해보고 이렇게 쓰면 안되는구나 깨달은게 몇번인지..
일단 인라인요소/블록요소 구분을 할 줄 알아야 한다.
웹접근성 검사 사이트
웹접근성 검사 개발자도구(크롬 익스텐션)
https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe?hl=ko
1. 인라인 요소 안에 블록 요소 넣지마로라
블록 안에 인라인이 위치해야한다.
이거야 이거 내가 실수했던거... 아마 문구를 단어별로 각각 구분해서 색&동작을 넣어주고 싶어서 나누다가 그랬던 것 같다.<span><div>안됨</div></span>
2.
<b>,<i>같은 옛날태그 발굴하지 말고<string>,<em>쓰자화면에 어떻게 나오는지는 css에 맡기고 tag는 어떤 역할인지를 생각하면서 쓰면 된다.
3.
<hgroup>맘대로 사용하지 말것글씨크기만 생각하고 사용하면 이렇게 된다. 사실 지금 뜨끔한게.. 벨로그를 이런식으로 사용하고있어서ㅋㅋㅋㅋ 아 그치만 벨로그에 css까지 쓰기 좀 글차너 봐주자 코딩할땐 이렇게 안한다구
이것도 위에 있는 것의 연장선상이라 생각하면 될 것 같다. 글씨크기는 css로 조정하면 된다.
4.
<br/>연속으로 쓰지 말것
<br>을 줄바꾸기 위해서가 아니라 여백을 주기 위해 쓰지 말자. 역시 css로 조정하면 된다.
5. 인라인 스타일링 하지마 그냥 하지마...
html코드 내에서 인라인으로 css 쓰지 말라는 말. html과 css를 별개로 생각하고 별개로 작성해야한다. html에 css 관련된건
<link rel="stylesheet" href="">뿐이다.
이걸 간과하고 인라인 스타일링을 쓰면, 우선순위에 의해서 css가 제대로 안먹을 수 있다. 인라인 스타일이 제일 우선이다.. 물론 여기에 !import가 들어가면 말이 달라지지만... html 파일에 css 쓰지 말자.
크로스 브라우징
웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
얼마 전까지만 해도 인터넷 익스플로러만을 위해서 웹표준에 맞지않는 코드를 사용해야 했었다. ActiveX 때문에 한국에서는 인터넷 익스플로러를 포기하지 못했었다. 그러나 인터넷 익스플로러 지원이 종료되었다! YaY 나도 인터넷 익스플로러때문에 flex도 못쓰고 float으로 화면 레이아웃을 짜던때가 있었는데... 그짓을 안해도 되다니 너무좋군.
크로스 브라우징 워크플로우
- 초기기획 : 타겟 유저가 사용하는 브라우저, 기기 파악
- 개발: MDN이나 Can I Use 사이트에서 코드 호환성 확인
https://caniuse.com/- 테스트: 다양한 운영체제와 브라우저에서 테스트
- 버그수정🐞
SEO :: Search Engine Optimization
검색했을때 검색결과 상위에 없거나 뒷 페이지로 밀려난다면 아무도 찾지 않는 웹페이지가 되어버린다... 😭
이런 슬픈 처지가 되어버리는 것을 방지하기위해 SEO가 필요하다.
- On-Page SEO : 페이지 내부에서 진행할 수 있는 SEO.
* 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 - Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO.
* 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법
On-page SEO
1. <title>
검색 결과창에서 제목에 해당하는 요소. head요소의 자식요소로 작성한다.
- 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하지 어려워지면 유입률이 떨어진다.
- 핵심 키워드를 title에 포함한다. 같은 키워드를 반복하지 않고 한번만 포함시킨다.
2. <meta>
해당 웹사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터를 말한다. head요소의 자식요소로 작성한다.
1. 검색 결과창에서 제목 밑에 따라오는 설명글이 meta요소 안에 들어있는 내용이다.
2. 링크를 공유했을때 뜨는 링크 미리보기와 관련 정보도 meta 요소에 들어가있다.
네이버 메타태그
<head> <title>네이버</title> <meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요" /> </head>
name 속성값
| description | 콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 내용이다. |
| keywords | 웹 페이지의 관련 키워드들을 나열 |
| author | 제작자 표시 |
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>
이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나 핵심 키워드와 관련된 키워드들을 포함시키는 것이 좋다.
4. Contents
개성있는브랜딩 : 아이디어나 이름이 겹치지 않을수록 상위권에 뜰 가능성이 크다.
복붙 금지 : 복붙하면 검색 엔진이 생략한다. 인용하고 싶으면 링크를 첨부한다.
간결한 제목과 설명글
최대한 글자로 작성 : 글자로 작성할 수 있는것을 이미지로 쓰지 말자. 이미지를 넣을때는 alt속성을 사용해 설명을 꼭 첨부한다. 너무 길게 작성하면 스팸으로 인식할 수도 있으니 주의한다.
SEO 가이드
https://searchadvisor.naver.com/guide
https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko
웹 접근성
인식의 용이성
모든 콘텐츠는 사용자가 인식할 수 있어야 함
1. 적절한 대체 텍스트
- alt 속성을 사용해 대체 텍스트를 제공한다.
정보를 인식할 필요가 없는 경우에는 alt에 빈 값을 주어 스크린리더가 인식하지 못하게 한다.
인접 요소의 내용에서 정보를 인지하기 충분하다면 대체 텍스트를 작성하지 않는다.<img src="image address" alt="이미지 설명" />2. 자막, 원고 또는 수화 제공
- 비디오 요소 안쪽에 track요소를 사용해 자막파일을 불러온다.
<video ... > <track src="자막.vtt" kind="captions" /> </video>3. 색에 관계없이 인식되어야 함
- 콘텐츠에 테두리 설정
- 콘텐츠에 레이블 달기
4. 명확한 지시사항 제공
지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수있어야 함.
5. 텍스트와 콘텐츠 명도 대비 4.5대 1 이상
6. 자동재생 금지
스크린 리더를 사용하는 경우 소리가 겹칠 수 있다.
가장 먼저 위치시켜 정지할 수 있게 구현하고 esc 눌러 정지할 수 있어야 한다. 3초 이내에 정지하도록 한다.7. 콘텐츠 간 시각적 구분이 명확하게 되어야 함
운용의 용이성
사용자 인터페이스 구성요소는 조작가능하고 내비게이션 할 수 있어야함
8. 키보드 사용 보장
9. 초점 이동은 일반적으로 왼쪽에서 오른쪽, 위쪽에서 아래쪽으로 된다.
10. 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 함
- 버튼 등이 너무 작지 않게 한다.
- 컨트롤이 연달아 있는 경우 여백을 주어 구분한다.
11. 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
- 충분한 시간, 종료 안내, 조절 수단을 제공해야 한다.
- 페이지를 자동전환하는 경우 전환되기까지 시간을 연장하거나 정지할 수 있는 수단을 제공해야한다. 스크린 리더나 키보드를 사용하는 유저도 원활하게 이용할 수 있도록 한다.
12. 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 함
- 정지버튼이 없더라도 마우스 호버나 키보드 접근시 정지되도록 구현한다.
- 정지기능이 없더라도 접근했을 때 모든 콘텐츠 확인할 수 있도록 구현한다.
13. 깜빡이거나 번쩍이는 콘텐츠 사용 제한
14. 반복되는 영역은 건너뛸 수 있어야 함
- 가장 앞에 건너뛰기 링크 제공한다.
- 메뉴를 필요할 떄만 열 수 있도록 한다.
15. 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공한다.
16. 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공되어야 함
- 링크를 설명해주는 대체 텍스트 작성한다.
- 비어있는 링크가 없어야함
이해의 용이성
17. 주로 사용하는 언어를 명시한다
<html lang="ko">18. 사용자가 의도하지 않은 기능은 실행되지 않아야함
- 페이지 진입시 팝업이 뜨지 않게 해야함. 모달이 있는경우 가장 상단에 제공해 가장먼저 제어할 수 있도록 함
- 스크린리더 사용자도 알 수 있게 새 창임을 알려주어야 함.
//1 링크 안에 안보이게 새창이라는 정보 넣기 <a href="...">페이지<span class="blind">새 창</span></a> //2 title 속성으로 새창 작성 <a href="..." title="새 창">페이지</a> //3 target="_blank" 넣기. <a href="..." target="_blank">페이지</a>
- target = "_blank" 와 "blank"는 다르다.
19. 콘텐츠는 논리적 순서로 제공되어야 함
- 스크린 리더는 마크업 순서대로 내용을 읽는다.
20. 표는 이해하기 쉽게 구성한다
- 듣기만해도 표의 구조와 내용을 이해하기 쉽게 구성해야한다.
- caption 요소를 사용해 표에 제목과 간단한 요약을 작성한다.
- 제목 셀과 데이터 셀을 구분하도록 한다. 제목:
<th>데이터:<td>21. 사용자 입력에 대응하는 레이블을 제공해야 함
// id 설정해 label for로 연결 <lable for="user_id">아이디</label> <input id="user_id" type="text" placeholder="아이디" /> // title 속성 사용 <input type="text" title="아이디" placeholder="아이디" /> // aria-label 사용 <input type="text" aria-label="아이디" placeholder="아이디" /> * WAI-ARIA는 보조적으로 사용한다. 될수록 안쓰는 게 좋음.22. 입력 오류를 정정할 수 있는 방법 제공
- 입력했던내용이 사라지지 않고 유지되도록 한다.
- 오류 발생 원인을 알려줘야한다.
- 오류가 발생한 위치로 초첨 이동
견고성
23. 마크업 오류 방지
24. 웹 애플리케이션 접근성 준수
WAI-ARIA
ARIA: 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 접근할 수 있도록 하는 기술
WAI-ARIA: WAI에서 발표한 RIA환경에서의 웹 접근성 기술 규격
왜 사용하는데?
HTML 요소에 추가적으로 의미를 부여한다.
시멘틱 요소만으로 의미를 충분히 알 수 없을때 사용한다.
AJAX를 사용하는 상황, 새로고침 없이 페이지 내용이 바뀌는 동적인 콘텐츠에서 사용한다.
사용목적
역할: role
요소 종류와 역할이 서로 맞지 않을때 역할에 대해 설명해주는 속성
//예1 <div role="button">버튼으로 쓸div</div>상태: aria-selected
<div role="tabList"> <li role="tab" aria-selected="true">Tab1</li> <li role="tab" aria-selected="false">Tab2</li> </div> <div role="tabpanel">Tab menu ONE</div> <div role="tabpanel">Tab menu TWO</div>
- aria-expanded: 펼쳐진 상태여부
- aria-hidden: 숨김 상태여부
속성
- aria-label: 요소의 용도
<a class="icon-button" href="/" aria-label="더보기"> <i class="ic-chevron" aria-hidden></i> </a>
- aria-live: 실시간으로 내용을 갱신하는 영역인지 표시
- aria-live="polite" : 현재 읽고있는 내용 모두 읽은 후 갱신된 내용 전달
- aria-live="assertive" : 현재 읽고있는 내용 중단 후 갱신내용 전달
- aria-live="off": default
ARIA in HTML(W3C)
참고
