✏️ 프로젝트 진행 중 새로 배운 것

✅ Role

alt 와 유사한 속성을 가졌습니다.
alt 는 우리가 볼 수 있는 상황에 오류로 인해 이미지를 보지 못하였을 때 텍스트로 알려주는 기능이라면
role은 시작 장애인처럼 사진을 볼 수 없는 사람이 인식할 수 있도록 도와주는 역할을 합니다.

✏️ 사용법

문법	설명
role = "alert"	중요한 내용 및 정보가 있는 곳 또는 정보가 변경된 곳
role = "article"	웹페이지의 내용이 들어간 곳
role = "banner"	배너가 있는 곳
role = "contentinfo"	안내가 있는 부분
role = "heading"	페이지 머리말 부분
role = "img"	이미지가 있는 곳
role = "navigation"	메인,서브 메뉴가 있는 곳
role = "menuitem"	메뉴 옵션이 있는 곳
role = "exmple"/"form"	폼 양식이 있는 곳

✅ Overflow

요소의 텍스트 길이가 길어 블록 맥락에 맞출 수 없을 때 사용하는 속성값 입니다.

✏️ 속성값

속성값	설명
visible	(디폴트)넘칠 경우 컨텐츠가 상자 밖으로 보여집니다.
hidden	넘치는 부분은 잘려서 보여지지 않습니다.
scroll	스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.)
auto	스크롤바를 추가할지 자동으로 결정하게 됩니다.

✅ White-space

스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리해야할지 정하는 속성입니다.

✏️ 속성값

속성값	스페이스와 탭	줄바꿈	자동 줄바꿈
normal	병합	병합	O
nowrap	병합	병합	X
pre	보존	보존	X
pre-wrap	보존	보존	O
pre-line	병합	보존	O

✅ Aria-hidden

일부 콘텐츠는 숨길 필요가 있습니다.
스크린 리더와 같은 보조 기술을 사용하는 사용자 대상으로 콘텐츠 탐색을 제한할 때 사용합니다.
💡 시각적으로 디자인만 주기 위해 사용된 요소에만 사용!

1️⃣ 문법

<button>
  <span class="fa" aria-hidden="true"></span>
</button>

2️⃣ 속성값

속성값	설명
true	탐색을 제한합니다.
false	탐색할 수 있습니다.

✅ letter-spacing

텍스트 사이 자간을 설정하는 속성입니다.

✏️ 속성값

속성값	설명
nomal	(디폴트) 문자에 공백이 들어가지 않습니다. 0px
길이값	px, em, % 등으로 지정이 가능하며 음수도 가능합니다.