What I Learned Today
커스텀 콜백이란 사용자가 직접 정의한 콜백 함수를 말한다.
const button1 = document.querySelector('.button-1')
const handleActive = () => {
button1.classList.add('is-active')
}
const handleInactive = () => {
button1.classList.remove('is-active')
}
mouseenter(button1, handleActive)
mouseleave(button1, handleInactive)
// --------------------------------------------------------------------------
click(document.querySelector('.button-1'), () => console.log('button 1'))
const handleClick = () => console.log('clicked button')
button.addEventListener('click', handleClick)
click(button1, handleClick)
// --------------------------------------------------------------------------
function callToAction(callback) {
callback()
}
callToAction(() => {
console.log('콜백은 다른 함수에 인수로 전달되는 함수를 말합니다.')
})
오늘은 실습 위주로 나갔다.


첫 번째 실습은 "메뉴 열기" 버튼에 이벤트 리스너를 추가하고 버튼을 클릭할 때 왼쪽에 있던 메뉴를 오른쪽으로 밀어주는 동작을 하도록
만들었다.
<div class="offsite-container">
<nav class="nav">
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">작업</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락</a></li>
</ul>
</nav>
</div>
<main class="site-container">
<h1>버튼 클릭으로 메뉴 열기</h1>
<button type="button">
<span>메뉴 열기</span>
</button>
</main>
// 1. 버튼에 이벤트 리스너 추가
const body = document.body
const siteContainer = document.querySelector('.site-container')
const toggleOffsiteButton = siteContainer.querySelector('button')
const OFFSITE_OPEN_CLASSNAME = 'offsite-is-open' // 변수에 클래스명 저장
toggleOffsiteButton.addEventListener('click', handleToggleOffsite)
function handleToggleOffsite() {
body.classList.toggle(OFFSITE_OPEN_CLASSNAME) // 버튼을 누르면 해당 클래스가 토글
}
// offsite-is-open 클래스에는 메뉴를 스타일링하는 코드가 들어있음


두 번째 실습은 "열기" 버튼을 누르면 modal dialog를 modal dialog가 열리도록 하는 실습을 했다.
이 실습은 toggle로 표현할 수 없었던 게 "열기" 버튼과 "닫기"버튼은 서로 따로 있었기 때문에 toggle로 처리하지 못했다.
<main>
<div class="wrap">
<button type="button" class="button modal-open-button">열기</button>
<svg class="point-hand" viewBox="0 0 58 66">
<use xlink:href="images/sprite.svg#point-hand" />
</svg>
</div>
</main>
<div class="modal-overlay">
<div class="modal-dialog">
<div class="modal-content">
<svg class="wave-hand" width="112" height="139" viewBox="0 0 112 139">
<use xlink:href="images/sprite.svg#wave-hand" />
</svg>
<button type="button" class="modal-close-button" aria-label="닫기">
<svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 18 18">
<use xlink:href="images/sprite.svg#close" />
</svg>
</button>
</div>
</div>
</div>
const body = document.body
const modal_open_button = document.querySelector('main .modal-open-button')
const modal_overlay = document.querySelector('.modal-overlay')
const modal_close_button = modal_overlay.querySelector('.modal-close-button')
modal_open_button.addEventListener('click', () => {
body.classList.add('modal-is-open')
})
modal_close_button.addEventListener('click', closeModalDialog)
function closeModalDialog() {
body.classList.remove('modal-is-open')
}

세 번째 실습은 non modal dialog를 실습해 보았다.
<figure class="dialog">
<img src="./images/ad.jpg" alt="쿠폰 받고 알뜰 쇼핑! 시원한 아이스커피 100원 잘 오셨어요! 웰컴백 95% 할인 받아가세요" />
<figcaption>
<a href="#">100원 상품 사러가기</a>
<button type="button">
<img src="./images/close-button.svg" title="닫기" alt="닫기" />
</button>
</figcaption>
</figure>
window.addEventListener('DOMContentLoaded', () => {
const dialog = document.querySelector('.dialog')
const closeButton = dialog.querySelector('button')
closeButton.addEventListener('click', () => {
dialog.classList.add('dialog-close')
})
})
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
modal dialog와 non modal dialog의 차이가 다른 줄 몰랐다.
modal dialog는 해당 dialog 이외의 요소에 상호작용을 하지 못하지만
non modal dialog는 해당 dialog 이외의 요소에 상호작용을 할 수 있다.
- 접근성 4 원칙
- 1원칙 : 인식의 용이성
- 2원칙 : 운용의 용이성
- 3원칙 : 이해의 용이성
- 4원칙 : 견고성
What I Learned Today
커스텀 콜백이란 사용자가 직접 정의한 콜백 함수를 말한다.
const button1 = document.querySelector('.button-1')
const handleActive = () => {
button1.classList.add('is-active')
}
const handleInactive = () => {
button1.classList.remove('is-active')
}
mouseenter(button1, handleActive)
mouseleave(button1, handleInactive)
// --------------------------------------------------------------------------
click(document.querySelector('.button-1'), () => console.log('button 1'))
const handleClick = () => console.log('clicked button')
button.addEventListener('click', handleClick)
click(button1, handleClick)
// --------------------------------------------------------------------------
function callToAction(callback) {
callback()
}
callToAction(() => {
console.log('콜백은 다른 함수에 인수로 전달되는 함수를 말합니다.')
})
오늘은 실습 위주로 나갔다.


