# modal

32개의 포스트
post-thumbnail

[iOS / Swift] 모달 (Modal)

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

5일 전
·
0개의 댓글
post-thumbnail

[16일차] UI프레임워크/ 모달창 구현

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

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

react modal component 만들기

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

2021년 5월 31일
·
0개의 댓글
post-thumbnail

Bootstrap

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

2021년 4월 30일
·
0개의 댓글

TIL 73일차

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

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

react hooks+ styled components modal창 구현하기

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

2021년 4월 20일
·
0개의 댓글

React에서 Modal 컴포넌트 구현

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

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

Bootstrap 모달

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

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

new TIL. React Portals & Modal

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

2021년 4월 16일
·
0개의 댓글

React Modal 만들기

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

2021년 4월 5일
·
0개의 댓글

TIL 58일차

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

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

react-create-portal 에 대하여...

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

2021년 3월 30일
·
0개의 댓글

TIL_20210316_#1 (TUE)

모달 창 띄우기 (prompt / confirm)

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

iOS & Swift 공부 - Modal

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

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

body scroll lock/unlock

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

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

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

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

2020년 11월 29일
·
2개의 댓글
post-thumbnail

TIL 31일차 - modal 만들기

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

2020년 11월 25일
·
3개의 댓글
post-thumbnail

[JavaScript]Closing modal on outside click | 모달창 외부 클릭해서 닫게 하는 방법

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

2020년 11월 10일
·
2개의 댓글
post-thumbnail

Modal vs Navigation

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

2020년 11월 9일
·
1개의 댓글
post-thumbnail

[React] Modal을 Redux로 구현해보자!

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

2020년 9월 4일
·
8개의 댓글