미니프로젝트 "누구인가?"

내가 맡은 부분

상세페이지(subPage)

• 개인소개부분 레이아웃 및 수정
• 개인소개부분 화살표 그림 클릭시 페이지 연결
• 디자인 래퍼런스 참고하여 전체적인 방명록 CSS

 

 

 

# 개인소개부분  레이아웃 및 수정 (문제점과 해결방안)

창 크기를 조절하면 개인소개부분의 위치가 바뀌는 문제점

<해결방안>

display: flex;            ->   부모 안에 있는 자식요소들의 정렬을 위해 사용

Flex-direction: row;                ->  자식요소 수평정렬

Justify-content: center;         -> 주축에서 가운데 정렬

Align-items: center;                -> 교차점에서 가운데 정렬

 

이 네가지 코드를 사용하였더니 창크기가 달라져도 개인소개부분 위치가 정가운데로 고정되어 있음.

 

 

# 디자인 래퍼런스 참고하여 전체적인 방명록 CSS (문제점과 해결방안)

방명록 부분 버튼들이 각자 하나씩 class가 지정되어 있어 하나씩 일일이 수정해줘야 된다는 문제점

 

<해결방법>

태그는 class를 여러개 가질 수 있기 때문에 버튼 하나에 class를 두개를 주는 방식을 사용

예시) 이런식으로 html을 생성하고,

    <div class="container">
      <button class="item color1">button1</button>
      <button class="item color2">button2</button>
      <button class="item color3">button3</button>
    </div>

 

이렇게 css를 생성할 때, 공통으로 적은 class명을 쓰고 스타일을 적용해주면 모든 버튼에 크기를 똑같이 조절할 수 있고 각 버튼마다 색상을 다르게 하고 싶다면 쉼표없이 class명을 쭈욱 쓰고 스타일을 적용할 수 있다.

 

.item {
  width: 100px;
  height: 50px;
}

.item.color1 {
  background-color: black;
  color: #008000;
}

.item.color2 {
  background-color: pink;
  color: white;
}

.item.color3 {
  background-color: purple;
  color: aqua;
}

 

이로써 적용이 되면 버튼에 각각의 class명을 주지 않아도 버튼의 크기를 모두 같게 할 수 있고 버튼 색상을 각각 다르게 변경 가능하다.

 

 

# 개인소개부분 화살표 그림 클릭시 페이지 연결 (알게된 점)

<a> 태그를 사용해 텍스트 말고 그림에 링크를 걸어줘야 하는 상황

검색해서 찾아본 결과, 그림코드 전체를 <a>로 묶어주고 href 속성을 이용해 링크를 걸어주면

그림을 클릭했을 때 페이지가 연결되는 결과를 얻음.

 

# 웹배포 후 시연영상

우리팀이 만든 웹페이지이다.

 

# 웹배포 후 사이트 링크

https://do-it-coding.netlify.app/

 

팀프로젝트를 하면서 느낀점

개발 경험이 아예 없다 보니 미니프로젝트를 하면서 명령어부터 시작해 github 사용까지 하려니 정말 막막했다. 아직 기초가 없는 상태라 기능구현에 참여하고 싶어도 내가 자신이 없어 참여하지 못했다. 그래도 안 하면 안 느니깐 뭐라도 해보자 하는 마음으로 상세 페이지의 CSS를 맡겠다고 하였다. 모르는 것이 많아 검색해 가며 지금 할 수 있는 선상에서 방명록을 꾸며 보았다.

부모 구역을 잡아주고 자식 요소를 움직이려고 하니 너비나 높이의 %를 잘못 사용해서 이상한 위치로 가버리는 문제가 많았다. 그래서 검색을 통해 코드를 다시 짜서 위치를 잡아주었다. 처음에는 정말 막막했지만 막상 해결해 보고 나니 정말 뿌듯했다.

그리고 중간중간 git push 할 때 충돌이 많이 일어나 충돌을 해결해야만 했다. 이상한 명령어가 많아 어려워서 일단은 백업을 해둔 상태에서 원래 파일을 삭제하고 다시 github에서 clone을 해왔다. 정말 비효율적인 방법이지만 파일이 망가질까 두려워 이런 방법을 통해 다시 수정해서 push를 반복했다. 다음 프로젝트 전까지 git 충돌에 대해 공부한 다음 충돌을 해결해 보아야겠다고 생각했다.

이렇게 기초도 없는 상태에서 프로젝트에 참여해 매우 막막했지만 사용법과 어떤 식으로 웹을 만드는지 흐름을 파악할 수 있어 얻어가는 것이 많은 것 같다.

 

 

 

<개인  KPT회고>

 

 

Keep

• 매일 매일 TIL 작성 : 하루동안 새롭게 알게된 점이나 오류를 해결했던 부분을 적는 것이 좋을 것 같다.  새롭게 알게된 점을 직접 타이핑 해보면서 정리하면 더 기억에 잘남을 수 있고 나중에 기억이 안나면 되돌아 보면 되니깐 자연스럽게 복습과 메모를 할 수 있어서 좋은 것 같다!  또한,  똑같은 오류가 발생한다면 내 블로그를 참고하여 더 쉽게 해결할 수 있을 것이다.  그러므로 TIL 쓰는 것을 게을리 하지 말자~!!
•  모르면 무조건 검색해보기: 모른다고 넘어가지 말고 검색해가면서 내것으로 만들어낸다면 더 좋은 개발자가 될 수 있을 것이다.  모른다고 회피하지 말기 메모!
• 오류는 해결하고 넘어가기 : 가끔 코딩을 하다보면 수많은 오류가 발생하기 마련이다.  이번 미니프로젝트를 일주일간 하면서 오류를 피하지 말고 맞서 싸우는 것이 중요하다고 생각하게 되었다. 왜냐하면 오류를 해결하지 못하고 그냥 어렵다고 넘겨버리면 나중에 똑같은 오류가 발생해도 해결하지 못하기 때문이다. 수많은 오류를 겪어보고 해결해 나가는 능력을 키워야 능력 좋은 개발자가 될 수 있다고 생각한다!

 

Problem

• 끼니를 거르지 말자..... 코딩에 집중한다고 점심을 스킵해버리면 몸이 언젠가 망가질 것이다.  코딩을 열심히 하는 것도 중요하지만 내 몸을 챙겨가면서 열심히 하는 것이 더 중요하다!
• 프로젝트를 할 때 조금 더 적극적으로 소통하자! 아직 모르는 것이 많아 잘하는 팀원들 사이에서 실력이 비교가 되더라도 모르는 것이면 질문하고,  잘하는 사람 코딩을 보면서 공부하면 되니까 기죽지 말고 팀원들과 소통하려고 노력하자!

 

Try

• 쉬는 시간을 줄여서라도 충분한 공부 시간을 확보하기 위해 노력하기!
• 질문할 상황이 생기면 현재 문제 상황을 명확하게 정리한 후에 질문하기!