[CSS] 자주 쓰는 CSS 정리

1. img, video 등 오브젝트 요소에는 object-fit: cover 속성을 사용

내용의 크기가 요소의 크기와는 상관없이 기본 알고리즘에 의해 조정된다. 이 알고리즘은 원본의 크기에 가운데 정렬된 형태를 띈다.

 

2. 반응형 css 작업 우선순위

레이아웃을 작성할 때 반응형으로 작업하고 있고, 반응형을 나누는 기준이 min-width라면 모바일 크기부터 데스크탑으로, 작은 화면에서 큰 화면으로 우선순위를 맞춰서 작업한다.

 

 

3. display: flex 사용

되도록이면 flex를 사용하되 flex를 아무 이유 없이 남발하지 말것.

flex 밑의 자식은 flex-item이 된다.

flex-item이 1일 경우 flex: 1 1 0이 된다.

grow: 늘어남 / shrink 줄어듬

flex-grow가 0이면 크기 고정, 1이면 컨테이너를 채우도록 늘어남

flex-shrink가 0이면 크기 고정, 1이면 컨테이너에 맞게 줄어듬

 

 

4. overflow

내용이 요소의 크기를 벗어 났을때 

visible : 박스를 넘어가도 보여줍니다.
hidden : 박스를 넘어간 부분은 보이지 않습니다.
scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다.
auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

 

 

5. css 상속

대표적으로 font와 color는 상속이되고, display, width와 같은 속성은 상속이 되지 않음

 

6. grid 사용

위와 같은 디자인은 3개의 칸으로 나눠서 디자인 하고, 컬럼을 모바일 1개, 태블릿 2개, 데스크탑 3개로 나눠서 반응형으로 디자인할 수 있다.

 

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-evenly gap-10

css를 위와 같이 작성하도록 한다.(with. tailwindcss)