실습 - VEAMFLEX

Header

💡 헷갈렸던 점 1
이미지의 크기가 너무 커짐

align-items: stretch라는 기본 값 때문에 높이에 맞추어 늘어나는 것으로 align-items: center를 지정하면 높이가 가운데 정렬이 되어 작아진다.

그 다음 너비를 지정하면 된다.

💡 헷갈렸던 점 2
header에 height를 줬더니 header-bar와 높이가 안맞음

높이를 header에 주면 header의 높이는 고정이되는데, header-bar는 그 안의 요소들의 높이에 따라 변화한다.

위의 사진에서는 제일 큰 요소인 버럭이 이미지 사이즈에 따라 height가 auto로 지정된 것이다.

버럭이 사이즈가 더 컸으면 header-bar의 높이는 더 컸을 것이다!

.header {
  background-color: #111111;
}

.header-bar {
  height: 180px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  color: #999999;
}

💡 문제점 1
선을 hr을 사용하는 것이 맞는지

선이라고 무작정 hr요소를 사용하는 것은 아니다.
hr 태그의 의미를 만족했을 때 사용하는 것으로 이 예시에서는 가상 요소를 사용할 수 있다.

💡 가상요소

• inline요소로 텍스트의 길이만큼 너비가 설정되는 것이고 내가 임의로 너비를 지정할 수 없다.
• img요소는 닫는 태그가 포함되므로 가상요소를 사용할 수 없다.
• content는 필수이다.

.description::before {
  content: "";
  width: 60px;
  height: 1px;
  **display: inline-block;**
  background-color: currentColor;
}

너비와 높이를 지정하려면 인라인요소를 블록 요소로 바꿔야한다.
이 가상 요소를 인라인 블록 요소로 바꾼 후 너비와 높이를 지정하여 선인 것 처럼 보이게 한다.

💡 문제점 2
가로선을 어떻게 세로로 가운데 정렬 하는지

위의 사진은 description인 p요소의 baseline에 맞추어 아래로 정렬이 된 것을 볼 수 있다.

그렇다면 이 가로선을 가운데에 위치하도록 하려면 어떻게 해야할까?

❗️flex-items인 descripton을 flex-container로 다시 설정할 수 있다.
❗️flex-items를 다시 부모요소로 두고 그 안에 계속 flex-items를 만들어 그 안에서 재배치 가능!

✔️ html
 <section class="header-bar">
   <img class="logo" src="./images/logo.png" />    
   <p class="description">Unlimited movies, TV shows, and more.</p>
   <img class="anger" src="./images/anger.png" />
 </section>
 
 ✔️ css
 .description {
  font-size: 16px;
  **display: flex;**
  **align-items: center;**
}

.description::before {
  content: "";
  width: 60px;
  height: 1px;
  display: inline-block;
  margin: 0 20px 0 30px;
  background-color: currentColor;
}

++ margin: 0 20px 0 30px 대신 gap을 이용하여 여백을 두는 방법
❗️gap과 flex는 부모 요소에!!!

.header-bar {
  display: flex;
  gap: 30px;
}

.description {
  display: flex;
  gap: 20px;
}

.description::before {

}

레이아웃

고정 vs 가변

고정 (사이드 바)

픽셀 단위
언제나 이 크기가 고정되도록 보장하는 것

가변 (메인)

몇 픽셀인지x, 몇 퍼센트인지 x
고정 값에 따라 바뀜
가변 = wrapper - 고정

➡️ 사이드 바의 크기는 고정 시키고 나머지만큼 메인 화면으로 채움
➡️ 창의 크기가 바뀌어도 사이드바는 고정되고 메인의 크기만 변화한다.

<div class="l_wrapper">
 	 <div class="container">
         <div class="container-main"> </div>
         <div class-"container-sidebar"> </div>
 	 </div>
</div>

 ✔️ css
 
 .container {
  	**display: flex;**
 	**align-items: flex-start;**
    gap: 24px;
  	min-height: 848px;
}

.container-main {
  flex-grow: 1;
}

.container-sidebar {
  flex-basis: 168px;
}

flex-grow

