Publish23 퍼블리싱을 할 때 이런 가이드로 작업합니다! 1. 마크업 (HTML)HTML5를 이용한 논리적 순서로 시멘틱한 마크업을 기본으로 한다.ID는 큰 레이아웃(header, footer..)을 제외한 사용을 지양한다. (접근성 제외)Form요소(input,select,textarea)에는 title 속성을 기입한다. 규칙은 아래와 같다.섹셔닝 관련하여 Heading level을 준수한다. [6번 목차 참고]섹셔닝에 관련된 태그를 남발하지 않으며 문서(document)에 필요한 요소들로 마크업한다.의미가 없는 이미지는 가급적 배경처리하되 개발에 관련하여 들어가야하는 동적인 이미들은 alt값을 넣어준다. alt값은 필수이며 의미가 없더라도 빈값의 alt 속성을 추가한다. 빈 alt값을 가지는 img에 한해 role="presentation" 속성을 추가한다.. 2024. 10. 18. 접근성 Tag Skip navigation다수의 건너뛰기를 제공할 경우, 핵심 콘텐츠인 본문으로 이동하기를 우선으로 제공. Content / GNB / Footer 순으로 스킵네비게이션을 구현한다.GNB의 경우 IE11에서 요소 등에 접근하지 못하는 버그가 있으므로, ul이전에 div와 id, 크기값을 지정하여 주메뉴 영역으로 이동할 수있게 한다.Title tag저시력자를 위해 해당 페이지의 내용을 쉽게 파악할 수 있도록 순서를 아래와 같이한다. 작은순에서 큰순으로 작성.faq Img tag의미없는 이미지에는 alt를 "" 비게 한다.Label tag레이블의 내용을 형태로 제공할 경우, 일부 스크린리더는 인지못하는 경우 발생한다.그렇기 때문에 해당 Input에 title 속성을 주거나, label태그로 텍스트로 제.. 2024. 10. 18. WAI-ARIA (웹접근성) 참고 : https://jangkunblog.com/assets/file/2016.12.14-WAI-ARIA.pdf1. 속성aria-haspopup (팝업 유/무)값 : true / false다른 속성은 지원하지않는 브라우저 많다. 그렇기때문에 위 값 위주로 써줄것을 추천한다.aria-current (현재 위치)선택된 메뉴와 같은 경우에 적용값: page(paging), *step(preocess), location, date, time, *true(tab), false(default)aria-expanded (확장)값 : true(확장) / false(축소)아코디언이나 레이어팝업 열기/닫기 버튼aria-controls="id" (제어하는 요소)현재 버튼이 제어하는 요소를 넣어주기레이어팝업 열기닫기 버튼.. 2024. 10. 18. SEO(검색엔진최적화) Title타이틀 속성은 META TAG의 description 과 비슷한 영향을 준다.웹 접근성이라는 이슈때문에 국내 사이트들은 보통은 '사이트명>페이지명' 이렇게 쓰는 편인 것으로 아는데 SEO 상 공백 포함 10-70자정도를 포함하는 것이 좋다. (구글에서 최대 70자를 보여주고, 처음 12단어를 보여준다고 한다.)그리고 해당 페이지는 페이지마다 고유한 제목이 필요하다.이 고유한 제목을 만들기 위해서는 해당 페이지에 가장 중요하고 관련성 높은 키워드를 넣되, 단어 반복은 제한하도록 한다.META Description해당 웹페이지의 설명을 뜻한다. 구글에서 검색을 하게 되면 아래처럼 나오는데 노란색 줄 친 부분이 description meta tag로 나타내질 부분이다.해당 텍스트는 70~160 자를.. 2024. 10. 18. IR(Image Replacement) 기법 & IS(Image Sprite) 기법 IR (Image Replacement) 기법 "의미가 포함되어 있는 이미지"를 배경으로 처리하고 전경에 상응하는 텍스트를 넣는 방법. "접근성을 떨어트리지 않고" 검색엔진으로부터 높은 가중치를 받을 수 있다. 의미가 포함된 이미지는 전경으로 처리한다. IS (Image Sprite) 기법 조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement)기법을 함께 사용해야 함. *좋아요와 댓글은 힘이 됩니다. 2021. 6. 30. IOS 에서의 스크롤링 CSS 아이폰 사파리의 경우, webkit 엔진을 쓰기 때문에 스크롤시 webkit css를 하나 더 추가 해주어야 한다. -webkit-overflow-scrolling:touch; 이렇게 해야 스크롤이 자연스럽게 내려갈 수 있다. 아니면 모바일에서 뚝뚝 끊어진다. *좋아요와 댓글은 힘이 됩니다. 2021. 6. 30. 스크롤시 background 고정 스크롤시 백그라운드의 위치를 고정하고자 할때, background-attachment : fixed /* 기본값은 inherit 이다.*/ *좋아요와 댓글은 힘이 됩니다. 2021. 6. 30. 안드로이드 모바일 자동 조절 폰트 ios와 안드로이드 동시 작업 중, ios에서는 정상적으로 폰트가 출력되는데 안드로이드에서 자동조절되서 폰트가 크게 나오는 경우. * {-webkit-text-size-adjust:none;} *update 저 속성을 썼는데도 안먹어서 해당 부분에 고정 height를 줬더니 제대로 잡힌다. *댓글과 좋아요는 힘이 됩니다. 2021. 6. 30. 요새 많이 쓰이는 단위 정리 (vh/vw/calc) px, em, rem을 넘어서서 요새 많이 쓰이는 단위를 정리해보겠습니다. 사용함에 있어서 굉장히 편리하고! 게다가 IE9부터 지원을 하기 때문에 앞으로의 쓰임이 더욱 기대되는 단위입니다. 1. vw, vh width:100vw; height:100vh; width 에는 vw를 height에는 vh 를 사용하는데. 이부분은 반응형웹과 같은 곳에서 쓰일수록 더욱 편리함이 높아집니다. 이 단위는 요소의 뷰포트값의 100분의 1을 하는 값을 뜻합니다. 즉 값에 해당하는 숫자는 1부터 100이 됩니다. (1vh - 100vh) 가령 브라우저의 전체 넓이가 1000px이 된다면 1vh 는 10px이 되는 것을 뜻합니다. 위의 단위를 쓴 저의 구체적 사례로는, 브라우저의 전체화면에 풀 이미지를 넣어야하는 경우였.. 2021. 6. 30. 이전 1 2 3 다음
