Wep developer 부트캠프 (2022-05-14)

CSS 정리

 

display : flex; (flex-direction : row;)
기본 방향이 가로로 설정 되어 있어 실행할 경우
각 요소들이 행방향으로 정렬됨

overflow : hidden;
넘치는 부분을 잘라서 보여지지 않게 만듦

object-fit : cover;
이미지를 사용 가능한 공간에 맞춰줌

flex-direction : column;
컨테이너 블록 개체 내에 있는 요소들을 열 방향으로 정렬

grid-template-columns : 1fr 1fr;
전체 너비를 기준으로 반으로 나눠 2열로 정렬됨 

gap : (세로) (가로);
설정한 값만큼 서로 다른 요소가 멀어지게 됨

li:first-of-type {
// 부모요소 ul 안에 있는 li 중에 첫번째 요소를 선택
}

li:nth-of-type( ) {
// ( ) 괄호 안에 넣은 숫자에 해당하는 li 요소를 선택
}

grid-column : 1 / (span) 3;
부모 요소를 기준으로 1 - 2 - 3까지 li 범위를 넓힘