CSS 팁들

translateX 말고도 position: absolute일 때 화면 정중앙에 오도록하는 법

left: 0;
right: 0;
margin 0 auto;

 

사용자 화면 크기

window.outerWidth : 브라우저 전체의 너비
window.outerHeight : 브라우저 전체의 높이
window.innerWidth : 브라우저 화면의 너비
window.innerHeight : 브라우저 화면의 높이

 

align-self

그리드 또는 플렉스 항목의 align-items 값을 재정의함

 

이미지 관련

object-fit콘텐츠가 박스 내 위치할 지점 설정

aspect-ratio

가로 세로 비율