# modal

wook4506

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

smellycat0503

모달창 만들기. Material-ui 사이트에서 컴포넌트-> 피트백-> dialog 에 들어가면 요런게 있다. 게시물 작성 버튼을 클릭하면 이런게 나오도록 만들거임. 첫 화면에서 우측 하단 아이콘 클릭하면 요런게 뜬다. ![](https://images.v

adffewr

벨로그에 있는 포스트 삭제를 누르면 나오는 모달창을 참고해서 간단하게 만들겠습니다. react 프로젝트를 기본적으로 설치를 해주고 아래와 같이 패키지를 설치해 줍니다. 설치 패키지 @emotion/core @emotion/react @emotion/styled

abcdana

프론트엔드 component를 모아놓은 라이브러리https://getbootstrap.com/4.x버전을 선택하여 Starter template 복사해서 사용하도록 함CDN 방식으로 빠르게 Bootstrap을 설치하는 방법팝업 느낌을 주는 UIHTML/CSS로

moon3356

오늘 목표했던 것 🗒 Modal 라이브러리 사용 안하고 구현해보기 ✓ HA css 재수정 ✓ Modal 구현 전에 한 번 라이브러리를 사용하여 간단하게 구현을 한 적이 있었는데, 프로젝트에 들어가게 되면 라이브러리를 사용하지 않는 것을 권장한다고해서 직접 구현해보

zerozoo-front

사족어떻게 구현할 것인가?구현에서의 문제점과 해결책구현react+styled components로 modal을 구현해보려 한다.이전에 react class component + css를 이용해 구현해본 적이 있기 때문에 그 방식을 그대로 따라가려 했지만 hooks는 다

tunakim

음식점에서 세부 메뉴를 선택할 때 깔끔한 UI를 위해 모달을 이용해 구현해 봤습니다.메뉴 컴포넌트Modal 컴포넌트Modal을 제외한 나머지 어둡게 처리할 컴포넌트먼저 메뉴 리스트 중, 하나의 메뉴를 클릭하면 Modal 창이 나오도록 Menu 컴포넌트를 구성했습니다.u

hanei100

Boostrap을 통해 모달 창을 손쉽게 구현할 수 있습니다. 모달 형식을 통해 저번 시간에 배운 Forms와 함께 로그인 창을 만들어봅니다.

yoojin-kwon

모달 창은 사용자에게 특정 내용을 강조하여 전달하고자 할 때 사용한다. 모달 창에 대한 주목도를 높이기 위해 일반적으로 배경을 어두운 색상으로 두어 대비를 준다. 그런데 위 이미지와 같이 다른 컨텐츠들이 모달 창보다 높은 z-index를 가진다면? 좋은 모달 창이라고

xka926

현재 투두앱으로 포트폴리오를 만들고 있는 중이었다. 단순히 리스트를 추가하고, 삭제, 수정만이 하는게 아니라, 노드로 백엔드까지 만들어서 진행하려고 했으나... 생각보다 컴포넌츠는 나누는 작업이 많았고, 회원가입 및 로그인까지 작업을 해야되서 첫 포폴치고는 작업량이

moon3356

솔로데이 동안 진행할 로그인 페이지 구현을 위해 React에서 modal 만드는 방법을 알면 도움이 될 것 같아서 만들어 보았다. https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-objec

dfd1123

리액트 v16 에서 도입된 기능인 Portals! 한번 알아보도록 하자!!

qkrcndtlr123

모달 창 띄우기 (prompt / confirm)

kevinkim2586

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

nooroong

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

edie_ko

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

rnrel11

평화로운 수요일나와 지상이는 solo week 계획대로 첫 날에는 modal을 만들어 보았다.모달은 터럭 모(毛) + 달달하다와 합쳐진 말로 풍성한 털이 있어서 달달하다. 라는 말이다. 친구로는 팝업이 있다.팝업은 기존 브라우저 페이지에서 새로운 브라우저 페이지를 여는

eunjin

포트폴리오 사이트나 기업 웹사이트를 만들 때, 모달(modal)창의 닫기 버튼 말고도 모달창을 제외한 화면을 클릭해서 닫을 수 있도록 해야 사용자가 불편함 없이 사이트를 이용할 수 있다. 간단한 HTML 태그 구성과 자바스크립트 단 몇 줄이면 해결 가능하다.

wonhee010

iOS의 화면 전환 방법인 Modal과 Navigation에 대해 알아보고 비교해봤다.

altmshfkgudtjr

웹페이지를 구현할 때, Modal이라는 개념은 정말 많이 쓰인다. 하지만 단방향으로만 데이터를 바인딩해주는 React 특성상 Modal 만들 때에는 구조적이나 z-index과 같은 뷰쪽에서 깔끔하지않는 문제가 발생한다..🤔 그래서, 혹시 Redux를 이용하여 Mod