지난 포스팅에서 작성했던 세이프홈즈 html파일에 css를 적용해보았다. 반응형까지 적용하는게 과제였고 Break Point는 1024px, 768px, 480px 이였다. 이 외로 나는 이전에 계속 display: flex 방식을 이용해왔었는데 과제를 진행하면서 grid를 익혀보고 싶어 최대한 grid 를 사용하려했다.


.articleContainer {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 30px;
  margin-bottom: 30px;
}

@media (max-width: 1024px) {
  .articleContainer {
    grid-template-columns: repeat(2, 300px);
  }
}


위의 코드는 아래의 보증금 지킴이 서비스 아래 구역들을 나눈 것이고 반응형을 적용한 것 이다. 짠

ezgif com-video-to-gif (1)

실무에서는 flex와 grid를 많이 쓴다고 하는데 grid 공부는 계속 미뤄왔다,, flex가 너무 편한 탓인가,,! 그런데 멘토님께 여쭤보니 멘토님도 대부분 flex를 사용한다 하셨고 반응형에 적용하기 애매할 경우에 grid를 적용한다 하셨다. 그래도 다른 분들의 코드를 보고 이해할 수 있어야하기 때문에 알아야하는게 맞다고 하셨고 나도 백번 동의였다!! 사실 프로젝트를 진행할때 다른 팀원이 구현한 걸 보고 이걸 어떻게 한거지?? 했는데 그리드를 쓴걸보고 아,,했지만 사실 당시에 잘 이해하지 못했다. 그리드를 공부하고 보니 아주 쉬웠던것,,, 🥲

이것처럼 그리드를 처음 접하고 공부했을때는 생각보다 복잡해 시간이 걸렸지만 이번 과제에 적용하는데는 오래걸리지 않았다. 간단한 레이아웃이라 그런걸수도 있지만!!
어쨋던 이번기회에 그리드를 공부하고 적용할 수 있어 의미있었던 것 같다.😎




본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다. #프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프