OJT 교육 3~4
211214 입사 2주차 OJT 교육 중에 새롭게 알게된 부분들을 간단하게 정리해 보았다.
3. 웹접근성
- 다양한 환경(주변 소음까지...)을 보장할 수 있어야 하지만, html/css/js로 보장 가능한 접근성은 시각 장애 환경이라고 볼 수 있다.
- iOS = VoiceOver, Android = Talkback을 설정하여 시각 장애 환경을 테스트 할 수 있다.
- WAI-ARIA속성을 활용하면 더욱 유연한 대처가 가능하다. ex) role=""
- aria-label, blind처리 등을 활용하여 대체 텍스트를 해결할 수 있다.
- button의 경우 aria-pressed="true / false"속성을 활용하여 활성화 상태여부를 확인할 수 있다.
- img태그는 세세하고 정확하게 대체 텍스트를 제공하기 어렵다면 alt를 빈 값으로 제공한다.
- table(표)을 마크업 할 때 scope="col / row, colgroup"속성을 정확하게 써 준다.
- label을 활용할 수 없을 경우, aria-labelledby속성과 id를 일치시켜 줌으로 해결할 수 있다.
- checkbox도 label 없이 단독으로 쓰여질 때 aria-labelledby속성을 활용하여 어디에 속해있는지 구분해 줄 수 있다.
- 이외에도 활용가능한 다양한 WAI-ARIA속성이 있으니 틈틈이 찾아보자.
4. 모바일 마크업
- shrink-to-fit=no속성은 safari 11이하에서 뷰포트보다 콘텐츠 크기가 크면 자동으로 축소해서 fit하게 보여주는것을 방지한다.
- viewport-fit=cover속성은 아이폰 X에서 좌/우/하단 영역 대응하기위한 전체화면 적용가능 여부
- 미디어쿼리 템플릿
- 노치가 있는 아이폰 기기의 경우 safe area 속성을 활용하여 대응할 수 있다.
.wrap {
padding-left:0; /* 노치가 없는 기기 */
padding-left:env(safe-area-inset-left); /* 버전에 따라 safe area 적용 */
padding-left:constant(safe-area-inset-left);
}
/* padding 말고 margin 속성도 적용 가능 */
/* 축약형 */
.wrap {
padding-left:calc(0 + env(safe-area-inset-left));
}
- 모바일 화면 작업시 a태그에 tel, geo, maps 활용하여 유용하게 사용가능
- -webkit-line-clamp 속성으로 말줄임 처리 쉽게 가능
Author And Source
이 문제에 관하여(OJT 교육 3~4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@inusneo/OJT-교육-34저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)