Foundation-가시성 클래스

기술

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

  • 사용자는 브라우징 환경에 따라 요소를 사용할 수 있습니다.

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

Sr. 아니. 가시성 등급 및 설명
1 화면 크기로 표시

.show 클래스 를 사용하여 장치 기반의 요소를 보여줍니다 .

2 화면 크기로 숨기기

.hide 클래스 를 사용하여 장치 기반 요소를 숨 깁니다 .

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

방향 감지

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

접근성

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

Sr. 아니. 접근성 등급 및 설명
1 스크린 리더 용으로 표시

그것은 사용 쇼를 위해 SR 을 읽는 화면 판독기를 방지하면서 숨길 수있는 내용을 클래스를.

2 스크린 리더 용 숨기기

그것은 사용 아리아 - 숨겨진 텍스트를 볼 수 있지만 화면 판독기가 읽을 수 없습니다 속성을.

스킵 링크 생성

스크린 리더는 사이트의 콘텐츠를 탐색 할 수있는 건너 뛰기 링크를 만듭니다.

Sass 참조

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

Sr. 아니. Mixin 및 설명 매개 변수 유형
1

show-for

기본적으로 요소를 숨기고 특정 화면 크기 이상으로 표시합니다.

$ size 예어
2

show-for-only

기본적으로 요소를 숨기고 중단 점 내에 표시합니다.

$ size 예어

hide-for

기본적으로 요소를 표시하고 특정 화면 크기 위에 숨 깁니다.

$ size 예어
4

hide-for-only

기본적으로 요소를 표시하고 특정 화면 크기 위에 숨 깁니다.

$ size 예어

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