DAY 17

Box-sizing

1. content-box:
   기본 값으로, 요소의 크기는 오로지 해당 요소의 콘텐츠(content) 영역의 크기만을 고려하여 계산된다. 즉, width와 height 속성은 콘텐츠 영역의 크기를 의미하며, 여기에 패딩(padding)과 테두리(border)를 추가하면 요소의 전체 크기가 된다. 마진(margin)은 요소의 크기에 영향을 주지 않는다.

요소의 크기 = 콘텐츠 영역의 크기 (width/height) + 패딩 + 테두리

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
}

위의 경우, 실제 요소의 전체 크기는 width와 height에 지정한 200px과 100px에 패딩과 테두리가 추가된 값으로 결정된다.

2. border-box :
   border-box 값은 요소의 크기를 콘텐츠 영역의 크기뿐만 아니라, 패딩과 테두리를 포함하여 계산한다. 이로 인해 요소의 전체 크기가 콘텐츠 영역을 넘어서더라도 설정한 width와 height 값이 유지되도록 할 수 있다.

요소의 크기 = 콘텐츠 영역의 크기 (width/height)

예를 들어, 동일한 CSS 코드에서 box-sizing을 border-box로 설정하면:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: border-box;
}

위의 경우, 요소의 전체 크기는 width와 height에 지정한 200px과 100px이 되며, 이 크기에 패딩과 테두리가 포함된다. 따라서 콘텐츠 영역의 크기는 width - (패딩 + 테두리)가 된다.

box-sizing 속성을 사용하여 border-box 값을 지정하면 레이아웃 설계를 더 쉽게 관리할 수 있으며, 요소 크기의 예측 가능성을 높이는 데 도움이 된다.

이러한 요소들을 이용해 헤더와 메인 섹션 1을 마무리 했다.
이젠 하이라이트 섹션을 완성할 차례이다.

<section id="highlights">
        <h2>Highlights</h2>
        <ul id="destinations">
            <li class="destination">
                <img src="../images/places/miami.jpg" alt="Miami streets on sunny day">
                <p>Miami
                    <strong>USA</strong>
                </p>
            </li>
            <li class="destination">
                <img src="../images/places/munich.jpg" alt="Munich stadium in winter">
                <p>Munich
                    <strong>Germany</strong>
                </p>
            </li>
            <li class="destination">
                <img src="../images/places/barcelona.jpg" alt="Palm beach in Barcelona">
                <p>Barcelona
                    <strong>Spain</strong>
                </p>
            </li>
        </ul>
    </section>

이런 식으로 기본 하이라이트 섹션 html 코드를 완성시켰다. 이렇게 만들었을 때 생긴 문제점은 2가지가 있었다. 첫 번째는 이미지의 크기가 너무 크다는 것. 두 번째는 이미지가 서로의 옆이 아니라 아래로 배치되어 있다는 점이다.

이미지의 크기를 height, width 값으로 고정해주고 display : flex;를 통해 옆으로 배치시키고 디테일 값을 조정했다. 하지만 이미지가 살짝 찌그러지는 모습이 보였다. 이러한 점을 'object-fit' 속성을 통해 해결해 줄 수 있다.

Object-fit

    object-fit: fill, contain; // 

CSS 코드를 통해 이미지를 잘 조절해준다.
object-fit은 CSS 속성 중 하나로, 이미지나 비디오와 같은 대체 콘텐츠를 포함하는 요소의 크기와 콘텐츠의 크기를 어떻게 조절할지 지정하는 데 사용된다. 이 속성을 사용하면 이미지나 비디오가 요소에 맞게 조절되는 방법을 지정할 수 있다.

1. fill: 이미지나 비디오가 요소의 크기에 맞게 늘어나거나 줄어들어 모든 공간을 채우도록 한다. 가로 세로 비율은 유지되지 않는다. 이미지가 왜곡될 수 있다.

2. contain: 이미지나 비디오가 요소 안에 전체적으로 들어가도록 하면서 원본 비율을 유지한다. 대체 콘텐츠가 요소 안에서 모두 보이도록 크기가 조절된다. 가로 또는 세로 축 중 하나는 완전히 보일 수 없을 수 있다.

3. cover: 이미지나 비디오가 요소를 완전히 덮도록 크기가 조절된다. 가로 또는 세로 축 중 하나는 요소 안에서 완전히 보일 수 없을 수 있다. 이미지가 잘릴 수 있다.

4. none: 이미지나 비디오가 원본 크기를 유지한다. 만약 요소보다 큰 경우에는 자르거나 축소된다.

5. scale-down: none 또는 contain 중 적용할 수 있는 크기를 적용한다. 요소와 대체 콘텐츠의 크기가 비교적 작을 경우 none과 동일하게 동작하며, 대체 콘텐츠의 크기가 요소보다 클 경우 contain과 동일하게 동작한다.