Foundation-가시성 클래스

기술

Foundation은 가시성 클래스를 사용하여 장치 방향 (세로 및 가로) 또는 화면 크기 (소형, 중형, 대형 또는 초대형 화면)에 따라 요소를 표시하거나 숨 깁니다.
사용자는 브라우징 환경에 따라 요소를 사용할 수 있습니다.

다음 표는 탐색 환경을 기반으로 요소를 제어하는 Foundation의 가시성 클래스를 나열합니다.

Sr. 아니.	가시성 등급 및 설명
1	화면 크기로 표시 .show 클래스 를 사용하여 장치 기반의 요소를 보여줍니다 .
2	화면 크기로 숨기기 .hide 클래스 를 사용하여 장치 기반 요소를 숨 깁니다 .

Foundation은 .hide 및 .invisible 클래스 를 사용하여 콘텐츠를 숨길 수 있고 페이지에 아무것도 표시하지 않는 일부 클래스를 지원합니다 .

장치는 가로 및 세로 기능 을 사용하여 다른 방향을 결정할 수 있습니다 . 휴대폰과 같은 핸드 헬드 장치는 회전 할 때 다른 방향을 지정합니다. 데스크톱의 경우 방향은 항상 가로입니다.

다음 표는 화면 판독기가 읽을 수 있도록하는 동안 콘텐츠를 숨기는 화면 판독기에 대한 접근성 기술을 나열합니다.

Sr. 아니.	접근성 등급 및 설명
1	스크린 리더 용으로 표시 그것은 사용 쇼를 위해 SR 을 읽는 화면 판독기를 방지하면서 숨길 수있는 내용을 클래스를.
2	스크린 리더 용 숨기기 그것은 사용 아리아 - 숨겨진 텍스트를 볼 수 있지만 화면 판독기가 읽을 수 없습니다 속성을.
삼	스킵 링크 생성 스크린 리더는 사이트의 콘텐츠를 탐색 할 수있는 건너 뛰기 링크를 만듭니다.

Foundation은 다음 믹스 인을 사용하여 CSS 출력을 표시하므로 구성 요소에 대한 자체 클래스 구조를 구축 할 수 있습니다.

Sr. 아니.	Mixin 및 설명	매개 변수	유형
1	show-for 기본적으로 요소를 숨기고 특정 화면 크기 이상으로 표시합니다.	$ size	예어
2	show-for-only 기본적으로 요소를 숨기고 중단 점 내에 표시합니다.	$ size	예어
삼	hide-for 기본적으로 요소를 표시하고 특정 화면 크기 위에 숨 깁니다.	$ size	예어
4	hide-for-only 기본적으로 요소를 표시하고 특정 화면 크기 위에 숨 깁니다.	$ size	예어

이러한 모든 믹스 인의 기본값은 none 으로 설정됩니다 .