Django:제로부터 시작하는 인스타그램 만들기 - clone instagram #4
- Course/django : 제로부터 시작하는 인스타그램
- 2021. 9. 18. 02:29
2021.09.15 - [Study/python] - Django:제로부터 시작하는 인스타그램 만들기 - clone instagram 목차
피드 업로드를 위한 모달 만들기
이번 포스팅에서는 피드를 업로드하는 화면을 만들어보겠습니다. 실제 인스타그램을 실행시켜서 어떻게 피드를 생성하는지 흐름을 한번 살펴봅니다.
PC에서 피드 생성을 누르면 일단 스크린샷부터 올리네요.
상당히 깔끔한 UI/UX입니다. 예전 게시판 같은 경우 막 사진 올리고 글 쓰고 한 화면에서 다하게 만들었는데, 인스타그램은 사진 딱 올리면 그 이후에 글 쓰게 나오고 사용자한테 뭘 해야 하는지 정확하게 알려주죠. 이게 아마 UX 쪽에서는 one screen one thing 이였나? 그럴 겁니다. 한 화면에서 사용자가 할 수 있는 행동을 하나씩 제한해서 깔끔하게 가는 거죠. 이게 정답인 건 아니고 요즘 트렌드가 요렇답니다 ㅋㅋ 원 스크린 원 액션이었나..?
음 그럼 일단 피드 업로드를 눌렀을 때, 사진을 업로드할 수 있는 창을 뜨게 만들면 됩니다. 여기서 한 가지 고민 포인트가 있는데, 인스타처럼 피드 생성을 눌렀을 때 기존 화면 위에 새로운 창이 뜨는 기능 - 팝업 또는 모달 - 을 개발하기 위해서는 자바스크립트를 사용해야 합니다. 근데 파이썬과 장고를 사용한 클론 코딩에서 굳이 자바스크립트까지 배워야 할까?라는 생각이 들었습니다. 근데 만약 안 쓰면 UI/UX가 조금 후져지긴 합니다. 만약 프론트 개발이 목적이라면 자바스크립트까지 확실히 하는 게 좋긴 한데,,
일단 제가 만들어보고 얼마나 복잡한지에 따라서 사용할지 말지를 결정해야 할 것 같습니다. ㅋㅋㅋ
그럼 모달을 만들어볼까요? 그전에 팝업과 모달의 차이점을 알고 가야 할 것 같은데, 팝업은 브라우저에서 특정 웹페이지에 들어갔을 때 새로운 브라우저가 뜨면서 새로운 화면이 뜨는 게 팝업입니다. 쇼핑몰 같은 사이트 들어가면 광고나 이벤트 같은 게 팝업으로 막 뜨는 걸 볼 수 있습니다. 이런 거 귀찮아서 다 닫기 누르죠?
모달은 팝업과 달리 새로운 브라우저창이 뜨지 않습니다. 대신 기존 화면 위에 새로운 화면이 그려지죠. 옛날에는 어떤 사이트 들어가면 팝업이 막 3~5개 정도 뜨고 그랬는데 팝업 차단 기능도 생기고 팝업을 극혐 하는 사람들도 생기고 해서 점점 모달을 사용하는 트렌드로 가고 있습니다.
자 그럼 피드 생성 모달을 만들어봅시다.
CSS
.modal_overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
}
.modal_window {
background: white;
backdrop-filter: blur(13.5px);
-webkit-backdrop-filter: blur(13.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
width: 800px;
height: 600px;
position: relative;
padding: 10px;
}HTML
<div class="modal_overlay">
<div class="modal_window">
</div>
</div>
CSS는 style영역에 넣어주시고 HTML은 </body> 바로 윗부분에 넣어줍니다. 사실 html은 어디에 넣든 상관은 없습니다. ㅎㅎ
CSS에 못 보던 게 많이 추가되었는데, 하나씩 지워보면서 어떤 역할을 하는지 테스트해봅시다. blur는 흐릿한 효과를 넣기 위한 함수입니다. 흔히 '블러 처리한다'라고 말할 때의 그 블러입니다. rgba는 색을 정하는 RGB 컬러와 추가로 Alpha값을 조정할 수 있습니다. 알파 값을 조정해서 투명도를 설정할 수 있습니다. border는 지난번에 했던 것처럼 테두리를 주는 옵션이고 border-radius는 모서리를 둥글게 만드는 CSS입니다.
이제 실행을 해보면 아래와 같이 나옵니다.
빈 모달 창이 뜹니다. 하지만 클릭해도 아무 일도 일어나지 않고, 우리가 클릭했을 때 뜨는 것이 아니라 실행하자마자 중앙에 떡하니 위치하고 있습니다. 그리고 스크롤을 하면... 모달 창은 고대로 있습니다. ㅋㅋㅋ
다시 한번 인스타그램에서 피드 생성을 눌러보면 생성을 눌러 모달 창이 뜨고, 스크롤이 없어지는 것을 볼 수 있습니다. 우리도 해봅시다 ㅎㅎ
아니 그전에 우리가 클릭했을 때만 모달 창이 뜨도록 해봅시다. 상단에 내비 바에서 +를 눌렀을 때 모달 창이 뜨도록 해봅시다. 우리가 머티리얼 아이콘으로 add_box로 만들었었군요. 이제 이 아이콘을 눌렀을 때 이벤트가 발생하도록 만들어봅시다.
우선 add_box 태그에 id 속성을 넣어줍니다.
id를 넣어주는 이유는 자바스크립트에서 해당 아이콘을 찾을 수 있도록 해주기 위해서입니다. 자바스크립트에서 이제 add_feed라는 id를 가진 아이콘을 누르면 모달이 나타나도록 코딩할 수 있습니다. modal이 나타나고 사라지고도 제어하기 위해서는 modal에도 id값을 추가해야 합니다.
자바스크립트는 body위에 스크립트는 넣는 공간을 만들어서 넣을 예정입니다. 이 스크립트 역시 위치가 그렇게 중요하지 않긴 한데, 보통 제일 하단에 코딩하곤 합니다. ㅎㅎ
<script>
const modal = document.getElementById("modal_add_feed");
const buttonAddFeed = document.getElementById("add_feed");
buttonAddFeed.addEventListener("click", e => {
modal.style.display = "flex";
});
</script>
"요기" 부분에 위 스크립트를 넣습니다. <script>는 있으니까 그 안에 내용만요 ㅎㅎ
const modal = document.getElementById("modal_add_feed"); 라는 부분은 modal이라는 상수를 만드는 코드입니다. 상수는 변하지 않는 값으로 한번 선언하면 그 뒤로 값을 바꿀 수 없습니다. 반대로 변수는 값을 항상 바꿀 수 있어서 변수입니다. 여기는 modal이라는 것을 만들었는데 이 안에 넣은 거는 ID로 찾아서 넣겠다. 그 ID는 "modal_add_feed"이다. 요런 뜻입니다.
이제 자바스크립트에서 modal을 쓰면 우리가 HTML로 만든 모달을 가리킵니다.
const buttonAddFeed = document.getElementById("add_feed"); 코드도 마찬가지로 add_feed라는 id를 가진 태그를 buttonAddFeed라는 상수에 넣습니다. 앞으로 buttonAddFeed를 쓰면 우리가 만든 add_box 아이콘을 가리킵니다.
그다음 줄이 핵심 로직인데요, buttonAddFeed에다가 .addEventListener를 붙였습니다. 이벤트 리스너를 붙이면 buttonAddFedd에 무슨 일이 일어날 경우 괄호 안에 코드가 실행됩니다. 여기서는 그 이벤트가 "click"인데요, 버튼을 클릭하면 괄호 안에 코드가 실행되는데, 그 코드는 modal의 style, 즉 CSS에서 display옵션을 "flex"로 바꿔준다는 의미입니다.
근데 modal css를 보면 지금도 flex로 되어있습니다. flex로 되어있는 것을 flex로 바꾸면 의미가 없기 때문에 기존에 css를 none으로 바꿔줍니다. none으로 바꾸면 화면에서 보이지 않습니다.
이제 실행해 볼까요?
눌렀을 때 모달이 정상적으로 뜨는군요. 하지만 아직 모달이 뜨고 스크롤을 내리면 모달이 사라집니다 ㅋㅋ 이제 스크롤을 없애보겠습니다. 한 줄만 추가하면 됩니다.
<script>
const modal = document.getElementById("modal_add_feed");
const buttonAddFeed = document.getElementById("add_feed");
buttonAddFeed.addEventListener("click", e => {
modal.style.display = "flex";
document.body.style.overflowY = "hidden"; // 스크롤 없애기
});
</script>CSS 중에 overflow-y값을 hidden으로 넣으면 스크롤이 없어집니다. 이제 다시 실행해서 모달을 켜면 스크롤이 없어집니다.
이제 모달을 띄우기를 했으니 닫기도 해봅시다. 모달을 닫기 위해 일단 모달에 닫기 버튼을 넣어볼까요?
CSS
.modal_title{
display: flex;
flex-direction: row;
justify-content: space-between;
font-weight: bold;
font-size: 20px;
}
.modal_title_side{
flex: 0 0 40px;
text-align: center;
}
HTML
<div id="modal_add_feed" class="modal_overlay">
<div class="modal_window">
<div class="modal_title">
<div class="modal_title_side"></div>
<div> 새 게시물 </div>
<div class="modal_title_side">
<span id="close_modal" class="material-icons-outlined">
close
</span>
</div>
</div>
</div>
</div>
modal_title로 모달 창에 타이틀 영역을 주었습니다. 그런데 modal_title 아래 div가 3개인 것을 확인할 수 있는데요, 하나는 중앙 텍스트고 하나는 X아이콘을 위한 div인데 제일 첫 번째는 뭘까요?
flex-direction이 row일 때 가로로 정렬되는 것을 알고 계시죠? 그리고 justify-content가 space-between이면 공간을 차지할 때 각 요소들끼리 균등하게 공간을 잡고 갑니다. 만약 div가 2개인 상태에서 space-between옵션을 주면 "새 게시물"은 왼쪽 x는 오른쪽에 위치하게 됩니다. 근데 우리가 원하는 것은 텍스트가 가운데 오는 거잖아요? 그래서 빈 div를 하나 만들어서 맨 앞에 위치시키면 "새 게시물" 글자가 중앙으로 오게 됩니다. 가짜로 비어있는 div를 하나 만들어서 정렬을 맞추는 거지요 ㅎㅎ
실제 인스타그램도 개발자 모드로 보면 이렇게 되어있습니다 ㅎㅎ
이제 아까 자바스크립트로 모달을 띄운 것과 같은 방법으로 모달을 닫는 자바스크립트 코드를 추가하겠습니다.
<script>
// 모달 띄우기 코드
const modal = document.getElementById("modal_add_feed");
const buttonAddFeed = document.getElementById("add_feed");
buttonAddFeed.addEventListener("click", e => {
modal.style.display = "flex";
document.body.style.overflowY = "hidden"; // 스크롤 없애기
});
// 모달 닫기 코드
const buttonCloseModal = document.getElementById("close_modal");
buttonCloseModal.addEventListener("click", e => {
modal.style.display = "none";
document.body.style.overflowY = "visible";
});
</script>
자 이제 닫기도 동작합니다.
근데 또 문제가 있습니다. 스크롤을 막는 건 잘 되는데 스크롤을 이미 내린 상태에서 피드 생성을 하면 모달이 안 보이네요ㅋㅋㅋ 아마 모달이 항상 제일 위에 생성돼서 그런가 봅니다. 이럴 땐 어떻게 해야 할까요?
사용자가 어떤 위치에 있던 모달을 화면 가운데로 보여주면 됩니다. 그럼 우리가 알아야 할 것은 사용자가 지금 스크롤을 어디까지 했는지입니다. 자바스크립트에서 사용자가 스크롤을 얼마나 했는지 구할 수 있습니다.
모달 생성하는 코드에 아래 코드를 추가해봅시다.
// 모달 띄우기 코드
const modal = document.getElementById("modal_add_feed");
const buttonAddFeed = document.getElementById("add_feed");
buttonAddFeed.addEventListener("click", e => {
modal.style.display = "flex";
document.body.style.overflowY = "hidden"; // 스크롤 없애기
console.log(window.pageYOffset + " 위치"); // 로그 찍기
});
console.log를 이용해서 로그를 찍어볼 건데요, 로그란 시스템을 개발하거나 운영할 때 사용자나 개발자한테 정보를 주기 위해 남기는 정보를 말합니다. console.log를 이용하면 개발자 모드에서 우리가 적은 로그를 확인할 수 있습니다. window.pageYOffset은 현재 화면에 y 위치를 알려줍니다. 이렇게 하고 한번 피드 만들기 버튼을 눌러봅시다. 물론 개발자 모드를 켜고요!
콘솔에 "0 위치"라고 찍혔습니다. 스크롤을 움직이지 않았기 때문에 위치가 0입니다. 그럼 스크롤을 약간 내려서 다시 해볼까요?
휠을 한번 내렸더니 200이 되었습니다. 오호... 그럼 이 위치 값을 이용해서 모달의 위치를 바꿔주면 되겠죠?
// 모달 띄우기 코드
const modal = document.getElementById("modal_add_feed");
const buttonAddFeed = document.getElementById("add_feed");
buttonAddFeed.addEventListener("click", e => {
modal.style.top = window.pageYOffset + 'px'; // top을 이용해 시작 y위치를 바꿔줌
modal.style.display = "flex";
document.body.style.overflowY = "hidden"; // 스크롤 없애기
});
css에서 top 옵션을 스크롤의 위치로 바꿔줬습니다. 이제 스크롤을 내려도 정확한 위치에 모달이 뜨게 됩니다. 그냥 숫자를 넣은 게 아니라 뒤에 'px'를 주어야 제대로 동작합니다. ㅎㅎ
이미지 업로드 화면 만들기
이미지를 드래그해서 업로드할 수 있게 업로드 화면을 만들어야겠죠?
만든 모달 창 타이틀 아래 공간을 파일을 업로드할 수 있는 공간으로 바꿔봅시다.
CSS
.modal_image_upload{
outline: 2px dashed black ;
outline-offset:-10px;
text-align: center;
transition: all .15s ease-in-out;
width:780px;
height: 548px;
}
HTML
<div id="modal_add_feed" class="modal_overlay">
<div class="modal_window">
<div class="modal_title">
<div class="modal_title_side"></div>
<div> 새 게시물 </div>
<div class="modal_title_side">
<span id="close_modal" class="material-icons-outlined">
close
</span>
</div>
</div>
<div class="modal_image_upload">
</div>
</div>
</div>
HTML에서는 modal_image_upload div하나만 추가되었습니다. ㅎㅎ 이렇게 하고 실행하면 아래와 같이 모달 창이 바뀝니다.
이제 파일을 드래그했을 때 액션을 코드로 만들어야 하는데요, 모달 창은 자바스크립트로 만들었는데 드래그 엔 드롭은 Jquery(제이쿼리)로 만들 예정입니다. 제이쿼리는 자바스크립트와 비슷한데 필요한 몇몇 기능들을 짧게 사용할 수 있도록 만들어주는 라이브러리입니다. 자바스크립트로 10줄 넘는 코드도 제이쿼리 사용 시 1~2줄로 가능하기 때문에 많이 사용하고 있는 도구입니다.
제이쿼리를 사용하려면 헤더에 아래 한 줄을 추가해야 합니다.
...
<!-- 요기에 구글 머티리얼 아이콘 -->
<link
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet">
<!-- jquery 사용하기 위해 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>여기에 진스타그램 만들꺼임 </title>
</head>
그리고 아래 자바스크립트를 만들었던 곳에 jquery 코드를 써줍니다.
<!-- Optional JavaScript; choose one of the two! -->
<script>
// 모달 띄우기 코드
const modal = document.getElementById("modal_add_feed");
const buttonAddFeed = document.getElementById("add_feed");
buttonAddFeed.addEventListener("click", e => {
modal.style.top = window.pageYOffset + 'px'; // top을 이용해 시작 y위치를 바꿔줌
modal.style.display = "flex";
document.body.style.overflowY = "hidden"; // 스크롤 없애기
});
// 모달 닫기 코드
const buttonCloseModal = document.getElementById("close_modal");
buttonCloseModal.addEventListener("click", e => {
modal.style.display = "none";
document.body.style.overflowY = "visible";
});
<!-- jquery 부분 -->
$('.modal_image_upload')
.on("dragover", dragOver)
.on("dragleave", dragOver)
.on("drop", uploadFiles);
function dragOver(e){
e.stopPropagation();
e.preventDefault();
if (e.type == "dragover") {
$(e.target).css({
"background-color": "black",
"outline-offset": "-20px"
});
} else {
$(e.target).css({
"background-color": "white",
"outline-offset": "-10px"
});
}
}
function uploadFiles(e){
e.stopPropagation();
e.preventDefault();
e.dataTransfer = e.originalEvent.dataTransfer;
var files = e.dataTransfer.files;
if (files.length > 1) {
alert('하나만 올려라.');
return;
}
if (files[0].type.match(/image.*/)) {
$(e.target).css({
"background-image": "url(" + window.URL.createObjectURL(files[0]) + ")",
"outline": "none",
"background-size": "100% 100%"});
}else{
alert('이미지가 아닙니다.');
return;
}
}
</script>
자바스크립트랑 살짝 생긴 게 다르죠? 먼저 제일 위에 $('.modal_image_upload')는 modal_image_upload라는 클래스를 가지고 있는 태그를 가져온다는 의미입니다. 자바스크립트에서는 id값으로 찾아왔었는데 jquery에서는 클래스로 찾아왔습니다. 물론 id로도 찾아올 수 있습니다. modal_image_upload에 id값으로 modal_image_upload를 주고 $(#modal_image_upload)라고 쓰면 id로 찾을 수 있습니다. #을 쓰면 id, .을쓰면 클래스입니다.
뒤에 on()이 여러 개 붙어있는데 이건 자바스크립트에서 이벤트 리스터랑 비슷하다고 생각하시면 됩니다. on 하고 dragover, dragleave, drop이 있는데 각각 마우스를 드래그해서 올렸을 때, 드래그해서 밖으로 나갔을 때, 드롭했을 때(클릭을 놨을 때) 특정 함수를 실행시키는 내용입니다. 즉 마우스로 드래그해서 해당 div위에 올리면 dragOver라는 함수가 실행됩니다.
아래는 dragover랑 uploadfile이라는 함수가 있습니다. dragover는 마우스를 드래그한 상태에서 위로 올라오거나 나갈 때 실행되는 함수입니다. 안에 if문을 이용해서 만약 마우스가 올라가면 $(e.target)의 css를 변경시켜줍니다. e가 뭘까요?
function dragOver(e){
...
}
dragOver라는 함수를 보면 이름 옆에 괄호로 e가 적혀있습니다. 보통 함수 옆에 괄호는 'input', '인자 값', 'argument' 등으로 불리는데 함수 안에서 사용할 수 있는 특정 값입니다. 즉 우리가 dragOver라는 함수를 쓸 때 dragOver('A')를 넣으면 e는 A가 되는 거고 dragOver('modal')을 넣으면 e는 modal이 됩니다.
그런데 이상하네요. 실제로 함수를 사용한 곳에는 아무것도 넣지 않았습니다.
$('.modal_image_upload')
.on("dragover", dragOver)
.on("dragleave", dragOver)
.on("drop", uploadFiles);괄호 없이 그냥 쌩으로 함수를 적었습니다.
이럴 때 개발자들은 '문서'를 찾아보게 됩니다. (혹은 구글링?)
.on() | jQuery API Documentation
요 링크에 가면 jquery에서 on이 어떻게 동작하는지 자세하게(영어로) 나와있습니다.
쭉 내리다 보면
요런 게 나와있는데요, 대충 on안에 함수를 호출할 때 아무것도 안 넣으면 event.data를 전달한다는 내용입니다.
실제로 무슨 값이 나오는지 알고 싶으면 이전에 사용했던 '로그'를 써보면 됩니다.
function dragOver(e){
console.log(e);
...위처럼 함수가 실행되고 바로 e를 로그로 찍어봅시다. 이제 모달 화면에 아무 파일이나 드래그해보면 로그가 나옵니다.
아무 이미지 파일이나 한번 드래그해서 올려보세요. 로그가 막 올라오는 것을 확인할 수 있습니다. 로그 찍힌 거를 보면 무슨 이벤트에 대한 정보가 들어있는 것 같아요. 여기서 target을 보면 div.modal_image_upload를 가리키고 있습니다. 우리가 만든 div를 말하네요.
이제 e에 어떤 내용이 들어있는지 대충 알았으니 아래 코드 보기가 쉬워졌습니다.
if (e.type == "dragover") {
$(e.target).css({
"background-color": "black",
"outline-offset": "-20px"
});
} else {
$(e.target).css({
"background-color": "white",
"outline-offset": "-10px"
});
}
e.type이 dragover일 경우, 즉 파일을 드래그해서 올릴 경우에는 e.target - div.modal_image_upload의 CSS를 변경시킵니다. e.type이 dragover가 아닐 경우, 여기서는 dragleave겠죠? 왜냐면 dragOver라는 함수는 dragover일 때랑 dragleave일 때 실행되기 때문에 둘 중 하나입니다. dragleave일때는 다시 css를 원상복구 시킵니다.
여기까지 코드가 파일을 드래그해서 마우스를 div위에 올리거나 나가거나 하는 코드입니다.
그 아래 uploadFiles 함수는 마우스를 놨을 때, 즉 drop 했을 때 실행되는 함수입니다.
function uploadFiles(e){
e.stopPropagation();
e.preventDefault();
e.dataTransfer = e.originalEvent.dataTransfer;
var files = e.dataTransfer.files;
if (files.length > 1) {
alert('하나만 올려라.');
return;
}
if (files[0].type.match(/image.*/)) {
$(e.target).css({
"background-image": "url(" + window.URL.createObjectURL(files[0]) + ")",
"outline": "none",
"background-size": "100% 100%"});
}else{
alert('이미지가 아닙니다.');
return;
}
}
이제부터가 본격적인데요, 실제로 파일을 백엔드까지 업로드하는 것은 아닙니다. 브라우저에서(즉 프론트에서)파일을 읽어서 들고 있는 건데요.
일단 파일을 가져오는 건 아래 두 줄입니다.
e.dataTransfer = e.originalEvent.dataTransfer;
var files = e.dataTransfer.files;
e.dataTransfer 어쩌고 저쩌고 하는데 결론적으로는 files에 여러분이 드래그한 파일이 들어가게 됩니다. 첫 줄은 jquery특성상 적어야 하는 코드인데 아직은 모르셔도 됩니다.
그 아래 if문에서는 파일이 만약 2개 이상이면 하나만 올리라고 경고창을 띄워줍니다. 여기서 우리는 var files가 '리스트'형태라는 것을 알 수 있는데요, 마우스로 파일을 하나를 드래그할 수도 있고 여러 개 드래그할 수도 있으니 files에는 우리가 드래그한 파일이 리스트 형태로 들어가게 됩니다. ['파일 1', '파일 2'...] 요런 식으로?
보통 모든 언어에서 리스트에 길이를 알고 싶을 때 리스트 이름. length를 쓰게 됩니다. 여기서도 files.length > 1이 의미하는 것이 길이가 1 초과하는지 비교하는 코드입니다. if 아래 있는 alert은 경고창을 띄워주는 코드인데 직접 2개 이상을 드래그해보시면 바로 어떤 화면인지 감을 잡을 수 있습니다.
두 번째 if문은 파일이 이미지인지 체크하는 비 교문입니다. 이미지가 아니면 경고창을 띄워줍니다.
만약 이미지라면 e.target의 css를 조금 수정해주는데요, 어떻게 수정하냐면 올린 이미지 파일을 background로 지정해줍니다. 즉 올린 이미지 파일을 표시해주는 역할을 합니다.
네 이제 코드를 설명 안 한 게 딱 두 줄있는데요.
e.stopPropagation();
e.preventDefault();요겁니다. uploadFiles와 dragOver 함수 시작할 때 이 두 줄이 써져있습니다. 요건 html의 태그들의 전파에 관한 이슈인데요. 전파라고 하면 뭔 소린가 싶습니다. 저도 그렇고요 ㅋㅋㅋ
대충 어떤 느낌이냐면.. 우리는 팝업을 사용하지 않고 모달을 사용했습니다. 팝업은 새 창을 띄우지만 모달은 현재 화면에 div를 위에 띄우는 구조입니다. 그럼 마우스를 클릭할 때 겹쳐져 있는 div들이 다 클릭이 되면 어떨까요? 겹쳐져 있는 div 중에서 제일 상위에 있는 div만 클릭하게 하고 싶다면 뭔가 설정을 해줘야 하겠죠? 그 역할을 하는데 바로 위 코드입니다. 개념이 상당히 어렵죠?
상세한 설명은 아래 블로그에 잘 되어있습니다.
https://programmingsummaries.tistory.com/313
우리는 프론트를 자세히 배우는 목적이 아니니 가볍게 알고 넘어갑시다.
이번 포스팅에서 파일 업로드를 끝내려고 했는데 생각보다 글이 길어졌네요.
프론트에서 사진 올리는 것까지 하고 실제로 백엔드로 넘기는 건 다음 포스팅에서 하도록 하겠습니다.
수고하셨습니다. :)
'Course > django : 제로부터 시작하는 인스타그램' 카테고리의 다른 글
| Django:제로부터 시작하는 인스타그램 만들기 - clone instagram #6 (24) | 2022.03.02 |
|---|---|
| Django:제로부터 시작하는 인스타그램 만들기 - clone instagram #5 (20) | 2021.10.16 |
| Django:제로부터 시작하는 인스타그램 만들기 - clone instagram 목차 (0) | 2021.09.15 |
| Django:제로부터 시작하는 인스타그램 만들기 - clone instagram #3 (6) | 2021.09.15 |
| Django:제로부터 시작하는 인스타그램 만들기 - clone instagram #2 (3) | 2021.09.01 |