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

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

아래 함수를 보면 사용자로부터 매개변수 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