.blind

'.blind'는 웹 접근성(웹 접근성)을 고려하여 웹 페이지에서 사용되는 CSS 클래스 이름 중 하나입니다. 이 클래스 이름은 주로 시각 장애인을 위해 웹 페이지를 개발할 때 사용되며, 화면에 텍스트를 표시하지 않으면서 화면 낭독기(Screen Reader)가 이를 인식할 수 있도록 하는데 활용됩니다.

시각 장애인은 웹 페이지의 내용을 화면 낭독기를 통해 듣거나 접근합니다. 그러나 때로는 시각적으로 숨겨진 텍스트가 화면 낭독기에 읽히기를 원하지 않을 수 있습니다. 이때 .blind 클래스 또는 비슷한 클래스를 사용하여 텍스트를 화면에 표시하지 않으면서 접근성을 유지할 수 있습니다.

.blind {
    position: absolute;
    /* 요소의 위치를 절대 위치로 설정합니다. */
    width: 1px;
    /* 요소의 가로 너비를 1px로 설정합니다. */
    height: 1px;
    /* 요소의 세로 높이를 1px로 설정합니다. */
    overflow: hidden;
    /* 내용이 요소의 크기를 벗어나면 숨깁니다. */
    clip: rect(0, 0, 0, 0);
    /* 요소의 내용을 화면에서 완전히 숨깁니다. */
    margin: -1;
    /* 요소의 마진을 -1로 설정하여, 요소 자체를 화면에서 숨깁니다. */
}

• 'position: absolute;': 요소의 위치를 절대 위치로 설정합니다. 이렇게 하면 요소가 다른 컨테이너에 상대적으로 위치하는 것이 아니라 뷰포트나 부모 요소에 대해 위치가 결정됩니다.

• 'width: 1px;' 및 'height: 1px;:' 요소의 가로 너비와 세로 높이를 각각 1px로 설정하여 매우 작은 영역으로 만듭니다. 이로써 시각적으로 거의 보이지 않게 만들어집니다.

• 'overflow: hidden;': 요소의 내용이 요소의 크기를 벗어나면 숨깁니다. 즉, 요소의 가로 너비와 세로 높이가 1px로 매우 작기 때문에 내용이 잘립니다.

• 'clip: rect(0, 0, 0, 0);': 'clip' 속성을 사용하여 요소의 내용을 화면에서 완전히 숨깁니다. rect() 함수는 요소의 네 가장자리를 지정하며, 여기서는 모두 0으로 설정하여 내용이 화면에 나타나지 않도록 합니다.

• 'margin: -1;': 요소의 마진을 -1로 설정하여 요소 자체를 화면에서 숨깁니다. 마진이 음수로 설정되면 요소가 뷰포트 밖으로 이동하여 화면에 보이지 않게 됩니다.

추가

• white-space: nowrap;는 CSS 속성 중 하나로, 텍스트 레이아웃과 관련된 속성입니다. 이 속성은 텍스트가 자동 줄 바꿈을 하지 않고 한 줄에 계속해서 표시되도록 지정합니다.
  기본적으로 HTML에서 텍스트는 필요한 경우 자동으로 줄 바꿈됩니다. 즉, 텍스트가 부모 요소의 너비를 벗어나면 자동으로 다음 줄로 넘어갑니다. 그러나 white-space: nowrap;를 사용하면 이 동작을 비활성화하고, 텍스트가 줄 바꿈 없이 한 줄에 계속 표시되도록 만듭니다.

• padding: 0;은 모든 방향(상, 하, 좌, 우)의 패딩 값을 0으로 설정합니다. 즉, 요소의 상단, 하단, 좌측, 우측 모든 패딩을 없애고 내용이 테두리에 가깝게 배치됩니다.

이러한 스타일을 적용하면 시각적으로는 요소가 거의 보이지 않지만, 접근성 기능을 사용하는 사용자(예: 화면 낭독기 사용자)는 이 요소의 내용에 접근할 수 있습니다. 이것은 웹 페이지를 보다 접근성 있게 만드는 데 도움이 됩니다.