October 2024
Beginner to intermediate
452 pages
9h 28m
Korean
Content preview from 실전 코드로 배우는 Vue.js
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
185
CHAPTER 04
컴포넌트 상호작용
CAUTION
두 섹션이 하나의 부모 엘리먼트 하위에 있을 때
텔레포트의 목적지 컴포넌트는
<Teleport>
가 마운팅되기 이전에
DOM
안에 존재해야 한다. [예제
4
-
27
]
에서 두
section
이 모두 하나의
main
엘리먼트 안에 있다면
<Teleport>
컴포넌트가 제대로 작동하지 않
는다. 자세한 내용은
4
.
5
.
2
절을 참고하기 바란다.
4.5.1
Teleport
와 <
dialog
> 엘리먼트를 이용한 모달 구현
모달은 화면에서 가장 전면에 나타나는 대화 상자를 일컫는다. 또한 모달은 사용자와 메인
페이지의 상호작용을 차단한다. 사용자는 모달 상호작용을 먼저 처리하고 창을 닫아야 메인
페이지로 돌아갈 수 있다.
모달은 사용자의 주의를 온전히 집중시켜야 할 중요한 알림을 단 한 번만 표시하려고 할 때
매우 편리하다.
[그림
4
-
9
]처럼 기본적인 모달을 설계해보자. 일반적인 대화 상자와 비슷하게 모달은 다음과
같은 요소를 포함한다.
●
전체 화면을 덮는 배경
backdrop
은 현재 페이지와 사용자의 상호작용을 차단하는 역할을 한다.
●
제목과 닫기 버튼이 있는
header
, 콘텐츠가 담긴
main
, 통상적인 닫기 버튼이 있는
footer
섹션 등은 모두
슬롯을 이용해 커스터마이징한다.
186
실전 코드로 배우는 Vue.js ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.