첫 번째 실습은 "메뉴 열기" 버튼에 이벤트 리스너를 추가하고 버튼을 클릭할 때 왼쪽에 있던 메뉴를 오른쪽으로 밀어주는 동작을 하도록
만들었다.
<div class="offsite-container">
<nav class="nav">
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">작업</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락</a></li>
</ul>
</nav>
</div>
<main class="site-container">
<h1>버튼 클릭으로 메뉴 열기</h1>
<button type="button">
<span>메뉴 열기</span>
</button>
</main>
// 1. 버튼에 이벤트 리스너 추가
const body = document.body
const siteContainer = document.querySelector('.site-container')
const toggleOffsiteButton = siteContainer.querySelector('button')
const OFFSITE_OPEN_CLASSNAME = 'offsite-is-open' // 변수에 클래스명 저장
toggleOffsiteButton.addEventListener('click', handleToggleOffsite)
function handleToggleOffsite() {
body.classList.toggle(OFFSITE_OPEN_CLASSNAME) // 버튼을 누르면 해당 클래스가 토글
}
// offsite-is-open 클래스에는 메뉴를 스타일링하는 코드가 들어있음


두 번째 실습은 "열기" 버튼을 누르면 modal dialog를 modal dialog가 열리도록 하는 실습을 했다.
이 실습은 toggle로 표현할 수 없었던 게 "열기" 버튼과 "닫기"버튼은 서로 따로 있었기 때문에 toggle로 처리하지 못했다.
<main>
<div class="wrap">
<button type="button" class="button modal-open-button">열기</button>
<svg class="point-hand" viewBox="0 0 58 66">
<use xlink:href="images/sprite.svg#point-hand" />
</svg>
</div>
</main>
<div class="modal-overlay">
<div class="modal-dialog">
<div class="modal-content">
<svg class="wave-hand" width="112" height="139" viewBox="0 0 112 139">
<use xlink:href="images/sprite.svg#wave-hand" />
</svg>
<button type="button" class="modal-close-button" aria-label="닫기">
<svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 18 18">
<use xlink:href="images/sprite.svg#close" />
</svg>
</button>
</div>
</div>
</div>
const body = document.body
const modal_open_button = document.querySelector('main .modal-open-button')
const modal_overlay = document.querySelector('.modal-overlay')
const modal_close_button = modal_overlay.querySelector('.modal-close-button')
modal_open_button.addEventListener('click', () => {
body.classList.add('modal-is-open')
})
modal_close_button.addEventListener('click', closeModalDialog)
function closeModalDialog() {
body.classList.remove('modal-is-open')
}

세 번째 실습은 non modal dialog를 실습해 보았다.
<figure class="dialog">
<img src="./images/ad.jpg" alt="쿠폰 받고 알뜰 쇼핑! 시원한 아이스커피 100원 잘 오셨어요! 웰컴백 95% 할인 받아가세요" />
<figcaption>
<a href="#">100원 상품 사러가기</a>
<button type="button">
<img src="./images/close-button.svg" title="닫기" alt="닫기" />
</button>
</figcaption>
</figure>
window.addEventListener('DOMContentLoaded', () => {
const dialog = document.querySelector('.dialog')
const closeButton = dialog.querySelector('button')
closeButton.addEventListener('click', () => {
dialog.classList.add('dialog-close')
})
})
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
modal dialog와 non modal dialog의 차이가 다른 줄 몰랐다.
modal dialog는 해당 dialog 이외의 요소에 상호작용을 하지 못하지만
non modal dialog는 해당 dialog 이외의 요소에 상호작용을 할 수 있다.
- 접근성 4 원칙
- 1원칙 : 인식의 용이성
- 2원칙 : 운용의 용이성
- 3원칙 : 이해의 용이성
- 4원칙 : 견고성