mini_project(member)_ 23.05.15 ~23.05.19

주민·2023년 5월 15일

TIL

목록 보기

1/84

2023.05.15

project 진행

담당 : 개인 카드 만들기, 2페이지 작성

개인카드 만들기

참고 URL
-> 우리팀 SA : https://teamsparta.notion.site/B-1-S-A-7ed7348a2d7f440fa29b15269d649ca9
-> API 문서 예시 : :https://docs.google.com/spreadsheets/d/1feY4ASj_TaJ2jdEkqX8vbZEsDXcnrwzm5r5AqKKT21E/edit#gid=0
-> 부트 스트랩 : https://getbootstrap.com/docs/5.0/components/buttons/
-> 색상 : https://colorhunt.co/ 5/16
-> 폰트 : https://androidtest.tistory.com/74 5/16
-> 다양한 웹구성 : http://rwdb.kr/interestedeffects/
부트스트랩으로 각 질문별 칸을 하나씩 가져오고

사진이 들어갈 왼쪽/오른쪽을 구분함

<head>
-부트스트랩 사용 코드
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
       integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
       crossorigin="anonymous"></script>
</head>
<style>
   .box { // 전체 박스 
       background-color: lightgreen;
       margin: 50px auto 30px auto;
       height: 700px;
       width: 1100px;
       text-align: center;
       padding-top: 10px;
   }
   .left { // 왼쪽
       width: 550px;
       height: 700px;
       /* background-color: antiquewhite; */
       float: left;
       padding: 5px;
   }
   .right { // 오른쪽
       width: 550px;
       height: 700px;
       /* background-color: aqua; */
       float: right;
       padding: 5px 10px;
       text-align: right; // 이름 위치 조정
   }
   .pic{ // 사진
       max-width: 530px;
       height: 500px;
       background-color: azure;
   }
</style>
<body>
   <div class="box">
       <div class="left">
           <div class="alert alert-success" role="alert">
               우리 팀만의 특징과 추구하는 궁극적인 목표<br>
               -> 대답</div>
       </div>
       <div class="right">
           <h3><b>이름</b></h3>
           <div class="pic">
           </div>
       </div>
   </div>
   </div>
</body>

2023.05.16

개인카드 만들기

수정사항 : 부트스트랩 칸에 정보 입력, 사진 추가, URL 연결
- 이미지 삽입(vs내 저장) : background: url("/member_jumin.jpg");

<style>
.jmpic {
    max-width: 530px;
    height: 400px;
    background: url("/member_jumin.jpg");
    background-size: cover;
    margin: 0px 0px 10px 0px;
}
</style>
<body>
 <div class="jmright">
    <h3><b>박주민</b></h3>
    <div class="jmpic" id="jmprofileimg"></div>
    <a id="jmblogaddr" href="https://velog.io/@j2mie561"><button type="button" class="btn btn-light">블로그
            보러가기!</button></a>
</div> 
</body>

git 사용

타팀원과 class, id 명이 겹칠 수 있음으로 다르게 정할 것
-> 보편적인 class명을 사용하고 합쳤을 경우 예상하지 못한 곳에서 오류가 날 수 있음
ex) class명이 겹치지지는 않았으나 부트스트랩 링크를 가져오니 타 팀원의 페이지가 틀어짐-> class명 바꾸니 잘 돌아감
★★ git desktop 사용
-> changes에서 commit 원하는 파일 체크 후 commit to jumin -> 브랜치를 마스터로 변경한 후 choose a branch to merge into jumin -> jumin 선택 -> 충돌 확인
-> 타 브랜치를 선택하면 해당 브랜치에 등록된 파일들이 vs에 나옴
- 타 브랜치로 이동할 경우 최근 변경내역이 있는 파일을 모두 내 브랜치의 저장 후 이동
- 타 브랜치에 있는 파일과 동일한 파일명을 가진 파일이 있을 경우 오류로 기존 브랜치로 돌아가지 못함
- changes에 데이터가 있지만 commit을 원하지 않는 경우 discard로 삭제 할 수 있음
- 충돌된 파일이 있어 오류가 난 경우 충돌된 부부을 지우거나 이미 지워진 파일이라면 해당 파일만 다시 commit

