퍼블리싱4 실전에 쓰이는 WAI-ARIA WAI-ARIA에 대해 정리하기에 앞서 중요한 것은, ARIA를 통해 웹접근성을 높일 수 있으나 컨텐츠에 맞는 의미의 엘리먼트를 더욱 중점으로 쓰는 것이 중요하다는 것이다. 웹에서 ARIA가 접근성을 더욱 높여줄 수는 있으나, 가장 기본은 시멘틱한 마크업이 더욱 중요하다는 것이다. 적재적소의 엘리먼트 사용에 대해 더욱 고민해보자. * 이 포스팅은 알아가는 것들을 추후에 꾸준히 업데이트 할 예정입니다. 보시다가 모자른 설명이나, 해석이 있다면 댓글 부탁드립니다. 1. font Awesome(폰트 아이콘)의 경우 //안에 내용은 읽지 않고, 스크린리더에서만 읽을 수 있는 아이콘 설명이 들어간다. (title / aria-hidden 속성 중요) 2. 컴포넌트를 숨긴 상태라면 (탭의 컨텐츠) aria\-hid.. 2021. 6. 29. 단계를 나타내는 UI - 프로세스 이미지화 디자인상으로는 컬러나 텍스트로 변화를 줘서, 해당 단계임을 나타내보일 수 있지만, 보이지 않을 경우, 현재 단계가 어디인지를 나타내주어야한다. 그런경우 아래와 같이 써본다. ol > li > span.hidden 위와 같은 구조로 봤을 때, hidden 처리 된 span 엘리먼트 안에 "현재 페이지" 또는 "현재 단계"의 텍스트를 넣어주면 보이지 않는 경우에도 현재 단계가 어디인지 나타내 줄 수 있다. 응용적으로 hidden 처리 시킨 span 을 그림에서와 같이 아래 화살표 모양의 디자인을 넣어줘서 디자인도 만족시키고, 추가적인 태그 추가 등을 막을 수 있다. HTML5 에 WAI-ARIA 속성이 적용되면서 해당 UI에 WAI-ARIA 를 추가한 구조를 아래처럼 나타낼 수 있다. 1단계 2단계 3단계 .. 2021. 6. 29. section 태그 안의 헤딩 구조 - Outline 에 대하여. SECTION 태그 안의 헤딩 구조 html5 에서는 하나의 주체적인 문단을 나누는 section이라는 요소를 지원한다. 이 태그안에서는 h1에서부터 h6까지 헤딩요소를 넣을 수가 있다. (로고나, 그 페이지에 h1이 쓰여있더라도) 그러나, section에서 h2~h6까지의 헤딩을 쓰기를 권장하고 있다. 여기서 왜? 라는 의문이 떠오른다. 이번 포스팅은 그것에 대한 정리다. (그러나, 아직 내머릿속도 정확하지않다.) 제일 처음 알아야할 것은, 섹셔닝과 아웃라인이다. HTML5 전에는 헤딩자체가 아웃라인을 만들었다면, html5에서는 아웃라인을 만드는 요소와 함께 헤딩을 써서 아웃라인을 만들게 된다. (그래서 더 어렵다고 느껴지기도 한다.) 아래 두가지 구분을 가진 요소들을 기억해야한다. 섹셔닝 요소 - .. 2021. 6. 29. 퍼블리싱 초기 설정 관련 포스팅 퍼블리싱 경험을 토대로 하나씩 기준을 세워 작업을 한다. 그것을 정리해서 문서화했다. 1. 웹폰트 - ie8 이하 프로젝트의 경우, 웹폰트는 폰트명 각각 설정한다. - ie8 이하 프로젝트의 경우, 폰트 굵기는 normal, bold만 설정된다. - ie9 이상 프로젝트의 경우, 폰트명 하나에 굵기를 다양하게 지정 가능(100~900) - FOUT 현상을 줄이기위해 local을 먼저 불러올 것 - ie8 이하를 고려하지 않는다면, 과감히 .eot 파일을 버리는 것도 용량을 줄이는 방법 중 하나. 2. 네이밍 규칙 3-0. 전체 공통 - 시작을 대문자, 숫자, 특문으로 시작할 수 없다. - 의미-형태-순서-상태 순서로 사용 - 숫자는 두자리 정수를 사용한다. (ex: 01, 02, 03...) 3-1. c.. 2021. 6. 29. 이전 1 다음
