유저 인터랙션 속성

hidden 속성

• 모든 HTML 요소들은 hidden 속성을 가질 수 있다.

• 요소에 hidden이 설정되면 요소가 아직 페이지의 현재 상태와 직접적으로 관련이 없거나 페이지의 다른 부분에서 내용을 재사용하도록 선언하는 데 사용된다.

• 브라우저는 hidden 속성이 설정된 요소를 화면에 렌더링 하지 않는다.

예시

<div class="container" hidden="false"> <!-- 보이 -->
<div class="container" hidden>         <!-- 숨김 -->
  <img src="images/fashion-model-pose.png" alt="패션 모델" />
  <div class="dropzone">
    <p>Drop Zone</p>
  </div>
</div>

hidden 속성과 display:none의 차이점

두 속성의 공통점은 브라우저에 렌더링 되지 않는다는 것이다.

hidden 속성과 display:none의 차이점(답변 확인)

tabindex 속성

• 요소를 키보드로 탐색할 수 있도록 설정하거나, 제외 또는 순서대로 탐색할 수 있도록 설정할 수 있다.

• "탭(Tab) 이동"이란? 순차적 포커스 탐색을 사용하여 포커스 가능(Focusable)한 요소 사이를 이동하는 것을 의미한다.

• 기본적으로 포커스 가능한 요소들

  • 폼 컨트롤 요소들 : input, button, textarea, select 등

  • href 속성을 가진 요소들 : a, area

  • controls 속성을 가진 요소들 : video, audio

tabindex = "양수"

• 탭 포커스 순서를 설정한다. (논리적 포커스 흐름에 방해가 되기에 사용을 권장하지 않음)

논리적 포커스 흐름이란?

마크업의 순서대로 포커스가 가는 것을 논리적 포커스 흐름이라고 한다. 하지만 임의로 포커스의 순서를 정하게 되면 해당 흐름이 무너지게 된다.

-1, 0 으로 설정하면 논리적 포커스 흐름대로 포커스 순서가 정해 진다.

// button요소는 기본적으로 Tab이 발생 됨
<button type="button" class="button is-play" tabindex="2">재생</button>

tabindex = "-1"

• 포커스가 가능한 요소에 포커스가 되지 않도록 설정한다. (JavaScript 프로그래밍으로 포커스 처리 가능)

• 컴포넌트의 일부 요소를 일시적으로 포커스 순서에서 제외한 후, 목표에 따라 포커스를 다시 활성화 처리할 수 있다.

// <a>요소는 기본적으로 포커스를 가지고 있다.
<a>
  <ol class="TOC">
    <li><a href="#pinch">위기</a></li>
    <li><a href="#overcome" tabindex="-1">극복</a></li>
  </ol>
</a>

tabindex = "-0"

• tabindex를 0으로 설정하면 포커스를 가지지 않는 요소이지만, 포커스를 적용할 수 있게 된다.

• 컴포넌트 제작 시, 비 포커스 요소에 포커스를 적용해야 할 경우 유용하게 사용된다.

<div tabindex="0"></div>

accesskey 속성

• 모든 HTML 요소는 accesskey 속성을 가질 수있다. 속성 값은 키보드 단축키로 설정된다.

• 하지만 accesskey 속성의 단축키는 브라우저와 운영체제 플랫폼에 의존하고 있어 운영 체제마다 사용자 경험이 달라진다. 쉽게 말해 Windows 사용자와 Mac OSX 사용자가 사용하는 단축키는 달라진다. (iPhone과 Android 사용자 경험이 다른 것처럼)

브라우저 × 운영체제 플랫폼

Windows
  Chrome  : Alt + 단축키
  IE      : Alt + 단축키
  Safari  : Alt + 단축키
  Opera   : Alt + 단축키
  Firefox : Alt + Shift + 단축키
Mac OSX
  Chrome  : Control + Alt + 단축키
  Safari  : Control + Alt + 단축키
  Opera   : Control + Alt + 단축키
  Firefox : Control + 단축키
Linux
  Chrome  : Alt + 단축키
  Opera   : Alt + 단축키
  Firefox : Alt + Shift + 단축키

예시

<button
  type="button"
  class="button is-collect"
  accesskey="C"
  onclick="collect()"
>
  수집
</button>

contenteditable 속성

• contenteditable 속성이 설정된 요소는 사용자가 직접 편집할 수 있도록 만들어 준다.

  • 값이 true 또는 빈 문자열("")일 경우 편집 허용.

  • 값이 false 일 경우 편집을 허용하지 않음.

• contenteditable 속성이 적용되면 tab focus가 가능해진다.

예시

<p contenteditable="true">수정이 가능합니다.</p>
<p contenteditable="false">수정이 불가능합니다.</p>

draggable 속성

• 모든 HTML 요소는 draggable 속성을 가질 수 있다.

  • 값이 true 일 경우 드래그(Drag) 가능.

  • 값이 false 또는 빈 문자열("")일 경우 드래그 불가능.

• 마우스에 의존하기 때문에 마우스를 사용하지 못하는 사용자에게 불편하다.

  • 그렇기 때문에 마우스를 사용하지 못하는 사용자도 똑같은 기능을 사용할 수 있도록 설정해야 한다.

  • 예를들어, 이미지를 드래그해서 컨테이너에 옮기는 기능을 사용한다고 했을 때, 마우스를 사용하지 못하는 사용자를 위해 해당 이미지에 포커스가 됐을 때, 오른쪽 키를 누르면 이미지가 이동이 될 수 있도록 한다.

예시

<p draggable="true">...</p>
<p draggable>...</p>

좋은 프론트엔드 개발자의 자격 요건

• 프론트엔드 개발자는 모든 사용자를 고려하는 설계자가 되야 한다.

• 구조를 탄탄하고 의미적으로 구성할 수 있어야 한다. → 시멘틱 마크업

• 디자이너가 만든 비주얼을 화면에 구성할 수 있는 표현 능력이 가능해야 한다. → CSS 능력

• 사회적 약자 계층도 이용할 수 있도록 서비스를 만들어야 한다. → 접근성