[동아리 소개 페이지 만들기] 3. 페이지들 만들고 동적 기능 추가하기3 - Members

1. 구현하기

1) 초안

Members 페이지에는 동아리 멤버들의 기본 정보와 졸업한 선배들의 기본 커리어를 넣기로 했다. 이 과정에서 CSS의 Grid를 이용하기로 했다. 이 과정에서 또한 어떻게하면 임펙트있고 기억에 오래 남게 우리 동아리의 멤버들을 보여줄 지 고민했고 그 결과 필요한 정보만 깔끔하게 보여주기로 했다. IT동아리에서 보여줘야 할 건

동아리원의 경우 기술 스텍, 졸업한 선배의 경우 현재 커리어이다.

 

Members 페이지는 이 페이지를 맡은 친구가 구현해주었다.

2) content

동아리 멤버 정보

동아리 멤버들의 정보에는 관심 기술스택들과 간단한 자기 소개를 넣었다.

졸업생 커리어

졸업생 커리어에는 기술 스택과 현재 커리어를 넣었고 현재 다니는 회사들의 로고를 넣었다. 또한 가독성을 위해 커리어가 하나 이상인 선배들은 오른쪽 상단에 햄버거 메뉴 버튼을 넣어 누르면지금까지 해왔던 모든 커리어들이 펼쳐지도록 했다.

 

2. 문제를 해결하며 배운 것들

• CSS Gird

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids

그리드 - Web 개발 학습하기 | MDN

3. 느낀 점

CSS에 이제 익숙해지고 있는 중에 Grid를 만났다. 정말 많은 속성이 있어 더 적용해보면서 익히고 싶다.