1주차 : [About me] 로그인&회원가입 페이지, 이미지 드래그&드롭 파일 업로드 구현(feat. Phython)

프로젝트 : 오늘 한 것

1. 메인 화면에 회원가입 버튼 만들고 회원가입 페이지로 넘어가도록 설정

2. 로그인, 회원가입 페이지 app.py 팀원의 app.py에 병합해서 로그인과 회원가입 가능하도록 기능 구현

3. 이미지 드래그 & 드롭 파일 업로드 만들기

 

참조) https://www.youtube.com/watch?v=Wtrin7C4b7w&t=219s 

소스코드) https://codepen.io/dcode-software/pen/xxwpLQo 

Simple Drag and Drop File Upload Tutorial - HTML, CSS & JavaScript

 

회고 :

float:left; 후 드래그 앤 드롭 박스에 max-width를 주니 모양이 찌그러졌음. 

[Float 쓰는거 보기]

https://codepen.io/sinbi/pen/NWWvWLj

NWWvWLj

완성

.wrap {
  width: 600px;
  margin: auto;
}

.drop-zone {
  float: left;
  width: 33%;
  max-width: 150px;
  height: 150px;
  padding: 5px;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed #959596;
  border-radius: 10px;
  margin: 10px 10px;
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
  margin-left:15px;
}

.drop-zone__thumb {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  position: relative;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
}

완성 코드!!