# 모달

25개의 포스트

카카오맵 팝업창 작업 (REACT)

카카오맵, 말 그대로 지도이다. 원하는 위치를 주소 및 키워드를 활용하여 찾을 수 있도록 도와준다.개발자들 또한 지도를 활용하여 기능을 구현하려고 할 때, kakao map api를 많이 활용한다.kakao map api를 활용하는 분들이라면 kakao 개발 사이트에서

2022년 5월 7일
·
0개의 댓글
post-thumbnail

리액트 외부 영역 클릭시 닫기

미친 듯이 삽질했던 외부 영역 클릭 시 닫는 기능을 까먹지 않기 위해... 작성하자. 우선 코드부터 보자 드롭다운 메뉴는 showOption이 true일 때 보이게 되는데 초깃값은 false이며 클릭 시 true가 된다. useEffect로 마우스 클릭 시 **(

2022년 5월 5일
·
2개의 댓글
post-thumbnail

[2022.04.27] Vue 입문기#4 모달창 애니메이션 효과 넣기

모달창에 트랜지션/애니메이션효과를 넣어보자지난번에 만들어보았던 모달창에 애니메이션 효과를 넣어보려 한다.Vue가 제공하는 트랜지션 컴포넌트를 사용해보기로 했다.이렇게 만들어놨던 모달 컴포넌트에 transition 태그로 감싸보았다.이제 <transition nam

2022년 4월 27일
·
0개의 댓글
post-thumbnail

비동기 CRUD 전체 마무리

모달 창을 만들어 보겠습니다.수정 및 삭제 처리를 위한 창을 만들겠습니다.이 창은 modal을 변형해서 만들며, html요소에는 존재하지만 평소에는 보이지 않다가, 추후에 버튼을 클릭했을때만 화면에 표출되는 창으로 설계합니다. 상단 head태그 내에 stype 부분도

2022년 4월 26일
·
0개의 댓글

모달 창

모달창 기능구현은 할 만 했다.중요한 건 CSS.....CSS가 너무 어렵다.이 CSS를 참고하여 공부하자.

2022년 3월 13일
·
0개의 댓글
post-thumbnail

[Web] 웹프로그래밍(과제3)/모달(modals)/폼(Form)/라디오 버튼 그룹

카드를 모달로 바꾸기라디오 버튼 그룹버튼 클릭시 모달 띄우기Bootstrap - Radio buttonshttps://getbootstrap.com/docs/4.0/components/buttons/

2022년 2월 24일
·
0개의 댓글

[Flutter] 이쁜 모달입력폼

2022년 1월 2일
·
0개의 댓글

11.16 (12)

til 12일차

2021년 11월 17일
·
0개의 댓글
post-thumbnail

[react] chakra-ui를 이용해 모달 만들기 (Typescript + Next.js)

만들어 볼 결과물은 gif와 같은 모달이다.아직 디자인이 완전히 나온 상태가 아니어서 모달의 타입을 정확히 구분지을 수 없었다.따라서 헤더(타이틀)와 푸터(버튼)의 디자인에 따라 타입을 나누고, 바디는 children 을 이용해 받을 것이다.chakra-ui로 모달을

2021년 10월 28일
·
2개의 댓글
post-thumbnail

TIL-44 React 모달 구현하기

React 모달 구현하기

2021년 10월 21일
·
0개의 댓글
post-thumbnail

모달 다이얼로그 만들기 | JS Snippets

모달 다이얼로그(Modal Dialogs)는 메인 컨텐츠 위에 나타나는 사용자 인터랙션 중 하나다. 일반 시스템 다이얼로그는 팝업으로 나타나지만 모달 다이얼로그는 화면 위의 레이어로 나타나는 차이가 있다.모던 브라우저 환경에서 자주 사용되는 기술 중 하나이며 사용자의

2021년 8월 6일
·
1개의 댓글

모달창 띄우기

var btnModal = document.querySelector('.btn-modal');var modal = document.querySelector('.modal');var btnClose = document.querySelector('.modal .btn-cl

2021년 8월 4일
·
0개의 댓글
post-thumbnail

[Vue.js] component modal

모달창을 처음 만들어본다.거기에 기능(?) 로봇의 부품을 component화 시키는 작업은 한번 경험해보았다. 그래서 이 두가지를 합친 component화한 모달을 개발하려한다.https://github.com/HyojinPark1223/Helngers.git

2021년 7월 27일
·
0개의 댓글
post-thumbnail

[iOS / Swift] 모달 (Modal)

안녕하세요 오늘은 모달에 대해서 공부를 해보겠습니다. 아이폰을 사용하신 다면 이 모달을 핸드폰 안에서 많이 보셨을 텐데요, 하지만 단어에 대해서는 익숙하지 않습니다. 그럼 모달에 대해 더 자세히 알아보겠습니다. 모달 (Modal) 모달은 사용자가 원래 보고있는 화면에

2021년 6월 9일
·
0개의 댓글
post-thumbnail

[JS] 자바스크립트 Modal

제일 먼저 마주했던 작업. 혼자서 이렇게 저렇게 만들었던 기억이 나서 잊지 않고 정리해본다.이런 결과가 나오게 된다!

2021년 3월 15일
·
0개의 댓글
post-thumbnail

iOS & Swift 공부 - Modal

사용자의 이목을 끌기 위해 사용하는 화면 전환 기법엄밀히 말하면 화면 "전환"은 아니고, 다른 화면을 현재 화면 위로 present 하여 표현하는 방식 (present modally)Modal 로 보이는 화면을 사라지게 하려면 특정 "선택"이 동반되어야 한다. → 메

2021년 1월 28일
·
0개의 댓글
post-thumbnail

웹 프론트엔드 과제 with vanillaJS 3

문제 > #### 이미지 상세 보기 모달 관련 디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다. 필수 이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC

2021년 1월 18일
·
0개의 댓글

body scroll lock/unlock

모달 창 띄웠을 때 바닥 페이지 스크롤 안되게 해주세요.프로젝트를 하다 보면 위와 같은 요청을 받게 된다.레이어로 모달 창을 띄운 상태에서 스크롤을 하면 바닥 페이지가 위 아래로 움직이게 되는데이걸 막아 달라는거다.CSS 프레임워크나 모달 플러그인 등을 사용하면자체적인

2021년 1월 14일
·
0개의 댓글
post-thumbnail

React | 세상 간단하게 모달창 만들기 (라이브러리 X)

위의 모달창을 보자. 위의 모달창에는 X 버튼이 달려있지 않다. 하지만 모달창의 바깥 부분을 클릭하면 바로 모달창이 꺼진다. 이런 간단한 모달창을 세상 쉽게 만드는 방법을 적어 본다. (리액트 초심자가 리액트 초심자에게 드리는 팁입니다!😇)Event.stopPropa

2020년 11월 29일
·
1개의 댓글