본문 바로가기

👩🏻‍💻STUDY/Publishing

(8)

마크업 정리 버튼은 button태그. anchor태그는 페이지 이동. input에 label을 매칭 못할 때는 title 사용. a링크 텍스트에 aria-label="" a href="javascript:void(0)" 대체텍스트는 aria-label 적용. aria-label적용이 아닐 시 sr-only 클래스 적용. .sr-only { position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; padding:0px; clip:rect(0,0,0,0); } 마크업은 탭 포커스 위치로 만든다.(팝업의 닫기버튼은 마지막에 적용되야 함) 부트스트랩은 마크업 웹접근성을 참고하기 좋다. Q. sr-only가 있는데 왜 font-size:0px을 사용할까?..

Meta Tag, OG(오픈그래프) 사용하기 오픈그래프(Open Graph) 콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것 원리 링크라는 것이 인식되면 크롤러가 해당 웹사이트의 HTML head의 메타 데이터를 크롤링하여 미리보기 화면을 생성 프로토콜 비교적 통일된 방법으로 페이스북의 open graph 프로토콜을 사용한다. 페이스북, 네이버블로그, 카카오톡 등에서 사용하고 있는 프로토콜 open graph 문서 태그 사용법 800 X 800 또는 600 x 315 또는 1200 x 630 대다수 카톡으로 많이 url을 보내므로 800x800으로 맞추었다. 기본적으로 웹에 설정해줘야 하는 og 메타태그 네이버블로그, 카카오톡 미리보기 설정 트위터 미리보기 설정 Reference Meta Tag, OG(오..

웹접근성에 주의해야 할 부분 웹접근성 주의할 부분 1. label || title form에서 label과 input이 들어갈 때 label에 input 의 아이디를 넣어 연결시켜준다. 하지만 label이 없을 경우 input에 title=""를 넣어 명시해준다. 2. aria-hidden 화면상 숨겨지거나 가려진 콘텐츠 ARIA를 적용하여 모바일 스크린리더기가 접근하지 않도록 구현. undefined(default) true 접근성 API 차단. (화면표시 여부와 무관 API 차단) false 접근성 API 사용. (화면에 표시한 경우 API 사용) aria-hidden vs hidden aria-hidden :: 화면에 표시되나 접근성API(보조기기 접근 가능성) 차단 상태 결정. hidden :: 화면에 표시되지 않아 접근 불..

NHN 코딩컨벤션 pdf 자료 https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf 최신판은 아니지만 읽어보면 유용하다.

Google HTML/CSS Style Guide 목차 1 배경 2 일반 2.1 일반 스타일 규칙 2.2 일반 서식 규칙 2.3 일반 메타 규칙 3 HTML 3.1 HTML 스타일 규칙 3.2 HTML 형식 규칙 4 CSS 4.1 CSS 스타일 규칙 4.2 CSS 서식 규칙 4.3 CSS 메타 규칙 1 배경 이 문서는 HTML 및 CSS에 대한 형식 및 스타일 규칙을 정의한다. 협업, 코드 품질을 개선하고 지원 인프라를 활성화하는 것을 목표로 한다. 2 일반 2.1 일반 스타일 규칙 2.1.1 프로토콜(Protocol) 리소스에 HTTPS를 넣는 것이 좋다. HTTPS(https:) 는 이미지 및 기타 미디어 파일, 스타일 시트 및 스크립트에 붙이는 것이 좋다. /* 권장하지 않음 : 프로토콜 생략 */ @import '//fonts.google..

웹접근성을 위한 텍스트 숨김 처리(blind text) 사용이유! display: none 이 아닌 접근성을 고려해 숨김처리한다. .hide { position: absolute; top: -9999px; left: -9999px; text-index: -9999px; width: 1px; height: 1px; } 위와 같은 경우 접근성에 문제를 일으킨다. text-indent의 경우, 앵커태크()나 html5에서 대화형 요소들에서 초점을 document 밖에 잡아버리는 문제점이 있다. 보이지 않는 곳에 초점이 나가는 것은 접근성에 위반되므로, 숨김텍스트를 사용하고자 할 때 부적합하다. .blind { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect..

웹 표준성(Web Standards) 웹 표준성(Web Standards) 웹 표준이란? 사용자가 어떤 브라우저나 기기를 사용해도 내용을 동일하게 볼 수 있도록 하는 것. 표준화 단체인 W3C가 권고한 표준안에 따라 웹을 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다. 웹 표준 준수는 웹 접근성 준수를 위한 핵심이다. 즉, 웹 접근성이 더 큰 개념이며. 웹 표준은 웹 접근성을 구현하기 위한 부분적 요소다. 웹 표준 관련 기술의 소개 구조 (X)HTML 표현 CSS 동작 Script 1. 구조 언어 (X)HTML & XML HTML5는 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표. 많은 기업들이 HTML5의 표준화에 힘을 보태고 있고, Firefox, Opera, Safari, Chrom..

웹접근성(Web Accessibility) 웹접근성(Web Accessibility) 웹 접근성(Web Accessibility) 웹 접근성(Web Accessibility) 웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것. 장애인 및 고령자 등을 포함한 모든 사람 다양한 플랫폼 및 장치, 웹 브라우저 등의 모든 환경 웹의 가장 중요한 요소인 HTML은 다양한 플랫폼과 장치에 독립적인 정보교환 수단을 제공하기 위해 탄생되었다. 그래서 사용자의 환경이나 사용하는 기기, 운영체제에 가능한 한 영향을 받지 않고 웹이 제공하는 정보를 사용자에게 전달하고 하는 목적에서 만들어진 정보 전달 체계이다. 하지만 국내 웹의 현실은 웹의 기본적이고 중요한 목적을 무시하고 특정 기기나 운영체제에만 최적화된 경우가 많다. 이러..

이전 1 다음

티스토리툴바