정리하기

사람들이 착각을 하는데 div 태그밖에 after가 있는줄 알지만 사실 태그 안에 들어갑니당.
그리고 드래그가 안된다는 특징이 있다.

:not(:only-child)::after

:only-child::after

이렇게 빠르게 사이드바나 메뉴를 만들기까지 매일 연습해서 강사쌤은 4-5개월 걸렸다고 한다
나는 4개월 간다

---

float
플롯이 뭐야 띄우다잖아!

<nav class="menu-box-1">
  <ul class="row">
    <li class="cell"><a href="#">1차메뉴 1</a></li>
    <li class="cell"><a href="#">1차메뉴 2</a></li>
    <li class="cell"><a href="#">1차메뉴 3</a></li>
    <li class="cell"><a href="#">1차메뉴 4</a></li>
  </ul>
</nav>

body,
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.menu-box-1 {
  border: 10px solid red;
  width: 980px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}

.menu-box-1 > ul {
  background-color: pink;
}

.menu-box-1 > ul > li {
  background-color: gold;
  width: 25%;
  /* width : calc(100 % 4); */
}

.menu-box-1 > ul > li > a {
  display: block;
  font-weight: bold;
  text-align: center;
}

/* .font-size-0 {
  font-size : 0;
}


.font-size-0 > * {
  font-size : 1rem;  
} */

.cell {
  float: left;
}

/* 이런 속성을 줘야하는 건 규칙이야! 공식이야! 왜 쓰는지 몰라도 돼. 그냥 이렇게 묶어서 쓴다!라고 생각해라 */
.row::after {
  content: "";
  clear: both;
  display: block;
}

빈칸은 폰트를 모두 0으로 만들고
다시 모든걸 1rem으로!!
근데 이방법은 몰라도 됩니당

이럴 때는 float속성을 주면 된다~!!

---

왜 이런 라이브러리를 쓰냐 ?
왜냐면 클래스 이름들이 고정되어 있기 때문에 ...
태그고 설정이고 모두 html 태그 안에다가 집어넣기 때뭉에.. .

---

여기 사이트 들어가보면 하나씩 뭔가 선택되어 있는데 그것이 기본값입니다.
왼쪽에 있는것은 부모의 요소에게 주는것이고 오른쪽은 요소에게 직접 주는것.

flex-grow ( property for flex items ) : 남은 여백을 누가 얼만큼의 비율로 가져갈거야.
flex-shrink ( property for flex items ) : 얼만큼 양보할거야. (근데 직접적으로 다룰일 없을거같고)