[KUIT 3기 Web] 2주차(5 - 完) - 당근마켓 화면(CSS) 클론 하기 및 트러블 슈팅

• 2주차 과제는 주어진 피그마대로 당근마켓 화면1을 기본 HTML + CSS로 동일하게 구현하기였다.
• git repo fork 후 github pages로 배포해서 화면을 확인할 수 있게 했고, 결과물은 다음과 같다.

 

• 미션 결과물-당근마켓 화면1 링크

---

트러블 슈팅

• 해당 과제를 하면서 겪었던 이슈와 해결 방안은 다음과 같다.

Issue 1

• 문제
  상단 header가 고정이 안되어서 fixed로 고정했다.
  그런데 fixed로 고정한 다음, header에 width 100% 를 주면 header가 화면보다 조금 커져서 화면 밖으로 튀어나간다?!?!?!

특히 → display: flex; justify-content: space-between; 해당 속성일 때 튀어나간다.

이 문제도 box-sizing: border-box; 문제였다....!!!!!
width 100%가 content를 현재 화면의 100%로 맞추어 버려서 padding 길이만큼 더 튀어나갔던 것!!

정말로 box-sizing: border-box;를 전체에 적용하고 시작하는 것이 덜 헷갈리겠다..

-webkit-fill-available 으로 chrome에서 width: 100%를 대체할 수 있다.

  position: fixed;
  top: 0px;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;

• width 100% 대신 left, right 0을 주어도 된다. 이는 box-sizing과 관계없이 항상 잘 동작한다.

  position: fixed;
  top: 0px;
  z-index: 1;
  left: 0px;
  right: 0px;

Issue 2

• 문제
  스크롤 올리고 내렸을 때 z-index가 높은 상태로 고정된 Header, Footer에 중간 게시물이 잘려서 보인다.
  이는 맨 위, 맨 아래에 margin, padding으로 여백을 주어 해결할 수 있다.
  중간 게시물을 포함한 container 전체의 위, 아래에 margin을 주는 방식을 택했다.

  .product__container {
  margin-bottom: 74px;
  }

Issue 3

• 문제
  여기서 height는 padding을 포함하지 않은 height로 계산되고,
  height: 58px로 주니까 + padding 16px이 되어서 총 높이가 75px이 되어버렸다.

.footer-bar > .footer__icons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 8px 0 8px 0;
  height: 42px;
  background-color: #fff;
  border-top: 1px solid #d9d9d9;
}

.footer-bar > .footer__icons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 8px 0 8px 0;
    height: 58px;
    background-color: #fff;
    border-top: 1px solid #d9d9d9;
    box-sizing: border-box;
}

 

 

<해결 방법>

• box-sizing: border-box; 적용하자!!
  
  기본 속성은 box-sizing: content; 로, width, height가 content size 기준으로 잡힌다.
  즉, padding을 주면 width/height + padding 으로 잡히는 것.
  
  box-sizing: border-box; 옵션을 주면 width/height = content size + padding 이 된다.
  
  보통 피그마에서는 box-sizing: border-box; 방식으로 디자인을 많이 해서,
  전체에 border-box; 를 적용시켜 놓는 것이 편하다.