block 요소를 일렬로 정렬할 때 display:table 으로 하는 방법은 어떤가요??

조회수 362회

얼마전에 ul 내부의 li 요소들을 일렬로 정렬하기 위한 트릭을 배웠습니다.

그 중, ul에 display:table; 이라고 하고 li에 table-cell 을 줘서 하는 방법을 알겠는데요,

이것도 테이블화가 되는건가요?? 스크린리더기가 표로 인식하는건가요??

야무선생님께서 테이블로 레이아웃을 구성하는것은 이제 해서는 안된다고 하셨는데, 이것이 그에 해당되는지 궁금합니다.

2 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    안녕하세요 은섭님 질문에 답변을 드립니다.

    논리 곱/합 연산자 사용 예시

    아래 함수를 보면 사용자로부터 매개변수 separator를 전달 받거나, 받지 않을 수 있습니다. 사용자가 전달한 값 또는 기본 값을 사용할 경우, if 조건문을 사용할 수도 있겠지만, 논리합(||) 연산자를 사용해 조건 처리할 수 있습니다.

    function exampleFn(separator) {
    
      // [논리곱,합 조건 연산]
      //  사용자가 전달한 separator 값이 있으면 사용자 전달 값을 사용
      //  사용자가 전달한 separator 값이 없으면 '-'을 사용
      separator = separator || '-';
    
      // ...
    
    }
    

    위와 동일하게 작동하는 3항 연산자 식을 작성한다면 다음과 같이 작성할 수 있습니다. 비교해 보면 이런 경우 논리합 연산자를 사용하는 것이 보다 코드가 간결합니다.

    separator = separator ? separator : '-';
    

    3항 연산자 식 사용 예시

    위의 경우와 다르게 반복 문 내부에서 조건(i < l - 1)의 변화에 따라 값을 처리하는 코드가 있다고 했을 때는 논리합 연산자 보다 3항 조건 식 사용이 보다 효율적 입니다.

    
    function exampleFn(separator) {
    
      var result = '';
      var i = 1;
      var l = arguments.length;
    
      for ( ; i < l; i++ ) {
    
        // [3항 연산자 식]
        // 조건 i < l - 1 에 따라 순환 처리 결과 값이 달라져야 한다면
        // 논리합 연산자 보다는 3항 연산자 식 사용이 보다 효과적 입니다.
        result += arguments[i] + ( i < l - 1 ? separator : '-' );
    
      }
    
      return result;
    
    }
    
  • 안녕하세요. 은섭님 ^ ㅡ ^

    말씀하신 display: table 속성 설정은 말 그대로 화면에 표처럼 표시하는 것이죠. 표의 의미를 가지진 않습니다. 그러므로 스크린리더에서 표로 인식하지 않습니다.

    강의에서 표(<table>) 요소를 사용해서 의미에 어긋나는 레이아웃을 구현하지 말라고 강조했지만, 표 처럼 화면에 표시하면 안된다고 하지는 않았습니다. 구조적으로 표인 요소를 사용해 레이아웃 하는 것은 문제지만 표현적으로 표처럼 표시하는 것은 문제가 되지 않습니다.

    쉽게 말해 HTML 구조화가 아닌, CSS 표현 방법은 괜찮습니다.

    문제가 된다면? 크로스 브라우징 체크가 되겠죠. 브라우저에서 깨짐 없이 호환이 가능한지 확인이 필요합니다.

    확인 결과 display: table-* 표시 방법은 IE 8+ 에서 사용할 수 있습니다.

    IE 6,7과 같은 오래된 브라우저를 고려해야 하는 특별한 경우가 아니라면 사용하는데 큰 문제는 없을 것으로 보입니다. ^ ㅡ ^


    참고

    Use CSS display:table for Layout


답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.