전문가 상담

HOME > 지식마당 > 온라인 자문서비스 > 전문가 상담
display:table-cell 레이아웃에 배치
display:table-cell 레이아웃에 배치
작성일 2017-03-06 오후 1:32:57 작성자 김미선
첨부파일
  • 등록된 첨부파일이 없습니다.
[질문]

처음에 페이지의 레이아웃을 구성할때
상단에 header - 중간에 nav와 section이 존재하고 - 하단에 footer가 존재하는 레이아웃이라고 가정하는 경우
흔히 생기는 문제가 nav가 section 태그 만큼의 높이 값을 받지 못하고 짧아지는 경우입니다
이를 보안 하기 위해서
nav와 section을 div로 감싸서
div에는 display:table을 주고 nav와 section에 display:table-cell을 주는 것은 괜찮나요?

table 구성을 레이아웃으로 사용하는 것은 접근성 위배인데
display: table-cell의 경우에는 보여지는 부분만 다른거기때문에 가능한건가요?
답변 부탁드립니다.!
꼭 답변해주세요!




[답변]
웹접근성에서 테이블 사용을 지양하고 있는 이유는
스크린리더를 사용해서 웹페이지를 탐색하는 사용자들이 선형화로 화면의 흐름을 논리적으로 이해하기 어렵기 때문입니다.

따라서 테이블이 아닌 위와 같이 div css의 속성을 이용해서 해당 엘리먼트에 속성을 주고,
선형화로 논리적 흐름이 유지되도록 화면을 제작하시면 아무런 문제가 되지 않습니다.
또한 height 100% 가변형 레이아웃에 대한 부분을 검색해보시면
질문자님께서 고민하고 계시는 부분에 대한 다른 방법도 확인 하실 수 있으니 참고하시면 될 것 같습니다.

전문가상담 목록
번호 분류 제목 작성자 작성일
10235 일반 display:table-cell 레이아웃에 배치 전수영 2017-02-27
10238 일반  전문가 답변display:table-cell 레이아웃에 배치 김미선 2017-03-06

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)

위로가기