231115 종합반 앨범, 시계 복습

css - display : flex;

강의를 듣는데 타이틀을 설정할 때 이것만 그대로 복사하면 된다고 한다.

그런데 뭔지도 모르고 복사해서 쓰니 찝찝하다.

 

아래 블로그에 css의 flex에 관해서 다 정리되어있어서 편하게 봤다.

https://narup.tistory.com/210

 

 

[CSS] display : flex 정리(flexbox)

flex는 복잡한 레이아웃을 간단하게 구현할 수 있도록 요소를 효율적으로 배치 분산 정렬 시킬 수 있다.

flex가 적용된 요소는 flex container 화 되고 자식요소는 자동적으로 flex item이 된다.

이 flex item 의 위치는 주축에 따라 정렬, 이 주축은 flex-direction 으로 설정한다. (기본 row)

 

flex 적용 전

flex 적용 후 (기본 row 지정)

flex-direction: column;

justify-content: center; (주축의 중앙을 기준으로 item 정렬)

align-items: center; item 의 margin box 가 주축 중앙에 위치

---

시계 코드에서 const date를 함수 밖으로 빼면 업데이트 되지 않는다.

setInterval 로 실행될 때 함수안에서 1초마다 Date() 값이 업데이트되는데 함수밖으로 나가면 로딩 당시의 시간으로 고정되기 때문

---