# 유저 인터랙션 속성

## hidden 속성 

* 모든 HTML 요소들은 hidden 속성을 가질 수 있다. 
* 요소에 hidden이 설정되면 요소가 아직 페이지의 현재 상태와 직접적으로 관련이 없거나 페이지의 다른 부분에서 내용을 재사용하도록 선언하는 데 사용된다. 
* 브라우저는 hidden 속성이 설정된 요소를 화면에 렌더링 하지 않는다.

### 예시 

```markup
<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>
```

{% hint style="info" %}
hidden 속성과 display:none의 차이점

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

[hidden 속성과 display:none의 차이점(답변 확인) ](https://hashcode.co.kr/questions/6223/%EC%A0%91%EA%B7%BC%EC%84%B1%EC%97%90-%EA%B4%80%ED%95%B4-%EC%A7%88%EB%AC%B8-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4-hidden-displaynone)
{% endhint %}

## tabindex 속성&#x20;

* 요소를 키보드로 탐색할 수 있도록 설정하거나, 제외 또는 순서대로 탐색할 수 있도록 설정할 수 있다.
* **"탭(Tab) 이동"**&#xC774;란? 순차적 포커스 탐색을 사용하여 포커스 가능(Focusable)한 요소 사이를 이동하는 것을 의미한다.
* 기본적으로 포커스 가능한 요소들

  * 폼 컨트롤 요소들 : input, button, textarea, select 등
  * href 속성을 가진 요소들 : a, area
  * controls 속성을 가진 요소들 : video, audio

### tabindex = "양수"

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

{% hint style="info" %}
논리적 포커스 흐름이란?&#x20;

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

-1, 0 으로 설정하면 논리적 포커스 흐름대로 포커스 순서가 정해 진다.&#x20;
{% endhint %}

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

### tabindex = "-1"

* 포커스가 가능한 요소에 포커스가 되지 않도록 설정한다. (JavaScript 프로그래밍으로 포커스 처리 가능)&#x20;
* 컴포넌트의 일부 요소를 일시적으로 포커스 순서에서 제외한 후, 목표에 따라 포커스를 다시 활성화 처리할 수 있다.&#x20;

```markup
// <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으로 설정하면 포커스를 가지지 않는 요소이지만, 포커스를 적용할 수 있게 된다.&#x20;
* 컴포넌트 제작 시, 비 포커스 요소에 포커스를 적용해야 할 경우 유용하게 사용된다.

```markup
<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 + 단축키
```

### 예시&#x20;

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

## contenteditable 속성

* contenteditable 속성이 설정된 요소는 사용자가 직접 편집할 수 있도록 만들어 준다.
  * 값이 true 또는 빈 문자열("")일 경우 편집 허용.
  * 값이 false 일 경우 편집을 허용하지 않음.
* contenteditable 속성이 적용되면 tab focus가 가능해진다.&#x20;

### 예시&#x20;

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

## draggable 속성

* 모든 HTML 요소는 draggable 속성을 가질 수 있다.
  * 값이 true 일 경우 드래그(Drag) 가능.
  * 값이 false 또는 빈 문자열("")일 경우 드래그 불가능.
* 마우스에 의존하기 때문에 마우스를 사용하지 못하는 사용자에게 불편하다.
  * 그렇기 때문에 마우스를 사용하지 못하는 사용자도 똑같은 기능을 사용할 수 있도록 설정해야 한다.&#x20;
  * 예를들어, 이미지를 드래그해서 컨테이너에 옮기는 기능을 사용한다고 했을 때, 마우스를 사용하지 못하는 사용자를 위해 해당 이미지에 포커스가 됐을 때, 오른쪽 키를 누르면 이미지가 이동이 될 수 있도록 한다.&#x20;

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRKTpNue0h-BRpKruT3%2F-MRKWmzJBJwq5_Q8ccSP%2Fimage.png?alt=media\&token=371a9830-88c6-45cb-ad57-f21c0fb992ad)

### 예시&#x20;

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

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

* 프론트엔드 개발자는 모든 사용자를 고려하는 설계자가 되야 한다.&#x20;
* 구조를 탄탄하고 의미적으로 구성할 수 있어야 한다. → 시멘틱 마크업
* 디자이너가 만든 비주얼을 화면에 구성할 수 있는 표현 능력이 가능해야 한다. → CSS 능력
* 사회적 약자 계층도 이용할 수 있도록 서비스를 만들어야 한다. → 접근성&#x20;