사이드 바에 flex-basis: 168px를 적용하여 168만큼 사이드 바의 너비를 지정해주고, 메인에 flex-grow: 1를 주면 gap, flex-basis를 뺀 l-wrapper의 너비를 전부 메인 바에서 가져갈 수 있게 된다.

이렇게 되면 창의 크기가 줄어들어도 메인은 줄어든 창의 모든 가용공간을 가져가니까 똑같은 비율인 것이다.

❗️ flex-basis 와 gap까지 뺀 나머지 공간을 flex-grow로 나눠갖는 것
❗️l_wrapper 박스 안에서의 공간 배치임을 명심하기!

메인

✔️ 메인 안에 들어가는 아이템들

메인은 l_wrapper에 사이드 바의 너비를 뺀 가용 공간의 전부를 너비로 가진다.

flex-wrap

이 6개는flex-container (메인) 안의 flex-item들이므로 가로로 정렬이 되는 것이 기본이기 때문에 부모에게 flex-wrap: wrap을 적용해준다.

flex-shrink

이렇게 진행하면 메인의 크기가 커지면서 container에 공간이 부족해지며 flex-shrink: 1이라는 flex-items의 기본값 때문에 사이드 바의 너비가 줄어들기 시작한다.

(방이 남으면 평화의 시대이지만 방이 없어지면 방을 줄여서 우겨넣는 성질)

👀 헷갈렸던 점 1
sidebar의 너비가 지정을 했는데 줄어드는 것

사이드 바에 flex-shrink: 0 을 추가하여 사이드 바의 너비가 줄어들지 않도록 한다.
(공간을 고정해주는 것!)

➡️ 이렇게하면 메인의 너비만 조정됨

flex-direction

그 다음 하나의 카드를 만들었는데, 이때는 하나의 카드를 또 flex-container로 지정하여 안에 있는 이미지와 글, 버튼 등을 세로로 정렬하였다.
➡️ flex-direction: column

 <div class="card-container">
     <img class="card-image" src="./images/cover002.png" />
     <div class="card-main">
         <h4 class="card-title"></h4>
         <p class="card-content"></p>
     </div>
     <button class="card-button"></button>
     </div>
 </div>
 
 ✔️ css
 
 .card-container {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  
  overflow: hidden;
  width: 320px;
}

flex-grow

👀 헷갈렸던 점 2
버튼을 카드의 맨 아래로 정렬하는 것

1. card-main에 flex-grow:1을 적용하여 남는 공간을 전부 갖게 한다.
2. card-container의 맨 밑에 패딩을 10px 준다.
3. card-button에 margin: 0 auto을 적용하여 좌우로 가운데에 위치하도록 한다.

➡️ 카드 가운데의 메인 부분이 남는 가용 공간을 다 갖게 되므로 메인의 공간이 커져 버튼은 자연스럽게 아예 맨 밑으로 가게된다.

➡️ 이때 맨 밑의 버튼을 좀 띄우고 싶기 때문에 card-container의 맨 밑에 패딩을 준 것!

.card-container {
  padding-bottom: 10px;
}

.card-main {
  padding: 20px;
  flex-grow: 1;
}

.card-button {
  width: 300px;
  height: 48px;
  **margin: 0 auto;**
}

사이드 바

❗️ sidebar의 너비를 고정할 때는 두 가지의 방법이 있다.

• flex-basis
• width

width

고정값을 적용할 때 사용할 수 있는 방법으로 width가 지정되면 min-width는 생각하지 않아도 된다.

❗️min-width는 width를 따라가기 때문이다.

👀 헷갈렸던 점 1
sidebar의 너비를 flex-basis로 지정 했는데도 줄어드는 것

1. 사이드 바에 flex-shrink: 0

.container-main {
  flex-grow: 1;
}

.container-sidebar {
  flex-basis: 168px;
  **flex-shrink: 0;**
}

2. 사이드 바에 min-width를 고정값으로 설정

.container-main {
  flex-grow: 1;
}

.container-sidebar {
  width: 168px;
  **min-width: 168px;**
}

3. 메인에 flex-basis: 0

.container-main {
  flex-grow: 1;
  **flex-basis: 0;**
}

.container-sidebar {
  width: 168px;
}

