본문으로 건너뛰기
웹 프로젝트 기초집LESSON 12

모달과 상세 보기: 프로젝트 정보를 집중해서 보여 주기

난이도초급
예상 시간50분
선수지식11강 메뉴와 스크롤

12강. 모달과 상세 보기: 프로젝트 정보를 집중해서 보여 주기

1. 이번 강의에서 해결할 문제​

카드에 모든 설명을 넣으면 목록이 길어집니다. 선택한 프로젝트만 집중해 보여 주되 키보드 사용자가 열고 닫고 원래 위치로 돌아갈 수 있어야 합니다.

2. 학습 목표​

3. 핵심 개념​

dialog는 모달의 표시와 배경 상호작용 제한, Escape 닫기 같은 브라우저 기능을 제공합니다. 열기 버튼은 어떤 프로젝트인지 data-project-id로 전달합니다. 새 창 외부 링크에는 target="_blank"와 rel="noopener noreferrer"를 함께 둡니다.

4. 단계별 실습​

HTML · main 뒤에 추가

game-dev-portfolio/index.html
<dialog id="projectDialog" aria-labelledby="dialogTitle">
  <button id="dialogClose" type="button" autofocus>닫기</button>
  <h2 id="dialogTitle"></h2>
  <p id="dialogDescription"></p>
  <a id="dialogLink" target="_blank" rel="noopener noreferrer">프로젝트 외부 링크</a>
</dialog>

JavaScript · js/app.js에 추가하고 카드 버튼에 id 전달

game-dev-portfolio/js/app.js
// createProjectCard 안에서 button 생성 뒤 추가
button.dataset.projectId = project.id;

const dialog = document.querySelector('#projectDialog');
const dialogTitle = document.querySelector('#dialogTitle');
const dialogDescription = document.querySelector('#dialogDescription');
const dialogLink = document.querySelector('#dialogLink');

projectGrid.addEventListener('click', (event) => {
  const button = event.target.closest('[data-action="open-project"]');
  if (!button) return;
  const project = projects.find((item) => item.id === button.dataset.projectId);
  if (!project) return;
  dialogTitle.textContent = project.title;
  dialogDescription.textContent = project.description;
  dialogLink.href = project.url;
  dialog.showModal();
});

document.querySelector('#dialogClose').addEventListener('click', () => dialog.close());

CSS · 파일 경로: css/style.css

game-dev-portfolio/css/style.css
dialog { width: min(90vw, 38rem); border: 0; border-radius: 1rem; padding: 1.5rem; }
dialog::backdrop { background: rgb(8 18 32 / 70%); }

개발자 도구 확인: 카드 버튼을 키보드로 열고 Escape로 닫습니다. 접근성 트리에서 dialog 이름이 프로젝트 제목인지, 닫은 뒤 초점이 열기 버튼으로 돌아오는지 확인합니다.

5. 코드가 동작하는 이유​

그리드 한 곳의 이벤트 리스너가 가장 가까운 상세 버튼을 찾습니다. showModal()은 대화 상자를 최상위 레이어에 열고, close()는 브라우저가 열기 전 초점 위치를 복원할 수 있게 합니다.

6. 자주 하는 실수와 해결법​

7. 직접 실습​

8. 이해 점검 질문 3개​

9. 핵심 요약​

MINI QUIZ

모달과 상세 보기: 프로젝트 정보를 집중해서 보여 주기 미니 퀴즈

선택 즉시 정답과 해설을 확인할 수 있습니다. 결과는 이 브라우저에만 저장됩니다.

0 / 2
  1. 문제 1“모달과 상세 보기: 프로젝트 정보를 집중해서 보여 주기”에서 다음 단계로 넘어가기 전에 확인할 핵심은 무엇인가요?
  2. 문제 2‘모달을 div만으로 흉내’ 실수를 판단할 때 “모달과 상세 보기: 프로젝트 정보를 집중해서 보여 주기” 강의가 제시한 기준은 무엇인가요?

답을 선택하면 진행 결과가 자동으로 저장됩니다.

LESSON STATUS

학습을 마쳤나요?

직접 실습과 점검 질문까지 확인한 뒤 완료로 표시하세요.

12강. 모달과 상세 보기: 프로젝트 정보를 집중해서 보여 주기 미완료 상태