인터랙티브(Interactive) 요소들
<details>, <summary>, <dialog> 요소 사용 방법에 대해 알아보겠습니다.
이 Interactive 요소는 사용자와 상호 작용하는(대화 가능한) 요소를 말합니다.
details element
이 details 요소는 디스클로저 위젯(disclosure widget, 참고: https://goo.gl/uznvFY)으로 정보를 감추거나, 펼쳐서 보여줍니다.
모든 정보를 일시에 공개하지 않고 사용자의 요구에 맞춰 정보를 공개할 수 있기 때문에 화면의 복잡함을 줄이는 목적으로 사용할 수 있습니다.
아코디언(Accordion) 컴포넌트와 비슷하게 작동하며, 참고로 각주(footnote)에는 적합하지 않습니다.
아코디언(Accordion) 컴포넌트는 브라우저가 자체적으로 지원하고 있지 않기 때문에 자바스크립트를 이용하여 구현해야 했으나 HTML5 표준에서는 details 란 요소를 제공해 줌으로써 브라우저가 자체적으로 내장된 이와 같은 위젯 컴포넌트를 제공해 주고 있다.
summary element
summary 요소는 details 요소의 레이블/캡션(제목) 또는 서머리(요약) 등을 표시하고자 할 때 사용할 수 있습니다.
이 요소는 폼의 fieldset 요소의 제목을 legend 가 표시하는 것과 유사하다고 볼 수 있습니다.
사용 예시는 다음과 같습니다.
<section class="progress window">
<h1>"Really Achieving Your Childhood Dreams" 파일 복사</h1>
<details>
<summary>복사중... <progress max="375505392" value="97543282"></progress> 25%</summary>
<dl>
<dt>초당 전송 속도:</dt>
<dd>452KB/s</dd>
<dt>로컬 파일이름:</dt>
<dd>/home/rpausch/raycd.m4v</dd>
<dt>원격 파일이름:</dt>
<dd>/var/www/lectures/raycd.m4v</dd>
<dt>재생시간:</dt>
<dd>01:16:27</dd>
<dt>컬러 프로파일:</dt>
<dd>SD (6-1-6)</dd>
<dt>영상 크기(너비×높이):</dt>
<dd>640×480</dd>
</dl>
</details>
</section>
- open - 페이지 로딩 시, 위젯을 펼쳐 표시하도록 설정하고 open 이 없으면 기본적으로 감춰진 상태로 표시된다.
dialog element
다이얼로그(Dialog, 참고: https://goo.gl/pQ7gSX)는 사용자의 결정 또는 정보 입력을 요구하는 컴포넌트를 뜻합니다.
다른 용어로 '모달 윈도우' 또는 '대화상자'로도 불리기도 하고 국내에서는 레이어 팝업이라고 부르기도 합니다.
<div class="box">
<dialog open>
<section>
<h2>대화상자 타이틀</h2>
</section>
<p>대화상자 콘텐츠입니다.</p>
<button type="submit">confirm</button>
</dialog>
</div>
기본적으로 open 속성을 사용하지 않으면 브라우저에 표시되지 않기 때문에 화면에 표시하고자 할 때는 open 속성을 사용해야 합니다.
위에 알아본 요소는 HTML5 의 표준이지만 아직까지는 모든 브라우저가 지원하고 있지 않기 때문에 사용시에는 충분한 호환성 체크를 한 후 사용해야 합니다.
사용자 인터랙션(User Interaction) 속성들
사용자와 상호작용(Interaction) 할 수 있도록 만들어 주는 속성에 대해 살펴보도록 하겠습니다.
모든 HTML 요소들은 hidden 속성을 가질 수 있으며, 요소에 설정되면 요소가
아직 페이지의 현재 상태와 직접적으로 관련이 없거나 페이지의 다른 부분에서
내용을 재사용하도록 선언하는 데 사용됩니다.
브라우저는 hidden 속성이 설정된 요소를 화면에 렌더링하지 않습니다.
즉, 이 속성이 정의된 요소는 화면에서 감춰지게 됩니다.
hidden 속성을 설정하는 것은 브라우저 단에서 처리되는 것만으로는 CSS의 display: none 설정과 큰 차이가 없습니다.
하지만 보조 기술(AT, 스크린 리더 등) 처리는 좀 다릅니다. hidden 속성으로 감춰진 콘텐츠에 접근할 수 있는 방법을 제공해주고 있어 감춰진 콘텐츠 일지라 하더라도 참조를 통해 보조 기술에서 읽을 수 있도록 할 수 있습니다.
반면 display: none 스타일이 설정된 요소는 그러하지 못합니다.
정리하자면, 브라우저 단에서는 차이가 없으나, 접근성 단에서는 차이가 있다.
이 속성은 일반적으로 CSS를 사용해 구현 되므로 CSS 속성에 의해 재정의 될 수 있음에 주의해야 합니다.
즉, hidden 속성이 적용된 요소에 display: block 스타일을 설정하면 화면에 렌더링 됩니다.
tabindex 속성
tabindex 는 요소를 키보드로 탐색할 수 있도록 설정하거나, 제외 또는 순서대로 탐색할 수 있도록 설정할 수 있습니다.
이는
접근성 관점에서 매우 중요한 사항입니다.
예를 들어서 마우스를 사용할 수 없는 사용자가 키보드 자판을 사용해서
웹 페이지(서비스)를 이용할 때 주로 탭키"탭(Tab) 이동"이란 용어는 순차적(미리 정해져 있는) 포커스 탐색을 사용하여 포커스 가능(Focusable) 요소 사이를
이동하는 것을 의미한다를 사용하게 됩니다.
기본적으로 포커스 가능한 요소들 (참고: https://allyjs.io/data-tables/focusable.html)
- 폼 컨트롤 요소들 : input, button, textarea, select 등
- href 속성을 가진 요소들 : a, area
- controls 속성을 가진 요소들 : video, audio
마우스로만 모든 인터페이스 동작을 하게 되면 마우스를 이용할 수 없는 사용자(장애인)에게 차별을 주기 때문에 비주얼, 구조적 디자인은 물론이고 개발까지 전반적으로 노력해야 할 사항입니다.
<!-- 사용 예시 -->
<!--
[양수] 탭 포커스 순서(2번째)를 설정한다.
(논리적 포커스 흐름에 방해가 되기에 사용을 권장하지 않음)
-->
<button type="button" class="button is-play" tabindex="2">재생</button>
<!--
[0] 은 포커스가 없는 요소에 포커스를 가능하게 해 줄 수 있다.
div 요소는 포커스를 가지지 않는 요소이지만, 포커스를 적용할 수 있게 된다.
컴포넌트 제작 시, 비 포커스 요소에 포커스를 적용해야 할 경우 유용하게 사용됨.
-->
<div tabindex="0"></div>
<!--
[-1] 일반적인 포커스 순서에서 제외시킬 수 있다.
(JavaScript 프로그래밍으로 포커스 처리 가능)
컴포넌트의 일부 요소를 일시적으로 포커스 순서에서 제외한 후,
목표에 따라 포커스를 다시 활성화 처리할 수 있다.
즉, 의도적으로 포커스를 가지지 못하게 만들어 놨다가
포커스를 주게끔 할 때 유용하게 사용할 수 있다.
-->
<ol class="toc">
<li><a href="#pinch">위기</a></li>
<li><a href="#overcome" tabindex="-1">극복</a></li>
</ol>
accesskey 속성
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 + 단축키
contenteditable 속성
기본적으로 HTML 요소들은 편집이 불가능하지만 contenteditable 속성이 설정된 요소는 사용자가 직접 편집할 수 있도록 만들어 줄 수 있습니다.
값이 true 또는 빈 문자열("")일 경우 편집 허용하게 되고, 값이 false 일 경우 편집을 허용하지 않습니다.
예를 들어, 사용자가 어떠한 위젯의 콘텐츠를 수정 할 수 있는 권한을 주고자 할 때 내용을 수정할 수 있도록 해줄 수 있습니다.
draggable 속성
모든 HTML 요소는 draggable 속성을 가질 수 있습니다.
값이 true 일 경우 드래그(Drag) 가능하고, 값이 false 또는 빈 문자열("")일 경우 드래그 불가능합니다.
<!-- 사용 예시 -->
<p draggable="true">
...
</p>
드래그앤드롭 UI 는 웹 접근성 관점에서 매우 위험한 기술입니다.
그 이유는 마우스에만 의존하기 때문입니다. 그렇기 때문에 마우스를 사용하지 못하는 사용자에게도 드래그앤드롭의 동일한 결과를 처리할 수 있도록 제공해 주어야 합니다.
예를 들어서 드래그앤드롭 대상에 키보드 포커싱이 되었을 때 자바스크립의 이벤트를 걸어 드롭 대상의 방향에 화살표 키를 이용하여 액션을 설정할 수 있게 해 줄 수 있습니다.
프론트 앤드 디벨롭퍼는 단순히 개발만 하는 것이 아니라 모든 사용자를 고려할 수 있는 설계자가 되어야 합니다.
모든 사람을 위한 디자인, 유니버셜 디자인이 필요하고 유니버셜 디자인을 하기 위해서는 구조를 탄탄하게 의미적으로 구성할 수 있는 시멘틱 마크업을 해야하고
디자이너가 전달해 준 비주얼 디자인을 화면에 표현하기 위한 CSS 능력이 탁월해야 하며 마지막으로 자바스크립트의 인터랙션 뿐만 아니라 사회적 약자 계층인 장애인 또한
비장애인과 구분없이 웹 서비스를 이용할 수 있도록 애플리케이션을 만들 필요가 있습니다.
이러한 자세가 좋은 프론트 앤드 디벨롭퍼로 나아갈 수 있는 자격 요건이 되는 것입니다.
메타데이터(Metadata) 요소들
메타데이터는 정보를 제공하는 데이터 요소로써 head 내에 정의해 주는 요소들을 말합니다.
'메타', 즉, 문서 그 자체를 설명하는 태그를 메타 태그라고 합니다.
이 요소들은 head와 head 내에 사용하는 title, meta, link, style,
base 등이 있습니다.
Related Info
head 요소
head 요소는 문서의 제목과 스타일시트, 스크립트 링크 또는 선언을 포함하는 문서의 일반적인 정보(메타데이터)를 제공해 줄 수 있는 요소입니다. 대부분 브라우저는 마크업에서 head 요소가 생략될 경우, 자동으로 head 요소를 생성하지만 일부는 그렇지 않습니다.
자동으로 <head> 요소를 생성하지 않는 브라우저 환경
- Android <= 1.6
- iPhone <= 3.1.3
- Opera <= 9.27
- Safari <= 3.2.1.
- Nokia 90
title 요소
title 은 브라우저의 타이틀 바(Title Bar)나 페이지 탭에 보여지는 문서의 제목을 정의하고, 오직 텍스트만 포함할 수 있으며 태그를 포함할 경우에는 해석되지 않고 문자열 그대로 랜더링됩니다.
meta 요소
meta 요소는 다른 메타 요소들(<title>, <base>, <link>,
<style>)로 나타낼 수 없는 메타데이터를 정의할 때 사용할 수 있습니다.
메타데이터의 종류는 크게 3가지로 나눌 수 있고 다음과 같습니다.
charset이 설정된 경우
charset 선언, 즉 웹페이지를 작성하는 일련의 형식에 사용되는 문자 인코딩(charset)에 대한 설정합니다.
이 속성보다 요소의 lang 속성이 우선하여 적용됨에 유의. (즉, 덮어쓰기 됨. 예: <div lang="fr">)
http-equiv(alent) 속성이 설정된 경우
pragma 란 지시어(Directive)로 일반적으로 웹서버가 제공하는 웹페이지가 어떻게 제공되어야 하는지에 대한 정보를 제공하는 경우에 사용합니다..
-
HTML 5에서는 더 이상 아래와 같이 사용되길 권장하지 않음.
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> -
3초 뒤에 url 값에 설정된 페이지로 이동하게 됨.
<meta http-equiv="refresh" content="3;url=https://google.com">
<!-- 권장 X -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- 권장 ○ -->
<meta charset="UTF-8">
마지막으로 name 속성이 설정된 경우
문서 수준 메타 데이터의 이름을 정의하며, content 속성 값을 통해 설정할 수 있습니다.
다음과 같은 name 값들이 있습니다.
- application name: 웹 페이지에서 실행중인 웹 애플리케이션 이름 정의.
간단한 웹 페이지는 application-name 메타를 정의해서는 안됨. - description : 웹 페이지의 내용에 대한 짧고 정확한 요약을 설정.
- keywords : 쉼표로 구분된 문자열로 페이지의 내용과 관련된 키워드를 설정.
- author : 문서 작성자의 이름을 정의.
-
robots : 검색 로봇이 웹 페이지를 크롤링하는 동작에 대한 정의.
- index
- noindex : 아무런 정보도 가지고 가지 못하도록 설정
- follow : 연결된 링크를 따라갈 수 있도록 설정
- nofollow : 연결된 링크를 따라가지 못하도록 설정
- noarchive
- nosnippet
- noimageindex
-
viewport : 비표준이지만 대다수의 모바일 기기가 이 속성을 지원하고 있으며,
초기 viewport 크기 설정에 관한 힌트를 제공.
이 속성은 몇 개의 모바일 디바이스에 의해서만 사용됨.
width, height, initial-scale, maximum-scale, minimum-scale, user-scalable,
<meta name="description" content="웹 페이지 내용을 요약해서 기술">
<meta name="keywords" content="웹 페이지에 주요 키워드를 콤마(,)로 구분하여 작성.">
<meta name="author" content="웹 페이지의 제작자 정보를 기술">
<meta name="robots" content="index"><!-- 페이지의 내용을 인덱싱할 수 있음. -->
<meta name="viewport" content="width=480px"> <!-- width 값이 없을 경우 기본적으로 모바일에서는 960 으로 표시 -->
과거 1024픽셀의 모니터 사이즈를 가지고 있던 17인치 모니터가 1024 의 해상도를 가지고 있었기 때문에
양쪽 여백을 생각했을 때 가장 보편적으로 사용되는 문서의 폭이 960 이었기 때문에 기본값이 960 입니다.
하지만 본격적인 모바일 시대에 접어들게 되면서 스마트폰 디바이스는 더 작아지게 되었고
그 작아진 화면에 맞게 끔 최적화된 형태로 내용을 기술하기 위해서는 폰이 가지고 있는 가로 폭에 맞춰서
설정할 필요가 생겨 났습니다.
하지만 width="480px" 과 같이 고정값을 사용하면 수직 형태로 긴 portrait 모드가 아니라
landscape 의 가로로 긴 모드를 처리할 수 없기 때문에 그러한 문제를 해결하기 위해서 수시로 변할 수 있는 변수값을 사용할
필요가 생겼는데 장치를 의미하는 device, 너비를 의미하는 width 인 width="device-width" 란 값을 제공하게 되었으며
이 값을 사용하면 기기의 폭에 맞춰서 화면에 최적화하게 되어 있습니다.
link 요소
현재 문서와 외부 리소스(css 나 자바스크립트)와의 관계(relation)를 명시하는데 사용되고, 이 link 요소는 스타일시트를 링크 하는데 가장 많이 사용되고 있습니다.
속성에는 다음과 같은 것들이 있습니다.
- rel : 문서와의 관계(relation) 명시.
- type : 링크된 리소스 MIME 타입 정의.
(기본 적용: text/css) text/html; text/javascript - href : 링크된 리소스 URL 설정.
- hreflang : 링크된 리소스의 언어 설정.
- media : 링크된 리소스가 적용될 미디어(media)를 설정.
기본은 all, 그 외 screen, print(출력환경)
<!-- 기본 스타일시트 설정 -->
<link href="style.css" rel="stylesheet">
<!--
대체 스타일시트 설정: View > Page Style 메뉴에서 사용할 스타일시트를 고를 수 있다. (Chrome은 해당 X)
파이어폭스에서 보기 메뉴의 문서 스타일에서 스타일을 선택할 수 있음.
-->
<link href="default.css" rel="stylesheet" title="기본 스타일">
<link href="fancy.css" rel="alternate stylesheet" title="팬시">
<link href="basic.css" rel="alternate stylesheet" title="베이직">
style 요소
style 요소는 문서나 문서 일부에 대한 스타일 정보를 포함하고 기본적으로 CSS 언어가 사용됩니다.
이 요소의 속성으로는 type, media, scoped, title, disabled 가 있습니다.
<!-- 일반적인 사용 예 -->
<style type="text/css">
body {
color: #323232;
}
</style>
<!-- scoped 속성 사용 예: ❖ 현재 제대로 지원하는 브라우저 없음 -->
<section>
<style scoped>
p { color: #902c1f; }
</style>
<p> ... </p>
</section>
base 요소
base 요소는 문서에 포함된 모든 상대 URL들의 기준 URL을 나타내고, 한 문서에 하나의 <base> 요소만 존재해야 합니다.
<base target="_blank" href="http://www.example.com/">
HTML를 브라우저가 해석하는 순서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="sample.css">
<script src="example.js"></script>
</head>
<body>
<img src="/images/sample.png" alt="">
<ul>
<li>HTML을 파싱</li>
<li>외부 CSS파일 및 외부 자바스크립트 파일을 로드</li>
<li>자바스크립트가 전달된 시점에 실행</li>
<li>DOM 트리의 구축 완료</li>
<li>이미지 파일 및 플래시 등의 외부 리소스를 로드</li>
<li>모두 완료</li>
</ul>
</body>
</html>'HTMLㆍCSS 기초 강좌 > HTML' 카테고리의 다른 글
| #4 Tables, 폼(양식,Forms) 구성 요소들 (0) | 2018.12.26 |
|---|---|
| #3 Sections 요소, Main, Text Level, Grouping etc.. (1) | 2018.12.26 |
| #2 HTML Element (1) | 2018.12.20 |
| #1 HTML 이란 무엇인가? (5) | 2018.12.20 |
