# 모달

10개의 포스트
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일
·
2개의 댓글
post-thumbnail

[React] Modal 구현하기

리액트에서 기본적인 Modal 을 구현해봤다. 전체적인 코드는 아래와 같다. 함수형 컴포넌트와 스타일드 컴포넌트를 사용해서 구현했다.SignatureHeadCover 라는 부모 컴포넌트에 Modal 컴포넌트를 사용해주었다. 모달 기능 로직 \- modalState 초

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

youtube api로 리액트에 영상 가져오기

youtube api 받아서 리액트에 영상 띄워보자!

2020년 6월 13일
·
0개의 댓글

모달 팝업뜰때 바닥 스크롤 막기

모달 팝업이 표시될 때 브라우저 스크롤을 막는 방법 >브라우저 스크롤이 있는데 모달팝업의 내부 스크롤도 있는 경우, 모달팝업의 내부 스크롤을 마우스로 내리다가 끝에 다다르면, 브라우저 스크롤이 내려간다. (어둡게 처리된 내용이 스크롤되는 현상) 이런 현상을 막기위해 모달팝업이 표시될 때는 body의 overflow를 hidden으로 변경해서 브라우저 스...

2019년 6월 13일
·
0개의 댓글
post-thumbnail

리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기

Portals 는 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능입니다.

2018년 11월 2일
·
7개의 댓글