실무에서 많이쓰는 css tip

padding-inline : 20px 이라고 css에 작성을 하게되면
padding-left:20px; padding-right:20px; 과 같은뜻이된다.

padding-block : 20px; 이라고 css에 작성을 하게되면
padding-top:20px; padding-bottom:20px; 과 같은 뜻이된다.

margin도 마찬가지이다.

margin:0 auto; 대신
margin-inline : auto 로 바꿔서 쓸수있다.

2. aspect-ratio

img {width:8rem; aspect-ratio:1;}
을 하게되면 가로 8rem 높이 8rem을 갖게된다.

img {object-fit:cover;}
를 하게되면, 이미지가 잘리더라도 꽉채우게된다.

aspect-ratio를 쓰려면 가로 or 세로 값 중 하나를 제거해야한다.

3. self

그리드를 사용할때 저 더보기버튼을 세로 중앙으로 맞추는 방법이있다.

align-self:center; 를 추가해주면,

이렇게 중앙에 맞게 배치가된다.

4. align-content:center;

가로중앙 정렬은 text-align:center로 하면 되지만
과거에는 세로 정렬할때는 flex에서 align-item을 쓰던가 line-height를 부모높이만큼 줘서 세로정렬을 맞추어야만했다. 하지만 현재 aligh-content:center 를 주게되면 손쉽게 세로정렬을 할수있게된다.