[ToyPJ/Python] django 로 인스타그램 만들기 - 06 피드 생성 화면 만들기

📌 01. 빈 모달창 만들기

우선, 피드를 생성하는 화면을 만들기 위해서는 플러스 아이콘을 눌렀을 때, 사진을 업로드 할 수 있는 화면을 띄우는 기능을 만들어야 한다. 이렇게 새로운 브라우저를 열지 않고 띄우는 화면을 "모달" 이라고 한다.

이런 "모달창"을 만들어야 한다.

 

모달을 만드는 소스를 html에 추가한다. 그리고 <style> 태그에 css 를 작성하여 모달창에 어떠한 속성을 줄 것인지 작성한다.

html - 모달

• blur : 흐릿한 효과를 넣기 위한 함수
• rgba : 컬러와 Alpha 값을 조정 (Alpha 값을 조정하여 투명도를 조절할 수 있다.)

css - 모달

실행시키게 되면 빈 모달창이 생성되는데 항상 떠있게 되는데, 이 때 작성한 css의 modal_overlay 속성의 display 속성값을 none으로 주게 되면 모달창이 보이지 않게 된다. 

빈 모달창이 생성되었다.

이 점을 활용하여 알 수 있는 것은 우리가 글 생성 아이콘을 누르기 전까지는 display : none, 글 생성 아이콘을 누르면 display : flex 가 되도록 소스를 수정해주면 된다는 것이다. 이렇게 어떠한 액션을 취했을 때 결과를 달리하기 위해서는 자바스크립트 혹은 제이쿼리를 사용하면 된다.

이 두 개 중 하나를 선택해서 소스를 작성하면 되는데, 강의에서는 제이쿼리를 택했기에 나도 제이쿼리로 소스를 작성하였다. 제이쿼리를 통해 우리가 만든 웹사이트에서 어떠한 액션을 취했을 때(버튼 클릭 등) 상응하는 결과(팝업창 띄우기 등)가 나올 수 있다. 제이쿼리를 사용하기 위해서는 아래와 같이 제이쿼리를 사용하겠다고 작성해주어야 한다.

jQuery 링크를 걸어줌으로써 제이쿼리를 사용할 수 있다.

글 생성 아이콘의 id를 "nav_bar_add_box"라고 정해주었다.

"nav_bar_add_box"를 누르게 되면 "modal_overlay"의 css 속성값 "display"가 flex로 바뀌게 되고, 동시에 바디 부분의 스크롤 표시와 기능이 사라지도록 작성한다.

jQuery - 글 생성 아이콘 클릭 시 모달창 띄우기

📌 02. 모달창 꾸미기

글을 생성하는 모달창이므로 아래와 같이 꾸며보았다. "새 이미지 업로드" 문구를 상단에 추가하였고, 오른쪽 상단에는 구글 머티리얼 아이콘의 소스를 활용하여 "닫기 버튼"을 달아주었다. 또한 빈 화면에 이미지를 끌어다 놓아야하므로, "사진과 동영상을 여기에 끌어다 놓으세요" 라는 이미지를 모달창 중앙에 위치시켰다.

제법 그럴싸해진 글 생성 모달창

상단부를 "flex-direction : row" 를 통해 가로로 나열되도록 하였고, "justify-content: space-between" 을 통해 아래의 요소들의 간격을 일정하게 되도록 작성하였다. 그 후, <div>를 세 개 생성하여 "새 이미지 업로드" 문구가 가운데에 위치하도록 하였다. 

다시 새로운 상위 <div> 태그를 생성하여 "style=border-top: solid 1px"을 통해 상단에 테두리 선을 하나 만들고 "사진과 동영상을 여기다 끌어다 놓으세요" 이미지를 추가했다.

html - 모달창을 꾸며보았다.

📌 03. 또 하나의 모달창 만들기 - 이미지 드래그 앤 드랍

이제 이 화면에 이미지를 드래그해서 드랍하게 되면 드래그한 이미지가 모달창에 표시되게 되고, 우측에 글을 입력할 수 있는 화면이 생성되게 만들어야 한다. 이것을 구현하기 위해 또 다른 모달창을 하나 더 생성하기로 했다.

첫 번째 모달창에 이미지를 드래그 앤 드랍하게 되면 두 번째 새로운 모달창이 나타나도록 소스를 작성해야 한다. 여기서 주의할 점은 두 번째 모달창이 나타날 때는 첫 번째 모달창은 보이지 않는 상태로 만들어줘야 한다는 것이다.

나는 강의를 통해 아래와 같이 두 번째 모달창을 만들었다. 

이미지를 드랍했을 때 나타나는 두 번째 모달창

두 번째 모달창을 생성하는 소스는 아래와 같다. 첫 번째 모달창의 소스와 크게 다르지는 않지만, 모달창의 좌측에는 이미지가 들어가야 하고, 우측에는 "텍스트 입력 폼"과 "공유하기 버튼"이 들어가야 한다. 이미지가 들어가야 하는 "img_upload_space" <div>의 width를 줄여주고, 하위 <div>태그의 style 속성의 "border-left" 속성값을 통해 세로 테두리를 만들었다. 그리고 <div>를 통해 부트스트랩에서 찾은 텍스트 입력 폼 소스를 추가해주고, 하단에는 공유하기 버튼을 추가해주었다. 

html - 두 번째 모달창 소스

이렇게 만든 두 번째 모달창을 첫 번째 모달창에서 이미지를 드랍했을 때 나타나게 하기 위해서는 다시 제이쿼리를 사용하면 된다.

jQuery - 이미지 드래그

만약, 하나의 파일을 올렸을 때, 그 파일이 이미지이라면, 첫 번째 모달창은 "display: none"이 되고, 두 번째 모달창은 "display: flex"가 된다.

jQuery - 이미지 드랍 시 첫 번째 모달과 두 번째 모달의 변화

 

 

📚 요약하자면, 

흔히 자바스크립트, 제이쿼리를 통해 "html, css로 만든 웹페이지에 생동감을 불어 넣는다."고 한다.

html로 웹의 내용, 큰 틀을 작성하고, css로 웹을 디지인하며, 자바스크립트, 제이쿼리를 통해 웹의 동작을 구현할 수 있는 것을 알 수 있었다.

 

 

 

https://cholol.tistory.com/548

 

이 게시물의 모든 저작권은 마이쮸(mychew__)님께 있으며, 저는 오직 학습과 기록을 목적으로 포스팅한 것임을 알려드립니다.

좋은 강의 컨텐츠를 제공해주신 마이쮸님께 감사의 말씀 드립니다. (_ _)