[TIL] 2023.03.14 / 팀 프로젝트 :: 2

1   로그인 박스

동작이 우선이기 때문에 CSS는 미뤄놓음

1) html 코드
        <div class="loginbox">
            <div class="wrap">
                <div class="box_text">수강신청</div>
                <br>
                <div class="box_input">
                    <input type="text" , size="15px">
                    <br>
                    <input type="password" , size="15px">
                </div>
                <div class="btn">
                    <section class="button_box">
                        <button onclick="location.href=('index_detail_1.html')">
                            로그인</button>
                    </section>
                </div>
            </div>
        </div>

2) CSS
.loginbox {
    background-color: lightgray;
    width: 250px;
    height: 200px;
    
    margin-left: 70%;
}

.box_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding-top: 10%;
}

.box_input {
    padding: 0px 0px 0px 10%;

    float: left;
}

.button_box {
    width: 80px;
    height: 90px;

    float: left;
    padding-left: 15px;
}

.button_box > button {
    width: 100%;
    height: 58px;
    border: none;
    background-color: rgba(220, 220, 220, 1);
    color: black;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
}

 

1.1   로그인 버튼 호버 / 연결된 페이지로 넘어가기

.button_box > button:hover {
    background-color: rgba(220, 20, 60, 1);
    color: white;
}

♬ 마우스를 올리면 색이 변경되는 호버를 적용

적용 1) window.open
<div class="btn">
	<section class="button_box">
		<button onclick="window.open=('index_detail_1.html')">
		로그인</button>
	</section>
</div>

♬ 버튼 클릭 시 '새 탭'에서 연결된 페이지가 열림


적용 2) location.href
<div class="btn">
	<section class="button_box">
		<button onclick="location.href=('index_detail_1.html')">
		로그인</button>
	</section>
</div>

♬ 버튼 클릭 시 연결된 페이지가 열림

---

2   GitHub Desktop을 이용한 협업

2.1   Create a New repository

Name : 레퍼지토리의 이름
Description : 레퍼지토리 설명
Local Path : 레퍼지토리 생성 위치
README : 디렉토리나 압축파일에 포함되어 있는 기타 파일의 정보를 포함해 함께 배포되는 파일
Git Ignore : 관리할 필요 없는 파일을 기술하는 파일
License : 소스코드 사용 시, 저작권 관련 이용가능 범위

♬ 나는 다른 팀원이 만든 후였기 때문에 'Clone a repository'를 선택

 

 

2.2    사용법

1) 내 파일에서 변경된 항목이 있다면 'Changes'에 노출됨
2) 변경한 상태를 팀원들에게도 적용하고 싶다면 좌측 하단 Commit을 누르기
 2-1) commit이 활성화가 안되어있다면 바로 위 textarea에 변경사항 적고 commit
3) History에서 변경된 내역 확인 가능
4) 다른 팀원이 Commit-Push한 내역이 있다면 상단 Pull origin에 노출됨
5) 클릭하고 Pull하면 내 파일에도 적용

---

3   문제발생 ^-^...!

메인페이지에서 로그인을 클릭하면 상세페이지로 연결이 돼야하는데 해당 메세지가 출력되면서 연결되지 않음

입력한 코드 ↓
<div class="btn">
	<section class="button_box">
		<button onclick="location.href=('/detail')">
		로그인</button>
	</section>
</div>

♬ 페이지 구성이 대강 진행되어서 파이썬을 사용하여 상세페이지를 /detail로 설정해놓음
   따라서 <button onclick="location.href=('연결')"> 부분을
   <button onclick="location.href=('index_detail_1.html')">에서
   <button onclick="location.href=('/detail')">로 변경했으나 해당 오류 발생
   localhost:5000로 진행하여도 안됨
   
   찾아보니
   1) URL 오류 : 요청한 URL이 잘못된 경우
   2) 파일 경로 오류 : 요청한 파일의 경로가 잘못된 경우
   3) 파일 존재X : 요청한 파일이 존재하지 않는 경우
   4) 서버 구성 오류 : 서버 구성이 잘못된 경우
   인 것 같은데.. GitHub으로 진행하는건 다들 처음이라 다른 분들은 CSS가 적용이 안된다.
   아니다 다 잘보인다. 등의 여러 문제가 발생
   내일 레파지토리를 다시 밀고 새로 생성해보기로 함