2024-01-17 (28일차) - transition, float, flex

📅 2024-01-17, 28일차

TODO

[프론트엔드]
<풀다운메뉴 V3> 영상 다시보기
<사이드바 만들기> 영상 다시보기
<flex로 메뉴 만들기> 영상 다시보기

• 라이브러리 활용방법 이해하기
• flex 개념 이해하기

[추가로 한 것]

• 풀다운메뉴 구현하기

---

fixed

position: fixed;

• absolute과 비슷한 유령인데, 스크롤을 따라다니는 유령임!!!

hr

• 수평선

<hr>

transition

• hover 사용해서 색이 전환될 때 너무 instantly 바뀌고 깜빡거릴 경우, 색을 부드럽게 전환 시키고싶을때 사용 -> 1s는 1초. 3s는 3초.

transition: background-color 1s; 
transition: background-color 1s, width 3s; 
/*(칼라 전환하면서 너비도 전환하고 싶을 때)
(그러나 시작점이 있어야지만 너비 전환이 적용 된다)*/

• hover 하위에 넣으면 마우스 올릴때만 적용이고, 엘리멘트 하위에 아예 박아두면 올리던 떼던 기본속성이 전환 시 부드러워짐

float

• 유격 없애는 방법!

.cell {
float: left;
}

.row::after {
content: "";
clear: both;
display: block;

display: flex

• display: block, display: inline-block과는 달리, display: flex는 엘리먼트자신한테 영향을 주는게 아니라, 자식까지만 영향을 준다.
• 자식을 flex item으로 만들고 싶다는 뜻! == Froggy 게임 속 개구리로 만들고싶다는 뜻
• flex 아이템들은 부모들의 키를 따라간다고?