😎 실무프로젝트 1주차(22.07.01 ~ 22.07.08) 시작
1일차 22.07.01
실습을 하는 조편성이 됐고 각 조별로 Teams에 대화방이 생성됐다. Resoft 라는 회사의 웹사이트를 클론코딩하는게 1주차의 목표인 듯 했다.
팀장과 팀명을 정하고 각자 파트를 정했다. 그리고 하다가 모르는 게 생기면 대화방에 질문하고 최대한 완성해서 7월 6일에 한 번 모아보기로 했다.
나는 client img가 있는 파트를 선택했다. 아래 보이는 것처럼 애니메이션 효과와 정갈하게 정렬되어 있는 이미지들을 보고 만들어 보고 싶다는 생각에 뽑기 순위가 꽤 앞쪽이었음에도 선택했다.
우선 html과 css를 웹사이트에서 검사를 눌러 하나하나 찍어보고 틀과 디자인은 어느 정도 완성시켰다. 첫 번째는 PC나 큰 화면에서 봤을 때 나오는 화면이다.
두 번째는 1218px보다 화면이 작아지면 나오는 화면이다. 한 줄에 8개의 img만 보이게 하라고 해서 위에 세 줄은 성공했고 아래 3개 남은 img가 넓은 공간을 다 차지하고 있어서 nth-child()를 사용해서 왼쪽 오른쪽 margin 값을 0을 줬더니 왼쪽으로 정렬된 모습으로 나왔다. 그리고 버튼이 나오게 만들었다.
@media screen and (max-width:1217px) {
.client ul {
margin: 0 5%;
}
.client ul li {
width: calc(100% / 8);
}
.client ul li:nth-child(25), .client ul li:nth-child(26),
.client ul li:nth-child(27) {
margin: 0 0 50px 0;
}
.client ul li .img-wrap {
width: 10vw;
height: 10vw;
}
.client ul li p {
font-size: 14px;
}
.more-btn {
display: initial;
}
}
세 번째는 941px보다 화면이 작아지면 나오는 화면이다. 한 줄에 4개의 img만 나오게 만들었고 위에서 nth-child()를 사용해서 그런지 아래 3개의 img가 왼쪽에 붙어 있었다.
@media screen and (max-width:940px) {
.client ul {
max-width: 500px;
margin: 0 auto;
}
.client ul li {
width: calc(100% / 4);
margin: 0 0 30px 0;
}
.client ul li .img-wrap {
width: 110px;
height: 110px;
}
.client ul li p {
font-size: 12px;
}
.more-btn {
width: 50px;
line-height: 50px;
font-size: 40px;
}
}
총평
-
nth-child()를 이용해서 제일 아래 있는 img들을 왼쪽으로 정렬되게 했지만 한 줄에 5개나 7개를 보이라고 하면 제일 아래에 해당하는 nth-child()를 일일이 추가해줘야 할텐데 너무 비효율적인 것 같다. 다른 방법을 찾아봐야할 듯
-
눈대중으로 보고 하긴 어려울 것 같아서 검사로 열심히 보면서 했는데 아직 display와 position에 대한 개념이 많이 부족하다고 느꼈다. flex-wrap, 부모 relative & 자식 absolute 등 공부해야할 것이 많다.
-
Github를 통해서 팀원들과 관리를 하고 싶은데 아직 어떻게 하는지 몰라서 다음 주 수요일 스터디할 때 스터디원이 가르쳐준다고 했다. 하지만 가르침을 받기 전에 내가 먼저 깨우칠 수도 있다.
-
상위 세 줄을 제외하고 아래 줄들은 버튼을 눌렀을 때 나오게 만들어야하고 애니메이션 효과를 줘야한다. CSS와 JS를 사용할 것으로 생각되는데 차근차근 해볼 생각이다. 내 파트가 끝나면 다른 팀원들을 도와주면서 혼자 이 사이트를 만들어 볼 생각이다.
