role
웹 접근성을 위해 태그에 의미 정보를 전달하고 element의 확 장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 하는 속성이다.
aira-label
태그가 가지는 이름표 같은 역할을 한다.
role이랑 다르게 정해져 있는 의미가 아닌 개발자가 사용자한테 전달하는 내용이나 상황을 직접적으로 전달할수있다.
예를 들어 div로 만든 추가할수있는 버튼이 있다고 치면
<div> + </div>우리는 아이콘의 생김새로 추측이 가능하지만 스크린 리더 사용자는 아이콘 생김새를 알수없어서 그냥 컨텐츠라고 밖에 알지 못한다. 이것을 위해 aria-label이 필요하다.
<div aria-label="더하기버튼"> + </div>이렇게 추가하면 더하기버튼이라는 것을 알려줄수있다.
aria-hidden
스크린 리더와 같은 보조 기술을 사용하는 사용자를 대상으로 컨텐츠 탐색을 제한할때 사용하는 속성으로
true로 설정하면 탐색을 제한한다.
ellipsis
자수가 일정이상 넘어갔을때 '...'으로 마무리하기 위한 코드
ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }text-ovetflow : 텍스트가 컨텐츠를 넘어갔을 경우 어떻게 할 것인지 정하는 css속성으로 ellipsis는 넘어가면 넘어간 문장은 '...'으로 처리한다
white-space : 자동 줄바꿈을 바꾸는 css속성으로
기본은 normal 자동 줄바꿈을 취소하는 경우는 nowrap을 사용한다.
multi-ellipsis
자수가 두줄이상 넘어갔을때 '...'으로 마무리하기 위한 코드
multi-ellipsis($font-size, $line-height, $lines) { font-size: $font-size; line-height: $line-height; max-height: $line-height * $lines; overflow: hidden; display: -webkit-box; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; /* autoprefixer: off */ }letter-spacing
글자 사이의 간격을 지정하는 css속성이다.
position:sticky
position:fixed와 같지만 다르다. sticky는 평소에는 일반 컨텐츠처럼 위치에 있다가. 해당 페이지의 스크롤 상단이 컨텐츠 상단이랑 겹치면 position:fixed와 같이 스크롤 상단에 붙는다.
pointer-events:none
해당 컨텐츠의 이벤트 속성을 제거할떄 사용하는 css속성
flex:1
화면 비율에 따라 flex컨텐츠가 유연하게 늘어나거나 줄어들게 만드는 속성
flex-shrink
해당 컨텐츠가 줄어들떄 flex-item들이 기본 크기 보다 줄어들 수 잇는지 결정하는 속성이다.
