🔥 HTML
🌟 img를 이용한 버튼
- a태그 내부에 이미지를 넣는것이 아닌 의미에 맞게 버튼의 배경으로 마크업 하는 것이 맞다.
- 이미지의 요청 횟수를 줄이기 위해 하나의 이미지를 이용해 이전 다음 처럼 돌려서 사용
🌟 주관적인 강조
🔥 CSS
🌟 a 태그 블록상자 감싸기
- 인라인 요소여서 원래 블록을 포함할 수 없지만 html5는 허용, display block값을 주면 된다.
🌟 부모 요소에 경계가 없을 때
- 자식 요소에 적용한 마진은 부모도 투과하여 병합 적용된다.
🌟 구분선
🌟 image 썸네일 참고
- img 태그를 span으로 감싸 디자인을 span 태그에 꾸미기를 적용하는 방법이 있다.
- 원본과 마크업을 분리하여 작업하면 유지 보수에 유리하다.
🌟 text-align : justify
- 양쪽에 맞춘 텍스트 정렬, 너무 넒은 여백은 오히려 어색할 수 있다.
🌟 공통된 디자인
- 반복되는 디자인은 한 클래스에 묶어 조립하여 사용하면 재사용성이 좋다.
웹 접근성 4대원칙
인식의 용이성
- 웹사이트의 정보는 모든 사람이 인식할 수 있어야 한다.
1. 대체 텍스트
- 상세하고 이해할 수 있는 객관적인 대체 텍스트로 작성해야 한다.
2. 미디어의 대체 수단 제공
- 자막, 수화, 원고 등의 대체수단을 제공해야 한다.
운용의 용이성
1. 키보드 접근성
- 모든 기능은 키보드 등의 보조 인터페이스로 이용 가능해야 한다.
2. 충분한 시간
- 시간 제한이 있는 콘텐츠를 포함하면 안되고, 포함할 경우 충분한 시간, 제어를 제공해야 한다.
3. 광과민성 발작 방지
- 발작을 불러일으킬 수 있는 콘텐츠는 포함시키지 않아야 한다.
4. 내비게이션
5. 다양한 입력 방식
- 멀티 포인터 기능은 싱글 포인터로도 가능해야 한다.
이해성
견고성
1. 마크업의 논리적 구현
🔥 접근성 코멘트
- 컨텍스트에 알맞은 접근성 지침 방법을 적용할 것
- 접근성의 level A(최소),AA(적절),AAA(최적) 의 성공 기준은 중요하다.
- 성공 기준에는 예외 사항이 있다.
- 제작 방법이 아닌 사용자의 관점에서 해결하려는 고민으로 접근해야 한다.
🔥 발표 리뷰
- 타겟층을 설정하고 주어진 제한에 대한 영리한 선택이 필요하다.
- 발표할 때의 보여지는 부분도 고려해야 한다. ( 적절한 시선처리 등 )
- 발표 내용의 스토리 텔링이 있어야 듣는 사람이 지루하지 않다.
- 자신이 이해하고 있다는 것에 대한 재대로 된 전달이 필요하다. ( 대본 읽기 x )
- 적절한 애니메이션을 통해 청중의 집중을 일으킬 수 있다.
