찾아봐야할 것
체킹 내용
- 아코디언 UI
<p>
<div role="list">
<div role="listitem" aria-level="1">과일</div>
<div role="list">
<div role="listitem" aria-level= "2">애플</div>
<div role="listitem" aria-level="2">오렌지</div>
<div role="listitem" aria-level="2">바나나</div>
<div role="listitem" aria-level="2">포도</div>
</div>
<div role="listitem" aria-level="1">음료</div>
<div role="list" >
<div role="listitem" aria-level="2">콜라</div>
<div role="listitem" aria-level="2">펩시</div>
<div role="listitem" aria- level="2">과일</div>
</div>
</div>
</p>aria-levelaria-level(속성)은 문서 내 요소의 계층 구조를 정의함aria-level은 다른 모든 aria 역할과 마찬가지로 기본 의미가 요소의 구조적 수준을 제공할 수 없거나 보조 기술을 포함하는 사용자 에이전트가 요소의 수준을 식별할 수 없는 경우에만 사용됨aria-level은 표제구조, 목록 내 목록 항목의 수준(level), 중첩된 탭 목록, 트리구조 내의 트리 항목, 중첩된 그리드 등을 정의하는데 사용됨aria-level속성은 1보다 크거나같은 정수 값을 가짐- 레벨의 증가 === 레벨의 깊이
- 같은 섹션에서 여러 요소가 같은 수준을 가질 수 있음
- 위젯이나 컴포넌트가 부모-자식 관계를 가질 때 aria-level 속성은 자식 요소에 주어져야 함
- 전체적인 흐름에 맞는
h1~6태그를 사용해라 (article 주의)
- figure 태그
- 독립적인 콘텐츠를 표현함
<figcaption>요소를 사용해 설명을 붙일 수 있음- 피규어, 설명, 콘텐츠는 하나의 단위로 참조됨
- 제일 처음
<figcaption>을 설명으로 사용함
- anchor에 aria-label로 앞 헤딩을 줄 수도 있고 aria-labelledby로 당겨올수도 있고
- CSS 모듈 패턴
- flex가 지정된 width, heigth값을 넘어가지 못하는 것을 잘 활용해보자
-
1px보다 얇은 선을 만들기 위한 트릭
- 스케일
- 불투명도
- 선형 그레디언트
- 박스 그림자
- 보더 이미지
-
픽셀 밀도
- 1인치 영역에 물리적으로 표현 가능한 픽셀수
- CSS Reset과 CSS Normalize
- 이미지 스프라이트 기법(성능이슈)
- 여러개의 이미지를 하나의 이미지로 합쳐서 관리함
- 이미지 관리가 용이하고 웹페이지의 로딩 시간 및 용량을 줄일 수 있음
- 웹 표준 준수를 위해 가상으로 대체 문자를 만들어야 함
- IR(Image Replacement) 기법사용
- text-indent 트릭 (-9999px) 등등
- z-index 트릭
- padding 트릭
- IR(Image Replacement) 기법사용
- text-indent 트릭 시 heigth age?
- overflow를 쓰면 focus가 일부 가려질 수 있기에 absolute트릭이 더 나을수도 있다.
- transition 필수 속성
- transition-property
- transition-duration
- transition을 쓸때는 limit가 있어야함
- auto속성은 안됨(더 있긴함)
- outline-offset
- 포커스 아웃라인 축소
-
button 크로스 브라우징 이슈
-
브라우저 엔진마다 해석차이(브라우저마다 안전하게 하려고)
-
버튼은 폼요소(appearance: none을 줬어야됨)
참조사이트
개발자 지망생