프론트엔드 (108) 썸네일형 리스트형 앵귤러 모달 웹프로그로밍에서 모달은 팝업이나 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; 선호합니다. 그리고 속성을 사용하여 모달 요소를 숨기면 되는데 여기서는 간.. 무한스크롤 (infinite scrolling) 웹 개발과정에서 이미지나 데이터를 가져와서 화면에 나열하는 작업이 필요한 경우가 많은데요. 화면의 크기가 한정되어 있어 유저에게 보여줄 수 있는 정보는 한정되어 있기 때문에 웹페이지 상에 처음 표시할 때 불필요한 정보까지 모두 서버에 요청하여 가져오는 것보다 필요한 부분만 그때 그때 요청하고 표시하는 것이 더욱 효율적입니다. 무한 스크롤은 서버에 요청하는 데이터의 양을 분할하여 필요한 부분만 화면에 표시 해 주기 때문에 상기에 언급된 기능 구현을 쉽게 구현 할 수 있는데요. 어떻게 하면 쉽게 구현이 가능한지 알려 드리겠습니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러? 앵귤러는 웹 어플리케이션 개발 시 필요한 다양한 기능 (routing, forms validation, animations)들을 탑재한 JavaScript framework인데요. Component 구현방식을 통해 코드의 재사용성 향상으로 중복적인 작업을 줄여주고 생산성을 향상시켜주는 등 다양한 장점이 있습니다. 앵귤러의 시작과 다양한 기능들을 살펴 보도록 하겠습니다. List of Contents [ 소개 ] [ 장점, 단점 ] [ 주요기능 ] [ 어떻게 작동할까? ] [ 누가 사용할까? ] [ 마무리 ] [ 참고자료 ] 소개 앵귤러는 2010년 10월 20일 더 나은 웹 개발 환경을 제공하기 위해 Google (개발자: Misko Hevery)에 의해 Angular.Js (ver 1.0) 라는 이름으.. 이전 1 ··· 11 12 13 14 다음
