Skip to content

Latest commit

 

History

History
185 lines (135 loc) · 7.94 KB

더블탭문제.md

File metadata and controls

185 lines (135 loc) · 7.94 KB
  1. 다음 중 HTML 태그와 의미가 맞지 않는 것은 무엇인가요?
    1. dd : Definition description
    2. a : Anchor
    3. ul : Unordered list
    4. p : Paragraphs
    5. div : Drive

    • 해설

      1. dd : Definition description, dd 요소는 정의 목록 요소(dl)에서 앞선 용어(dt)에 대한 설명, 정의, 또는 값을 제공한다.

        <dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

      e. div : Division

  1. 다음 중 높은 수준의 웹 접근성을 유지하기 위한 마크업 방법으로 옳은 것은 무엇인가요?
    1. 별 의미가 없는 이미지라면 alt 속성을 사용하지 않는다.
    2. div 나 span 같이 포커스를 받을 수 없는 요소를 포커스를 받게 만드려면 tabIndex 속성에 0 값을 넣어주어야 한다.
    3. tabIndex 속성을 0 으로 설정하면 문서 내에 있는 요소 중에서 가장 처음으로 포커스를 받을 수 있다.
    4. head 내 meta 태그에 들어가는 정보는 웹 접근성과 관련이 없다.
    5. 여러 개의 단락을 표현할 때는 여러 개의 p 태그를 사용하는 것보다 br 을 사용하여 줄바꿈 해주는 것이 의미적으로 맞는 표현이다.

    • 해설

      https://developer.mozilla.org/ko/docs/Web/HTML/Element/img

      https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex

      https://developer.mozilla.org/ko/docs/Web/HTML/Element/p

      https://developer.mozilla.org/ko/docs/Web/HTML/Element/br

      1. 기본적으로 이미지 요소에는 alt속성을 필수로 제공해야 함. 스크린 리더가 alt값을 읽어주기때문. alt속성을 아예 제공하지 않으면 스크린리더는 src에 있는 파일명을 읽음. (sdfjkl123.jpg이런걸 읽음)

        따라서 단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우는 대체 텍스트로 공백문자(alt=””)로 제공하여 아무것도 읽어주지 않도록 alt를 빈 값으로라도 제공해야함. (X)

        브라우저가 항상 이미지를 표시하는건 아닙니다. 예를 들어,

        • 비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)
        • 사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)
        • 유효하지 않은 이미지거나, 지원하지 않는 형식

        위와 같은 경우 브라우저가 이미지를 alt 특성의 텍스트로 대체할 수 있습니다. 그러므로 가능한 경우 alt 특성에 항상 유용한 값을 제공해야 합니다.

        alt 특성을 아예 지정하지 않은 경우 이미지가 콘텐츠의 중요 부분이나 텍스트로 표현할 수 없음을 의미합니다. 빈 문자열(alt="")을 사용한 경우, 비 시각적 브라우저가 렌더링을 하지 않아도 된다는 의미입니다. 시각적 브라우저도 alt 특성이 비어있을 경우 깨진 이미지 아이콘을 표시하지 않습니다.

      2. 포커스를 받을 수 없는 요소(비대화형 콘텐츠, non-interactive content)에 포커스를 받게 만드려면 tabIndex 속성에 0을 넣어주어야 함.(O)

      3. tabIndex 값이 같다면 문서 소스 코드의 순서를 따름. 참고로 0보다 큰 tabIndex는 접근성을 해치므로 사용하지 않는것을 권장함. (X)

      4. 관련많음!!! 웹 페이지 홍보의 수단으로 검색 키워드를 지정가능 (X)

        <head>
 <meta charset="utf-8">
 <title>검색 키워드 지정</title>
 <meta name="keywords" content="웹접근성,웹표준,HTML,웹콘텐츠 접근성 지침">
</head>

      5. p : 단락을 나누는 태그, br : 줄바꿈 하는 태그

        따라서 단락을 여러개 표현할 때는 p 태그 여러개 쓰는게 의미상 더 맞음 (X)

        문단 구분을 <br>로 하는건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 됩니다. 스크린 리더가 요소의 존재는 알려주겠지만, <br>에는 아무런 내용도 없기 때문입니다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있습니다.

  1. 아래 코드에서 콘솔 로그에 출력되는 this 는 무엇인가요?

    const foo = {
  bar: function () {
    console.log(this);
  },
  baz: function () {
    setTimeout(function () {
      console.log(this);
    }, 1000);
  },
};

foo.bar();// 1
foo.baz();// 2
const bar = foo.bar;
bar();// 3

  • 해설

    https://developer.mozilla.org/ko/docs/Web/API/setTimeout

    https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this#객체의_메서드로서

    foo.bar() : foo

    foo.baz() : window

    bar() : window

    this는 호출하는 방법에 따라 결정된다. 즉, 호출한놈 === this

    foo.bar() 에서는 foo가 bar를 호출했으므로 this는 foo를 가리키고

    bar()에서는 window에서 bar를 호출했으므로 this는 window를 가리킨다

    함수 선언식이 내부함수에서 선언 될 경우 this는 non-strict 모드에서는 window(또는 global) 객체를 가리키고 strict모드에서는 undefined를 기본 값으로 한다

    /* 바인딩 오류 */
function Person() {
this.age = 0; // this는 Person을 가리킴

setInterval(function growUp() {
this.age++; // this는 window를 가리킴
}, 1000);
}
    
/* this를 미리 명시 */
function Person() {
var that = this;
that.age = 0;

setInterval(function growUp() {
that.age++;
}, 1000);
}

/* arrow function 사용 */
function Person(){
this.age = 0;

setInterval(() => {
this.age++;
}, 1000);
}

var p = new Person();

/* bind() 사용 */
let user = {
firstName: "John"
};

function func() {
alert(this.firstName);
}

let funcUser = func.bind(user);
funcUser(); // John

  1. 아래 코드에서 마지막에 출력되는 것으로 올바른 것은 무엇인가요?

    const p1 = new Promise(function(resolve) {
  setTimeout(() => resolve('하나'), 500);
});
const p2 = new Promise(function(resolve) {
  setTimeout(() => resolve('둘'), 100);
});

Promise.race([p1, p2]).then(function(value) {
  console.log(value);
});