프론트엔드/자바스크립트 (34) 썸네일형 리스트형 모달 (Modal) 웹 프로그래밍에서 팝업 또는 dialog 창을 모달 (modal)이라고 합니다. 모달의 가장 큰 특징은 유저의 관심을 특정 액션에 집중시키는 데 있는데요. HTML, CSS, JavaScript를 활용해서 모달을 만드는 방법을 알아보겠습니다. 구현 방법 먼저, HTML 코드부터 보겠습니다. (해당 기능에 집중하기 위해 불필요한 코드는 생략) HTML 파일의 본문 안에 모달 요소를 넣습니다. auth ❌ CSS로 모달을 화면의 흐름에서 제외시킵니다. position: absolute; 또는 position: fixed;로 구현 가능한데 저는 본문 내용의 길이와 관계없이 언제나 화면 전체를 가릴 수 있는 position: fixed; 선호합니다. 그리고 속성을 사용하여 모달 요소를 숨기면 되는데 여기서는 간.. 무한스크롤 (infinite scrolling) 웹 개발과정에서 이미지나 데이터를 가져와서 화면에 나열하는 작업이 필요한 경우가 많은데요. 화면의 크기가 한정되어 있어 유저에게 보여줄 수 있는 정보는 한정되어 있기 때문에 웹페이지 상에 처음 표시할 때 불필요한 정보까지 모두 서버에 요청하여 가져오는 것보다 필요한 부분만 그때 그때 요청하고 표시하는 것이 더욱 효율적입니다. 무한 스크롤은 서버에 요청하는 데이터의 양을 분할하여 필요한 부분만 화면에 표시 해 주기 때문에 상기에 언급된 기능 구현을 쉽게 구현 할 수 있는데요. 어떻게 하면 쉽게 구현이 가능한지 알려 드리겠습니다. HTML 삽입 미리보기할 수 없는 소스 이전 1 2 3 4 5 다음
