2021-05-21 (39일차) float-grid, 밑줄 애니메이션, flex, flex-grow, 수직정렬방법 align-items, align-self, 버튼만들기

149강~150강

 

- float-grid

  .float-grid::after { content:""; display:block; clear:both; }

  .float-grid > * { float:left; box-sizing:border-box; }

 

- 밑줄 애니메이션

  1) 좌 > 우

  효과를 주고 싶은 태그의 뒤 or 앞에 absolute를 놔주기

  ex) 태그::after { content:"";  background-color:white;  width:0;  height:2px;

                      position:absolute;  bottom:0;  left:0;  transition:width .3s; }

       :hover > a::after { width:100%; }

  2) 가운데 > 양쪽

  효과를 주고 싶은 태그의 뒤 or 앞에 absolute를 놔주기

  ex) 태그::after { content:"";  background-color:white;  width:0;  height:2px

                      position:absolute;  bottom:0;  left:50%;   transform:translateX(-50%);   transition:width .3s; }

       :hover > a::after { width:100%; }

 

---

<flex>

- display : flex

  자식들을 옆으로 나열시킨다

  → 자식들은 부모의 높이를 따라감

  ※ inline요소는 높이값이 적용되지 않는다.

 

- flex-grow : 1;

  너비를 최대한 넓혀준다

  = 남은 여백을 다 채워준다

 

- 수직정렬하는 방법

  부모에게 display:flex 값과 align-items:center값을 주기

  align-items의 기본값은 stretch이다

  ※ flex로 상단바를 만들어서 수직정렬은 이미 다 맞춰져있는 상황일 때,

  굳이 메뉴 아이템들에게 위, 아래 padding을 위, 아래에는 주지 않아도 된다

 

- 버튼만들기(서류제출하기)

  emmet : a.top-bar__btn-go-submit-page{서류제출하기}

  버튼만 혼자 가운데 압축되어 가게 하기 위하여 align-self로 주기

  top-bar__btn-go-submit-page { align-self : center; }