flex-basis는 0이므로 최대로 작게 만든다.

❗️ 이때 min-width의 기본 값 때문에 컨텐츠를 다 넣을 수 있을만큼으로 너비가 최대로 작아진다.

❗️ 레이아웃은 안정적으로 유지되어야 함
내부 컨텐츠로 인해 레이아웃이 변화하면 안된다!!

ex) 레이아웃은 식판, 내부 컨텐츠는 반찬 개념
반찬을 더 담든, 적게 담든 식판의 사이즈는 고정 되어야함

⭐️ 자식에 의해 부모의 크기가 결정되면 안되는 게 레이아웃 ⭐️

👀 문제상황
레이아웃 안의 컨텐츠가 부모 요소보다 길어서 빠져나갈 때

.container-main {
  flex-grow: 1;
  **flex-basis: 0;**
  **min-width: 0;**
}

.container-sidebar {
  width: 168px;
}

min-width가 컨텐츠의 최소 너비 이므로 flex-basis: 0을 적용해도 컨텐츠가 긴 너비를 가지면 어쩔 수 없이 부모의 요소보다 넘치게 된다.

이 때는 넘치는 부분에 min-width:0 + flex-basis: 0 을 적용한다.

1. flex-grow는 남는 가용 공간에서 나눠갖는 개념이므로 다른 것들 먼저 생각

2. flex-basis: 0 은 너비를 최소로 줄인다.
   (이 때는 min-width: auto라는 기본 값 때문에 아무리 너비를 줄여도 컨텐츠의 너비보다 줄어들 수 없다.)

3. min-width: 0 최소 너비를 0으로 지정해서 컨텐츠의 너비를 신경 쓰지 않도록 바꿔준다.
   ➡️ 이때는 min-width:0 + flex-basis: 0 로 인해 메인의 너비가 그냥 0이 된다.

4. 이렇게 진행하면 가용 공간이 많이 남으므로 flex-grow 속성으로 인해 남은 가용 공간을 메인에서 가져간다.

➡️ 이러한 방식으로 자식 요소의 너비가 부모 요소의 너비를 넘는 것을 조절할 수 있다.

❗️ 레이아웃 - 자식에 의해 부모의 크기가 결정되면 안되기 때문 !!!

💡 꿀팁
➡️ 고정 부분에는 width값 두고
➡️ 가변 부분에는 width를 안써서 구분하기

❗️ flex-item에서는 min-width가 굉장히 중요함
❗️ 레이아웃은 부모입장에서 안정성 확보해야함
❗️ 자식 --> 안정성을 확보한 것 안에서 자유롭게 배치

++ 그러면 이제 아래의 코드는 레이아웃(식판)이 자식 요소(반찬)에 따라 변화하는 불안한 코드라는 것을 인지할 수 있다!

.container-main {
  flex-grow: 1;
}

.container-sidebar {
  width: 168px;
}

👀 잘못 생각한 점
ul 안에는 li말고 다른 태그를 넣었는데,
ul 안에는 li말고 태그가 들어가면 안된다.

✔️ before

 <ul>
      <h2>Action & Adventure</h2>
      <li></li>
      <li></li>
      <li></li>
 </ul>
  <ul>
      <h2>Dramas</h2>
      <li></li>
      <li></li>
      <li></li>
 </ul>

✔️ after

<ul> 
  	<li>
    	<h2>Action & Adventure</h2>
  		<ul>
  			<li></li>
    		<li></li>
            <li></li>
  		</ul>
    </li>
    
    <li>
    	<h2>Dramas</h2>
  		<ul>
  			<li></li>
            <li></li>
    		<li></li>
  		</ul>
    </li>
</ul>

++ .category-list > li
category-list 안에 있는 li중 바로 아래에 있는 li

버튼

letter-spacing을 적용하면 각 알파벳의 오른쪽에 적용이 된다.
하지만 이렇게 되면 가운데 정렬을 해도 왼쪽으로 쏠려 보이는 현상이 일어날 수 있다.

이를 방지하기 위해 text-indent를 letter-spacing값 만큼 넣어 맨 처음 알파벳의 왼쪽에도 간격이 생겨 정확히 가운데 정렬을 할 수 있다.