CSS display

CSS display에 대해 알아보자.

CSS display란?

display 속성은 CSS의 레이아웃을 결정하는 속성이다.
HTML의 요소들을 어떻게 배치할 지 결정할 수 있다.

block

요소의 전후에 줄바꿈이 된다.
가능한 전체 너비를 차지하며, box model의 스타일을 적용할 수 있다.

inline

요소의 전후에 줄바꿈 하지 않게 된다.
일반적으로 같은 inline 요소끼리는 한 줄에 나타난다.
width, height 속성과 상하 margin 속성은 사용할 수 없다.

inline-block

inline과 block의 특징을 함께 가진다.
inline과 같이 한 줄로 나타나지만, block처럼 box model의 스타일을 적용할 수 있다.

flex

내부 자식 요소들을 부모 요소 안에서 단방향으로 배치한다.
가로 혹은 세로 방향으로 요소를 나열하고자 할 때 사용한다.

grid

내부 자식 요소들을 부모 요소 안에서 x, y축을 이용하여 바둑판 식으로 배치한다.
보다 복잡한 구조를 작업할 때 사용한다.

flex와 grid 참고 사이트

flex와 grid
mdn flex와 grid
Flex/Grid

none

화면상에서 보이지 않도록 하며, 공간을 차지하지 않는다.
스크린 리더도 접근할 수 없다.

웹 접근성을 고려한 숨김처리

웹 사이트를 작업할 때는 스크린 리더와 같은 보조 도구를 사용하여 웹 페이지를 탐색하는 경우를 대비해야 한다.
시각적으로 문제가 없는 사람은 눈으로 화면을 보며 구분할 수 있지만, 그렇지 않은 사람들은 사이트 탐색을 위해 텍스트에 의존하기 때문에 더 자세한 정보가 필요하다.

콘텐츠 숨기기

스크린리더로 접근하는 사람들을 위한 내용을 숨기는 방법에 대해 알아보도록 하자.

display:none; or visibility:hidden;

display:none; 또는 visibility:hidden;은 일반 사용자 뿐 아니라 스크린리더에도 무시 된다.
모달이나, 화면 크기에 따라 UI가 바뀌는 등의 경우에 사용한다.

• display:none;
  화면에서 보이지 않으며 공간역시 차지하지 않는다.
• visibility:hidden;
  화면에서는 보이지 않으나 공간을 차지한다.

text-indent: -9999px;

콘텐츠를 왼쪽으로 밀어내는 방법으로, 스크린리더가 해당 텍스트를 읽을 수 있다.

링크, 양식 컨트롤 또는 기타 포커스가 가능한 요소에도 이 스타일을 적용할 수 있지만, 포커스를 받으나 페이지에는 표시되지 않아 사용자에게 혼란을 줄 수 있다.

콘텐츠를 화면 밖으로 보내기

요소의 크기를 작게 줄여 보이지 않도록 하고 position속성을 이용하여 화면 밖으로 내보내는 방법이다.

.sr-only {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

CSS 클립방법

이 역시 요소의 크기를 작게 만들어 화면 밖으로 내보내는 방법이다.

.a11y-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

clip은 최신 속성인 clip-path로 대체되었다.
clip은 권장되지 않으나 구 버전의 브라우저 대응을 위해서
clip-path와 함께 기입한다.

IR기법(Image Replacement)
로고, 아이콘 버튼 등에 적절한 대체 텍스트를 제공할 때 유용하다.

<button class="icon-button">
  <svg>...</svg>
  <span class="a11y-hidden">메뉴 열기</span>
</button>

로고에 대한 설명을 텍스트로 작성 후 a11y-hidden을 이용하여 화면에는 보이지 않도록 한다.