[CSS] 디스플레이(Display) 속성의 이해와 요소 숨김 기법

이번 포스팅에서는 [CSS 레이아웃 기초] 파트의 세부 주제인 디스플레이 속성과 접근성에 대하여 상세히 알아보겠습니다.

1. Inline-block의 미세한 공백 제거 노하우

display: inline-block을 나열할 때 HTML 소스코드의 줄바꿈(엔터)이 화면상에 약 4px의 띄어쓰기 공백으로 나타나는 환장할 노릇이 발생합니다. 해결책은 다음과 같습니다.

• 부모 요소에 font-size: 0;을 주고 자식에서 원래 폰트 크기로 복구하기
• 아예 HTML 코드에서 태그 사이의 줄바꿈을 없애기 <li>A</li><li>B</li>
• 가장 현대적인 방법: inline-block 대신 부모에 display: flex를 사용하여 공백 문제 원천 차단하기!

2. 화면에서 요소 숨기기 완벽 가이드 (접근성 고려)

단순히 안 보이게 한다고 다 같은 숨김이 아닙니다. 스크린 리더(시각장애인용)를 고려해야 합니다.

/* 1. 아예 존재를 없앰 (스크린 리더도 읽지 않음, 레이아웃 공간 차지 X) */
.hide-all { display: none; }

/* 2. 공간은 차지하되 눈에만 안 보임 (스크린 리더 읽음, 클릭 불가능) */
.hide-visual { visibility: hidden; }

/* 3. 투명하게 만들기 (스크린 리더 읽음, 클릭 가능, 레이아웃 유지) */
.transparent { opacity: 0; }

/* 4. A11y(접근성) 숨김: 화면에선 숨기되 스크린 리더는 읽도록 하는 실무 패턴 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

---

지금까지 디스플레이 속성의 맹점과 요소 숨김의 접근성 기법에 대해 살펴보았습니다. 단순한 구현을 넘어 스크린 리더까지 배려하는 코딩을 실천해 보세요.