2023.05.17

page2 만들기

230516 주민(3), 진희(1~3)

1.로고-(1페이지연결)
2.표 만들어서 오각형 위치로 원형 버튼 만들기
3.원형 버튼 디자인, 호버 등
4.2p -> 3p 원형 버튼 클릭하여 링크 연결 -> 문의

호버링

기존에 만든 호버링은 div에서 글씨(팀원1)가 굵어지는 방식이었어서 사진A -> 사진B로 변경, 다른 기능을 위해 button으로 수정했다.
(flask를 통해 호버링 등의 이벤트 작업을 하려면 버튼으로 넣어야 한다)
css는 style에 hover을 이용, swich는 script를 이용

이미지 변경(css)
-> 이미지 크기 지정, 바뀌기 전 후 이미지 삽입

<style>
.btn1 {
   width: 250px;
   height: 200px;
   background-position: 40%, 0;
   background-size: 250px 200px;
   background-image: url("https://images.imyfone.com/kr/assets/article/change-location/pokemonster-ditto.jpg");
}
.btn1:hover {
   background-size: 250px 200px;
   background-image: url("../images/aymon.jpg");
}
</style>
<body>
 <button  class="btn1" id='member1'></button>
</body>

이미지 변경(swich)
-> onmouseover/onmouseout 함수 자체에 매개변수로 this값을 주고 함수로 실행
- 매개변수 : 함수 호출할 때 참고하라고 넣어주는 변수
- this : 함수 호출한 개체 (누가 불렀는지)
참고 URL
https://wecanit.tistory.com/19

* 처음 이미지는 html에 img에 두고 onmouseover를 하거나 out을 하는 경우를 script로 가져옴

<script>
    function mouse_over(mem) { //mem이란 변수로 html의 id 가져옴
        switch (mem) {
            case "member1": // this.id=mem이 member1이라면
                $('#pic1').attr("src",  "../static/images/aymon.jpg"); // id가 pic1인 곳에 attr안에 있는 데이터를 가져옴
                break;
            case "member2":
                $('#pic2').attr("src", "../static/images/jwmon.jpg");
                break;
            case "member3":
                $('#pic3').attr("src", "../static/images/jsmon.png");
                break;
            case "member4":
                $('#pic4').attr("src", "../static/images/jhmon.jpg");
                break;
            default:
                $('#pic5').attr("src", "../static/images/jmmon.jpg");
                break;
        }

    }

    function mouse_out(mem) {
        switch (mem) {
            case "member1":
                $('#pic1').attr("src", "https://images.imyfone.com/kr/assets/article/change-location/pokemonster-ditto.jpg");
                break;
            case "member2":
                $('#pic2').attr("src", "https://images.imyfone.com/kr/assets/article/change-location/pokemonster-ditto.jpg");
                break;
            case "member3":
                $('#pic3').attr("src", "https://images.imyfone.com/kr/assets/article/change-location/pokemonster-ditto.jpg");
                break;
            case "member4":
                $('#pic4').attr("src", "https://images.imyfone.com/kr/assets/article/change-location/pokemonster-ditto.jpg");
                break;
            default:
                $('#pic5').attr("src", "https://images.imyfone.com/kr/assets/article/change-location/pokemonster-ditto.jpg");
                break;
        }
    }
</script>
<body>
<div calss="btn1">
    <button onmouseover="mouse_over(this.id)" onmouseout="mouse_out(this.id)" id='member1'>
        <img id='pic1'
            src="https://images.imyfone.com/kr/assets/article/change-location/pokemonster-ditto.jpg"
            , width="200px">
    </button>
</div>
</body>

2023.05.18

팀원 공유 tip
1. app.py 자주 사용하는 라이브러리(한번에 설치)
pip install pymongo dnspython flask requests

