퍼블리셔8 .svg를 웹폰트화 하기 벡터이미지인 SVG 이미지를 반응형이나 모바일에서 많이 쓰이는데 자주 쓰이는 아이콘 이미지를 웹폰트화 하기 위한 방법을 서술한다. 1. 먼저 path가 묶여지지 않은 벡터 이미지를 svg 이미지로 다운을 받는다. path가 묶여진 채로 svg를 다운받으면 오류가 난다. 2. 아래 사이트에서 우측 상단의 IconMoon App 버튼을 클릭한다. https://icomoon.io/ Icon Font & SVG Icon Sets ❍ IcoMoon About IcoMoon is striving to build and provide the best iconography and icon management tool for perfectionists. IcoMoon's icon library features only.. 2021. 6. 30. IE 브라우저에서 table-cell 에 position:relative 를 쓸 경우. 오랜만에 포스팅하는 중. 이번 포스팅의 정리는 퍼블리싱 작업 중 자주 나오는 회원가입(정보입력) 페이지와 같은 경우에 해당하는 내용이다. 보통 정보입력 부분에 필수 입력하는 부분을 *와 같은 표시로 나타내주는데, 이 경우 * 표시가 텍스트 뒤에 붙는다면 크게 상관이 없겠지만, 앞에 position:absolute를 써야하는 경우가 발생한다. 그런데 이때, th와 같은 table-cell 에 position:relative를 주게되면 크롬에선 정상적으로 표현되나, ie에서 table-cell이 가지고 있는 border값이 뭍히는 경우가 발생한다. (position값을 제거하면 다시 나타난다) 이럴 경우는 th>div 를 둬서 div부분에 position:relative값을 주거나, 디자인의 변화를 주는 것.. 2021. 6. 30. 웹접근성 검수 시 주의 (웹접근성 마크를 위한) 1. skipnavigation 다수의 건너뛰기를 제공할 경우, 핵심 콘텐츠인 본문으로 이동하기를 우선으로 제공. Content / GNB / Footer 순으로 스킵네비게이션을 구현한다. GNB의 경우 IE11에서 요소 등에 접근하지 못하는 버그가 있으므로, ul이전에 div와 id,크기값을 지정하여 주메뉴 영역으로 이동할 수있게 한다. 2. 저시력자를 위해 해당 페이지의 내용을 쉽게 파악할 수 있도록 순서를 아래와 같이한다. 작은순에서 큰순으로 작성. ex) faq < 고객라운지 < JEONst Home 3. 의미없는 이미지에는 alt를 "" 비게 한다. 4. label (레이블) 레이블의 내용을 형태로 제공할 경우, 일부 스크린리더는 인지못하는 경우 발생하여 해당 input에 title로 주거나, .. 2021. 6. 29. 가독성을 위한 폰트사이즈 웹접근성 프로젝트를 진행하다보니, 가독성을 위한 폰트사이즈가 몇 픽셀인지 찾게된다. 그렇게 웹접근성연구소에서 찾다가 정리하게됐다. 웹접근성 의견은 아래와 같다. 기존에는 인증심사에서는 서체 크기를 12px(9pt)을 기본으로 봤었는데, 최근의 브라우저들의 성능 향상으로, 크기를 자유롭게 조절할 수 있기 때문에, 인증심사에서 이 기준이 빠지게 되었다. 그러나, ie6 에서는 문제가 되며, 영문과는 달리 11px 미만은 서체 깨짐이 발생하기 때문에 가독이 어렵다. 한글의 경우 최소 기준을 11px이다. 그러므로, 위 기준에 맞춰서 가독성을 높이는 방향으로 작업을 진행하는 것이 좋을 것으로 보인다. 2021. 6. 29. alt 는 몇글자 까지 지원할까? W3C Specification 상 alternate text에 대한 length limit 는 존재하지 않음. WCAG 2.0 문서상에는 영문 100자, 한글 90자 이내로 제한 SEO 상으로는 2015년 기준 16자 이내를 권장 SEO(검색엔진최적화)가 화두로 오르는 현 시점에서 3번이 가장 현답인듯하나, 융통성있게 긴 문장의 경우 logdesc(롱데스크)를 이용하여 별도의 파일이나, 부분을 만들거나, IR(이미지 대체기법)을 통해 좀더 알맞은 형태로 반영해줘야 할 듯 하다. longdesc 관련하여 자료를 찾다가 글을 보았는데. 접근성상 긴 문장의 이미지에 longdesc를 달아주는게 접근성상 맞는 답인듯 하였지만, 실제 국내에서 시각장애인이 longdesc를 사용하는 경우의 수가 적다하니, 실상 .. 2021. 6. 29. 기본 중의 기본인, Skip Navigation 가장 기본이 되는, skip nav에 대해서 정리해 볼까 한다. 스킵네비를 왜 쓰는가? 부터가 기본이 되어야되지 않을까? 가장 큰 이유는 사용자 편의 및 웹접근성 이다. 웹접근성이라고 하면 우리나라에서는 장애인에 의한 편의 고려 라고 생각하는데. 더 큰 범위에서는 정상적으로 쓸 수 없는 상황에 대해서 편의를 고려한다고 생각하는게 더 맞지않을까 싶다. 가령 내가 마우스가 고장났다면? 또는 키보드를 못쓴다면? 여기서 스킵네비는 키보드만으로 접근을 하는 사용자를 위한 편의 고려 장치 라고 설명한다면 좀더 쉽게 받아들 수 있지않을까? 마우스로 우리가 보고자하는 본문내용쪽으로 포커스를 움직인다면 편리하겠지만, 키보드만으로 쓰는 경우는 본문으로 가기까지 거쳐야하는 메뉴등들이 많다. 그래서 HTML 가장 상단에 스킵.. 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 다음
