부트캠프/멋쟁이 사자처럼

37+DAY_멋사 프론트엔드 부트캠프 14기_TIL

2025. 6. 17. 17:45

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원칙 : 견고성
반응형
저작자표시 (새창열림)
'부트캠프/멋쟁이 사자처럼' 카테고리의 다른 글
  • 39+DAY_멋사 프론트엔드 부트캠프 14기_TIL
  • 38+DAY_멋사 프론트엔드 부트캠프 14기_TIL
  • 36+DAY_멋사 프론트엔드 부트캠프 14기_TIL
  • 35+DAY_멋사 프론트엔드 부트캠프 14기_TIL
NamDoHyeon
NamDoHyeon
반응형
NamDoHyeon
뉴비 개발자
NamDoHyeon
전체
오늘
어제

블로그 메뉴

  • 홈
  • 방명록
  • 관리자
  • 글쓰기
  • 분류 전체보기 (96)
    • 백준 (38)
    • 부트캠프 (47)
      • 멋쟁이 사자처럼 (47)
    • HTML (1)
      • Google 클론 (1)
    • 개인공부 (9)
      • 데이터베이스 (2)
      • 소프트웨어 공학 (1)
      • C (5)
      • 알고리즘 (1)

최근 글

hELLO · Designed By 정상우.
NamDoHyeon
37+DAY_멋사 프론트엔드 부트캠프 14기_TIL
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.