git을 통해 flask를 포함한 라이브러리 파일을 pull한 경우 라이브러리를 설치하라는
경고 문구가 뜨긴 하나 무시하고 터미널에 "python app.py" 입력하면 실행됨
DB Atlas 오류!
8. https://teamsparta.notion.site/FAQ-863c4b20c36944e29d405c7acd730ac2
Q. DB Atlas 사용시, DB 접속권한 업데이트하기 - app.py 실행시 DNS 관련한 에러 메시지가 뜨면서 접속이 안됩니다. (예전에는 접속이 되었는데 지금은 DB 접속이 안되어요. AWS 에서는 접속이 안되어요 포함)

개인카드 만들기(수정)

기존에 만든 카드가 너무 기본이라 수정했다... 만드는 건 둘째치고 디자인 생각이 안나서 고생했다. 일단 만족스러움

배경 / div 박스 / 버튼 css넣은거
기존에 단색 배경에서 단색 head + 이미지로 수정했다
div로 해서 두개 합쳤음

<style>
.jmbox {
    background : url("../images/excel.jpg.png");
    border-radius: 50px; // 전체 모양을 둥글게
    height: 600px;
    width: 1200px;
}
.jmhead{
    background-color: #379237;
    border-top-left-radius: 50px; // 위에 부분만 둥근효과를 줌
    border-top-right-radius: 50px; // 위에 부분만 둥근효과를 줌
    height: 80px;
    width: 1200px;
}
</style>

div 박스 / 버튼 css넣은거
div로 작은 박스 만들어서 겹치기, 특정위치 맞추기로 만들었다

<style>
.jmleft {
    width: 550px;
    height: 480px;
    float: left;
    margin: 15px;
    /* border: 1px solid; */
    position: relative;
}

.jmsbox1{
    text-align: left;
    padding: 10px 0 0 10px;
    width: 340px;
    height: 200px;
    border: 1px solid gray;
    margin-top: 20px;
    margin-left: 20px;
    background-color: white;
    position: absolute;
}
</style>
.jmleft {
    width: 550px;
    height: 480px;
    position: relative; //바탕인 class에 넣어주고
}

.jmsbox2{
    text-align: left;
    transform: translate(260px, 190px); // 위치 맞추기
    padding: 10px 0 0 10px;
    width: 250px;
    height: 160px;
    border: 1px solid gray;
    background-color: white;
    position: absolute; // 올라가는 거에 class 넣어줌
}
<body> // html은 기본만 함
<div class="jmsbox2">
    <p><b>객관적인 자신의 장점</b><br>
        <br>
        사실 장점이자 단점이지만<br>
        잘 안되는게 있으면 될 때까지<br> 합니다
    </p>
</div>
</body>

버튼 css넣은거
버튼... 부트스트랩만 봐서 못 꾸밀줄 알았다. 생각보다 쉽게 바꿨다.

<style>
.btnst{
    background-color: #379237;
    color: white;
    border:none;
    border-radius: 10px;
    transform: translate(150px, 375px);
    padding: 10px;
}
</style>

2023.05.19

프로젝트 발표날이라 오전에는 진행한 거 보고 오후에는 발표했다.

프로젝트 피드백

배포 하기 힘든데 배포까지 진행 잘했다
일정 맞춰 안되는 부분은 빼고, 분담하는 부분 좋았다
- REST api의 url는 데이터 이름으로 의미 있는 이름을 지어야 함
- 브랜치 이름은 작업하는 기능 단위로 하는 것이 좋다
- 카멜(자바) : ClickBtn
- 스네이크(파이썬) : Click_Button
본인 프로필에 깃허브, 기술 스택 써놓으면 좋다

주민

다음 포스트

mini_project(member)_ 23.05.15 ~23.05.19

TIL

2023.05.15

project 진행

개인카드 만들기

2023.05.16

개인카드 만들기

git 사용

2023.05.17

page2 만들기

호버링

2023.05.18

개인카드 만들기(수정)

2023.05.19

mini_project(movie)_23.05.08

0개의 댓글

관련 채용 정보