상품 레이아웃 숙제에서, box-sizing 문의

[김국진]

<div class="shop-bg">
        <div class="shop-container">
          <div class="shop-item">
                <div class="overlay"></div>
                < img src="photo131.jpg">
          </div>  

          <div class="shop-item">

            < img src="photo131.jpg">
          </div>

          <div class="shop-item">

            < img src="photo131.jpg">
          </div>
        </div>
    </div>

<hr />

body {
    margin:0px;
}
.shop-bg {
    background-color: #eee;
  }
.shop-container {
    display: flex;
    width: 90%;
    margin: auto;
/*    padding: 10px;*/
  }
.shop-item {
    padding: 10px;
    position: relative;
  }
.shop-item img {
    width: 100%;
    display: block;
  }

  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(235,0,0,0.5);
}

overlay 박스를 만들 때,
position:relative를 위한 별도의 div를 생성하는 대신, .shop-item에 position:relative를 주고자 했습니다.
이 때, shop-item에 padding: 10px를 주자 overlay 박스가 우측 하단으로 벗어나는 현상이 보이는데요.

overlay에서 width: 100%, height: 100%가 "shop-item의 크기"만 가져오는 것이 아니라
"shop-item의 크기 + padding 10px의 크기"로 padding 값을 포함해서 가져오기 때문인 것으로 확인했습니다.
따라서 padding 값을 배제한 shop-item의 크기를 overlay에서 상속받기 위해, box-sizing: content-box을 추가하였으나, 적용되지 않습니다.
퍼센테이지 값은 box-sizing: content-box가 적용되지 않는건지 문의드립니다.

[codingapple]

position absolute 주는 순간 부모랑 별도로 움직인다고 생각하면 됩니다 그래서 100%주면 이상해질걸요

[글쓴이]

글