유데미 취업부트캠프 - 프론트엔드&백엔드 : 5일차 TIL

 

 

 

 

 

 

오늘은 지금까지 배운 CSS 레이아웃, positioning을 사용하여, 다음과 같은 두 페이지를 완성하였습니다.

 

 

 

 

---

 

Header의 레이아웃이 조금 어렵다고 느껴서 다시 한번 정리해보고자 합니다.

 

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 60px;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
}

 

먼저, 확실히 짚고 넘어가야할 것이 있다.

width:100%라는것은 부모요소의 크기(border,margin,padding)을 포함한 값이 아니라, content의 크기만을 상속받는다.

이걸 혼동하여 알고 있었다...🙀

 

 

위 사진과 같이 header가 저렇게 body를 넘치는 이유는,

width:100%로써, body의 content + css에 정의한 header의 padding (15px 60px)까지 합쳐지기 때문에, body를 넘어가버리는것이다.

 

💡

그래서, box-sizing: border-box; 를 사용하는것이다!

 

 

border-box는 border+padding+content를 포함해서 계산해준다.

유의할 점은 margin은 포함하지 않는다.

 

그래서, border-box로 인해 body의 content + css에 정의한 header의 padding (15px 60px)까지 합쳐진 값이 body의 width(정확히는 content)가 되야하므로, 자동으로 계산되어 content가 줄어드는것을 확인할 수 있다.

 

object-fit

 

object-fit 속성은 <img>나 <video> 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.

 

차례대로 fill, contain, cover이다.

 

fill은 그저 크기에 최대한 맞춰서 넣기 때문에 종횡비가 깨진다.

가장 많이 사용하는 contain, cover의 차이점을 유의해서 사용해야하는데,

둘다 모두 종횡비를 맞추어 이미지가 들어가지만,

 

containe: 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면, 빈공간이 생길 수 있다!

 

cover : 컨테이너에 가능한만큼 이미지를 넣으면서 종횡비도 유지시켜준다. 즉, 왜곡도없고 빈공간도 없다.

 

 

 

 

 

 

오늘의 수업 중, 가장 의문이였던 점..!🫣

 

 

<section id="highlights">
        <h2>highlights</h2>
        <ul id="destinations">
          <li class="destination">
            <img src="/images/places/miami.jpg" alt="miami streets" />
            <p>Miami <strong>USA</strong></p>
          </li>
          <li class="destination">
            <img src="/images/places/munich.jpg" alt="munich streets" />
            <p>munich <strong>Germany</strong></p>
          </li>
          <li class="destination">
            <img src="/images/places/barcelona.jpg" alt="barcelona streets" />
            <p>barcelona <strong>Spain</strong></p>
          </li>
        </ul>
      </section>

 

강의에서, 세번째 이미지의 해상도(크기)의 차이로 세로길이가 1,2번째 사진보다 크다보니, 종횡비를 맞추다보니 다른 요소보다 좀 더 작게 들어가게 된다고 설명하셨다. (해상도가 더 높은데, 고정된 높이를 부여하면, 이미지가 더 줄어든다.)

li 태그엔 img, p 태그가 담겨있고, img크기에 의해 li의 크기가 결정된다고 한다.(p태그는 글자수가 많지 않기때문에 영향을 미치지 않는다)

 

.destination img {
  width: 100%;
  height: 200px;
  box-shadow: 2px 4px 8px rgb(68, 67, 67);
  border-radius: 10px;
  object-fit: cover;
}

 

그래서, 다음과 같은 차이를 1:1:1로 맞추기 위해선 다음과 같이, img태그에 width:100%를 지정하면 된다고 강의에서 설명을 하셨지만,,?

여전히 마지막요소는 크기가 작다... 

 

강의에서 놓친점이 있는건가 다시 돌려보고 , 조원들에게 물어봤지만 결과는 똑같았다...

 

왜 그럴지 생각해보았다🤔

내가 생각해본 이유는 이렇다.

 

img크기에 의해 li의 크기가 결정되는것인데, img에 width:100%을 넣으면 

img는 li의 content크기를 상속받기 때문에 우리가 원하는 1:1:1의 비율이 될 수가 없다고 생각한다.

그래서, 내가 해결한 방식은 다음과 같다.

 

💡

li의 크기를 동등하게 3등분하고, img에  width:100%을 사용해서 img를 3등분하는것..!

li를 3등분 하기 위해서, width를 100%를 넣는것이다. 

ul에 display:flex가 지정되어 있기 때문에, ul의 콘텐츠 가로 영역에 li태그들이 동일하게 들어갈 것이다.

근데 강의에서 ul태그의 너비를 90%라고 지정해었는데, 이렇게 하면 ul의 너비가 커졌을때 li의 요소들의 크기가 미관상 커져서...

max-width를 지정해서 적당한 요소의 크기로 만들어주었다.

 

(참고로, ul의 부모요소는 section이다.)

 

#destinations {   ///ul
  max-width: 1100px;
  display: flex;
  width: 90%;
  margin: auto;
  justify-content: center;
  margin-bottom: 40px;
}
.destination {  ///li
  width: 100%;
  margin: 0 20px;
  text-transform: uppercase;
}

 

 

 

 

---

CSS의 레이아웃은 

항상 느끼는것이지만... 어렵다 ..ㅎㅎㅎ

능숙해지는 그날까지 화이팅!