[본 캠프 2일차] 07.16 첫 미니 팀 프로젝트 시작

git&github 미니 특강 ( 19:00 ~ 20:10 )

 

git : 여러분 폰(bash, terminal)

github : 네이버클라우드, N드라이브, 구글드라이브, iCloud

repository : 폴더

• git init
• git add .
• git commit -m "수정 메시지"
  
           내 컴퓨터에 저장 ↑
  --------------------------------------
              github에 저장 ↓
  
  
• git remote add origin <github주소>
   - origin 이라는 변수에 이 주소를 할당하기
   - git remote remove origin (already exists 에러날때)
   - git remote -v (변수 확인)
• git branch -m <브랜치명>
   = git checkout -b <브랜치명> : 이동하는 명령어지만 해당 브랜치가 없으면 ' -b ' 로 만든다.
• git push origin <브랜치명>
  

       --------------------------------------

             다 하고 pull request

 

main 브랜치에서 수정된 브랜치를 당겨와야 하니까 pull request

미니 특강 끝.

---

미니 팀 프로젝트를 시작했다.

우리 팀은 팀원 소개 페이지를 제작해야 하는데 나는 중간 팀원 부분을 담당했다.

 

 

처음 팀 프로젝트를 하는거고 아직도 난 왕초보 중의 왕초보.. 강의 하나만 듣고 시작하는거라 아무것도 몰랐다.

 

그래서 처음엔 index.html 과 styles.css, script.js 를 나눌 생각도 못했고, index.html 에서만 모든 코드를 짰다.

 

 

아무것도 모르고 막 짜다가 옆으로 정렬을 하려고 해도 안되고, 사진을 저장 후, 내 컴퓨터에서 올리는 방법도 몰라서 엄청 검색했다. 그렇게 한 번 모든 코드를 뒤집어 엎고 다시 시작했다.

 

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

document.addEventListener("DOMContentLoaded", function () {    const teamContainer =
   // 클래스 이름이 'team-container'인 HTML 요소를 선택하여 teamContainer 변수에 저장합니다.
document.querySelector('.team-container');    const imagePath = './image/';
  // teamContainer에 대해 필요한 작업을 이곳에 추가할 수 있습니다.

   // 각 팀원 정보를 화면에 추가합니다.
members.forEach(member => {
        // 새 HTML 요소를 만듭니다.
        const memberDiv = document.createElement('div');
        memberDiv.className = 'member';
        

        // 새 요소에 팀원 정보를 채웁니다.
        memberDiv.innerHTML = `
            <div class="photo">
                <div class="name-overlay">${member.name}</div>
            </div>
            <div class="icons">
                <img src="${member.github}" alt="GitHub">
                <img src="${member.velog}" alt="Velog">
            </div>
        `;

        // 새 요소를 실제 화면에 추가합니다.
        teamContainer.appendChild(memberDiv);
    });

<div class=" >에서 서로 다른 태그끼리 _ 공백을 띄우면 같은 css로 쓸 수 있다
ex)  <div class="photo overlay>
      <style>
        .photo .overlay {
         }
     </style>


display: flex;
/* 큰 박스가 작은 박스들을 정렬하는 방법을 사용 */

align-items: center;
/* 작은 박스들이 높이 가운데에 위치하게 한다 */

text-align: center;
/* 작은 박스 안의 글자들이 가로로 가운데에 오게 한다 */

justify-content: center;
/* 작은 박스들이 너비 가운데에 위치하게 한다 */

flex-direction: column;
/* 작은 박스들이 위에서 아래로 쌓이게 한다 */

opacity
/* 투명도 */

cursor: pointer;
/* 커서 모양을 pointer 로 변경 */

transform: scale(1.2);
/* 마우스오버 시 크기를 변경 */

 

처음엔 저런식으로 하나로만 이것저것 하다가 index.html, styles.css, script.js 나눴습니다.

 

그리고 이미지 경로를 인터넷 주소에서 폴더 내 image 파일안으로 경로 설정을 하였고,

 

마지막으로 팀원들의 힘을 모아 다같이 정렬을 도와주셔서 어렵게어렵게 레이어 수정까지 마무리를 지었습니다.

 

처음엔 "코린이들"이 아니라 "팀원" 이었고, "팀원"이 호빵맨 왼쪽으로 자꾸 붙고 위쪽으로 안나뉘어서

 

div 를 나누고 display, align-item, justify-content, flex-direction 등 많은 css 를 가르쳐주셔서 많이 배웠습니다.

 

그렇게 아래 같이 잘 나누게 되었습니다.

 

그리고 원래는 캐릭터 밑에 이름과 내용들을 작성하기로 했었는데 어차피 modal 로 내용을 추가할꺼라 굳이 필요 없겠다 싶어서 삭제 후 마우스오버로 이름이 나오게 설정 하고, 커서를 pointer 로 변경했습니다.

 

 

위 처럼 변경 후, 클릭하면 modal 이 뜨게 하는 건 다른 팀원이 맡아주셨고 여기까지는 잘 마무리 하였습니다.

 

내일부터 금요일 발표 전까지 다른 팀원들것도 추가 하고 오류까지 꼼꼼하게 체크 할 예정입니다.