넓고, 깊게.

[20210421] CSS 백그라운드, 필터, 트랜스폼, 트랜지션

background -size 속성 cover와 contain 잘 구별하기. filter 포토샵 필터 효과라고 생각하면 된다. 벤더 프리픽스 사용 transform 형태 전환 효과 속성이다. 다양한 속성이 있으니 꼭 공부하기. transition 장면 전환 속성이다. 트랜스폼과 마찬가지로 꼭 공부하기.

[20210419] CSS 레이아웃 활용

flex float보다 쉬운 레이아웃 속성. container(감싸는 요소)에 display: flex를 적용시켜 flex를 시작한다. item(자식요소)에는 세부적인 속성을 적용시킨다. float 레이아웃 속성. 이미지+텍스트 경우, 이미지와 텍스트 요소에 각각 float를 주어 가로로 흐르듯 레이아웃을 구성한다. 그리고 자리 차지를 위해 width을 주어야 한다. 하지만 이미지 따로 텍스트 따로 구성하고 싶다면 float를 해제하고 싶은 요소에 clear를 준다. 멀티 컬럼 컬럼의 스타일을 적용할 때 사용하는 속성. container에 아래의 속성을 모두 필요한 것만 준다. 컬럼의 속성 column-count column-width 컬럼과 컬럼 사이의 속성 column-gap 컬럼과 컬럼 사이의 선 속성 column-rule-style column-rule-width column-rule-color *1시간 분량 강의*