UI Interaction

Web Tech
Concert

yamoo9.github.io

야무9

Part 1 . CSS Animation

Web Tech
Concert

CSS3 Animation

Fade Slide In from Top

Fade Slide In from Left

Fade In

Fade Slide Up from Bottom

Overview

Sequence Animation

Part 2. DOM Script

Web Tech
Concert

1.1

UI Interaction Web Tech Concert yamoo9.github.io 야무9

	@keyframes fade-In {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	@keyframes fade-In {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	.app-header {
	opacity: 0;
	animation:
	fade-in /* name */
	0.35s /* duration */
	0.4s /* delay */
	ease-out /* timing function */
	forwards; /* fill mode */
	}

	.app-header {
	opacity: 0;
	animation:
	fade-in /* name */
	0.35s /* duration */
	0.4s /* delay */
	ease-out /* timing function */
	forwards; /* fill mode */
	}

	.app-header {
	opacity: 0;
	animation:
	fade-in /* name */
	0.35s /* duration */
	0.4s /* delay */
	ease-out /* timing function */
	forwards; /* fill mode */
	}

UI Interaction

Part 1 . CSS Animation

Part 2 . DOM Script

Part 3 . Template Engine + Ajax

Part 4 . Front-End Framework

bit.ly/WTC_ex

Part 1 . CSS Animation

Part 2. DOM Script

Part 3. Template Engine

feat. Ajax/Modular

bit.ly/WTC_ex_finished

Part 4. Framework

Front-End

프레임워크 학습ᐧ활용에 앞서

웹 표준 개발
패러다임 시프트

차세대 웹 표준 기술 ➪ 프레임워크 활용

bit.ly/WTC_react_ex

	@keyframes fade-slide-in-from-top {
	0% {
	transform: translateY(-4rem);
	opacity: 0;
	}
	100% {
	transform: none;
	opacity: 1;
	}
	}

	@keyframes fade-slide-in-from-left {
	0% {
	transform: translateX(-4rem);
	opacity: 0;
	}
	100% {
	transform: none;
	opacity: 1;
	}
	}

	@keyframes fade-slide-in-from-bottom {
	0% {
	transform: translateY(4rem);
	opacity: 0;
	}
	100% {
	transform: none;
	opacity: 1;
	}
	}

	@keyframes fade-slide-in-from-right {
	0% {
	transform: translateX(4rem);
	opacity: 0;
	}
	100% {
	transform: none;
	opacity: 1;
	}
	}

	.app-header {

	/* 0% */
	opacity: 0;
	transform: translateY(-4rem);

	/* 100% */
	animation: transform-none 0.35s 0.4s ease-out forwards;

	}

	.brand {
	/* 0% */
	opacity: 0;
	transform: translateX(-4rem);
	/* 100% */
	animation: transform-none 0.3s 0.7s cubic-bezier(0, 0, 0.23, 1.43) forwards;
	}

	button[title="메뉴 열기"] {
	/* 0% */
	opacity: 0;
	transform: translateX(4rem);
	/* 100% */
	animation: transform-none 0.45s 0.65s cubic-bezier(0, 0, 0, 1) forwards;
	}

	.ediya-menu__item {
	/* 0% */
	opacity: 0;
	transform: translateY(4rem);
	/* 100% */
	animation: transform-none 0.3s 0.85s cubic-bezier(0.6, 0.01, 0.16, 1) forwards;
	}

	/* 시간 차 애니메이션 */
	.ediya-menu__item:nth-child(1) { animation-duration: 0.8s }
	.ediya-menu__item:nth-child(2) { animation-duration: 1.2s }
	.ediya-menu__item:nth-child(3) { animation-duration: 1.6s }
	.ediya-menu__item:nth-child(4) { animation-duration: 2.0s }

	<!DOCTYPE html>
	<html lang="ko-KR">
	<head>
	<meta charset="UTF-8" />
	<title>이디야(Ediya) UI</title>
	</head>
	<body>
	<header class="app-header">
	<h1 class="brand">
	<a
	href="https://www.ediya.com/"
	target="_blank">
	<span
	class="a11y-hidden"
	lang="en">
	EDIYA COFFEE
	</span>
	</a>
	</h1>
	</header>
	<body>
	</html>

	<ul class="ediya-menu reset-list">
	<li class="ediya-menu__item">
	<a href="#" role="button" aria-haspopup="dialog" aria-pressed="false">
	<figure>
	<img
	src="./images/ICED-벚꽃라떼.png"
	width="323"
	height="323"
	alt
	/>
	<figcaption>ICED 벚꽃라떼</figcaption>
	</figure>
	</a>
	<div role="dialog" aria-modal="true" hidden class="ediya-menu__item--detail">
	...
	</div>
	</li>
	</ul>

	// 유틸리티 함수 el 정의 (ES6 화살표 함수)
	const el = (selector) => document.querySelector(selector)

	// 유틸리티 함수를 사용해 문서에서 요소 찾기
	const menuItem = el('.ediya-menu__item')
	const menuItemButton = el('.ediya-menu__item a[role="button"]')
	const menuItemModal = el('.ediya-menu__item .ediya-menu__item--detail')

	// 유틸리티 함수 elList 정의
	const elList = selector => document.querySelectorAll(selector)

	// 유틸리티 함수를 사용해 문서에서 요소(들) 찾기
	const menuItems = elList('.ediya-menu__item')
	const menuItemButtons = elList('.ediya-menu__item a[role="button"]')
	const menuItemModals = elList('.ediya-menu__item .ediya-menu__item--detail')

	/* DOM API : 사용자가 문서 요소를 클릭하면 동작하도록 하는 방법
	* 문서_객체.addEventListener('이벤트_유형', 실행될_함수)
	*/

	// 클릭 시, 실행 될 함수
	const onClickAction = (event) => {
	console.log('이벤트 유형:', event.type)
	}

	// 첫번째 메뉴 아이템 버튼 클릭 시, 연결된 함수 실행
	menuItemButtons[0].addEventListener('click', onClickAction)

	// 메뉴 아이템(들)을 순환하여 각 아이템 버튼 요소에 클릭 이벤트 핸들러 연결 설정
	// NodeList.prototype.forEach() : IE 미지원. IE 고려 시 Fallback 사용. (mzl.la/2Nc2uLP)
	menuItemButtons.forEach(button => button.addEventListener('click', onClickAction))

	elList('.ediya-menu__item a[role="button"]').forEach(button =>
	button.addEventListener('click', showDetailModal)
	)

	const showDetailModal = e => {
	const button = e.currentTarget // 클릭한 버튼([role="button"] 요소)
	const modal = button.nextElementSibling // 버튼에 인접한 다음 요소는 '모달'([role="dialog"])
	button.setAttribute('aria-pressed', true) // 버튼 요소를 '누른' 상태로 변경
	modal.removeAttribute('hidden') // 모달 요소의 hidden 속성 제거
	// 모달 요소에 is-active 클래스 속성 추가
	window.setTimeout(() => modal.classList.add('is-active'), 0)
	// 브라우저 기본 동작 차단
	e.preventDefault()
	}

	elList('.ediya-menu__item .button.is-close-panel').forEach(button =>
	button.addEventListener('click', hideDetailModal)
	)

	const hideDetailModal = e => {
	const closeButton = e.currentTarget // 닫기 버튼
	const modal = closeButton.parentNode // 부모 탐색 '모달'
	const button = modal.previousElementSibling // 열기 버튼(a)
	button.setAttribute('aria-pressed', false) // 열기 버튼 누르지 않은 상태로 변경
	modal.classList.remove('is-active') // 모달 요소의 is-active 클래스 속성 제거
	window.setTimeout(() => modal.setAttribute('hidden', true), 200) // 모달에 hidden 속성 추가
	}

	const openMenuButton = el('.app-header .button.is-open-menu')
	const menu = el('.app-navigation')

	openMenuButton.addEventListener('click', openMenu)

	const openMenu = e => {
	menu.removeAttribute('hidden')
	window.setTimeout(() => menu.classList.add('is-active'), 100)
	}

	const closeMenuButton = el('.app-header .button.is-close-menu')

	closeMenuButton.addEventListener('click', closeMenu)

	const closeMenu = e => {
	menu.classList.remove('is-active')
	window.setTimeout(() => menu.setAttribute('hidden', true), 200)
	}

	const firstNavLink = el('.app-navigation a')
	const closeMenuButton = el('.app-navigation .button.is-close-menu')

	firstNavLink.addEventListener('keydown', focusOnCloseMenuButton)
	closeMenuButton.addEventListener('keydown', focusOnFirstNavLink)

	const focusOnCloseMenuButton = e => {
	if(e.shiftKey && e.code === 'Tab') {
	window.setTimeout(() => closeMenuButton.focus(), 0)
	}
	}

	const focusOnFirstNavLink = e => {
	if(!e.shiftKey && e.code === 'Tab') {
	window.setTimeout(() => firstNavLink.focus(), 0)
	}
	}

	// DOM 요소(Elements) 찾기
	const menu = el('.app-navigation')
	const firstNavLink = el('.app-navigation a')
	const openMenuButton = el('.app-header .button.is-open-menu')
	const closeMenuButton = el('.app-navigation .button.is-close-menu')
	const menuItemButtons = elList('.ediya-menu__item a[role="button"]')
	const closeButtons = elList('.ediya-menu__item .button.is-close-panel')

	// 인터랙션 기능 구현
	const showDetailModal = (e) => {
	const button = e.currentTarget
	const modal = button.nextElementSibling
	button.setAttribute('aria-pressed', true)
	modal.removeAttribute('hidden')
	window.setTimeout(() => modal.classList.add('is-active'), 0)
	e.preventDefault()
	}

	const hideDetailModal = (e) => {
	const closeButton = e.currentTarget
	const modal = closeButton.parentNode
	const button = modal.previousElementSibling
	button.setAttribute('aria-pressed', false)
	modal.classList.remove('is-active')
	window.setTimeout(() => modal.setAttribute('hidden', true), 200)
	}

	const openMenu = (e) => {
	menu.removeAttribute('hidden')
	window.setTimeout(() => menu.classList.add('is-active'), 100)
	}

	const closeMenu = (e) => {
	menu.classList.remove('is-active')
	window.setTimeout(() => menu.setAttribute('hidden', true), 200)
	}

	const focusOnCloseMenuButton = (e) => {
	if (e.shiftKey && e.code === 'Tab') {
	window.setTimeout(() => closeMenuButton.focus(), 0)
	}
	}

	const focusOnFirstNavLink = (e) => {
	if (!e.shiftKey && e.code === 'Tab') {
	window.setTimeout(() => firstNavLink.focus(), 0)
	}
	}

	// 이벤트 핸들링
	menuItemButtons.forEach((button) => button.addEventListener('click', showDetailModal))
	closeButtons.forEach((button) => button.addEventListener('click', hideDetailModal))
	openMenuButton.addEventListener('click', openMenu)
	closeMenuButton.addEventListener('click', closeMenu)
	firstNavLink.addEventListener('keydown', focusOnCloseMenuButton)
	closeMenuButton.addEventListener('keydown', focusOnFirstNavLink)

	// 비동기 통신 후, 실행 될 함수
	const app = ({ data }) => {
	// 응답 결과의 data에서 특정 데이터를 상수로 할당 (별칭 사용)
	const { beverage_menu: menu, navigation } = data
	}

	// axios를 사용해 비동기 데이터 가져오기
	// https://api.myjson.com/bins/pdppf 또는 /api/ediya.json
	axios.get('/api/ediya.json').then(app)

	<nav
	class="app-navigation"
	hidden
	>
	<h2 class="a11y-hidden">메인 메뉴</h2>
	<ul class="reset-list"></ul>
	<!-- ... -->
	</nav>

	<script
	id="ediya-navigation-item-template"
	type="text/x-template"
	>
	{{#items}}
	<li><a href="{{link}}">{{text}}</a></li>
	{{/items}}
	</script>

	const template = Hogan.compile(el('#ediya-navigation-item-template').html())
	const output = template.render({ items: navigation.items })
	el('.app-navigation > ul').html(output)

	const bindDataToTemplate = (data, template_selector, target_selector) => {
	const template = Hogan.compile(el(template_selector).html())
	const output = template.render(data)
	el(target_selector).html(output)
	}

	const app = ({ data }) => {
	const { beverage_menu: menu, navigation } = data
	bindDataToTemplate(
	{ items: navigation.items },
	'#ediya-navigation-item-template',
	'.app-navigation > ul'
	)
	}