모달 (2) 썸네일형 리스트형 앵귤러 모달 웹프로그로밍에서 모달은 팝업이나 dialog를 의미합니다. Vanilla JavaScript (framework 사용 없이 HTML, CSS, JS만으로 만들어진 어플케이션)를 사용하여 모달을 만드는 것도 가능하지만 앵귤러에서 제공하는 기능들을 활용하면 모달의 재사용성을 높이고 정보를 공유를 보다 손쉽게 할 수 있습니다. 앵귤러를 사용하여 모달을 구현하는 방법을 살펴보겠습니다. 먼저 모달 구현을 위해 사용할 기능들을 살펴볼까요? 1. 모달 Component (모달 닫기 등 공통된 기능과 layout 제공) 2. 모달 Service (모달의 상태를 관리하고 공유하는 기능 제공) 3. 개별 모달 Component (로그인 등 특정된 내용을 제공하고 기능 수행) 구현된 코드는 아래와 같습니다 공통 모달 Com.. 모달 (Modal) 웹 프로그래밍에서 팝업 또는 dialog 창을 모달 (modal)이라고 합니다. 모달의 가장 큰 특징은 유저의 관심을 특정 액션에 집중시키는 데 있는데요. HTML, CSS, JavaScript를 활용해서 모달을 만드는 방법을 알아보겠습니다. 구현 방법 먼저, HTML 코드부터 보겠습니다. (해당 기능에 집중하기 위해 불필요한 코드는 생략) HTML 파일의 본문 안에 모달 요소를 넣습니다. auth ❌ CSS로 모달을 화면의 흐름에서 제외시킵니다. position: absolute; 또는 position: fixed;로 구현 가능한데 저는 본문 내용의 길이와 관계없이 언제나 화면 전체를 가릴 수 있는 position: fixed; 선호합니다. 그리고 속성을 사용하여 모달 요소를 숨기면 되는데 여기서는 간.. 이전 1 다음
