2. 반응형 grid 만들기. grid 를 만들면, 1fr, 1fr ... 이나, 2rem , 3rem ... 이나 어찌됐든 가로나 세로열의 수를 정하곤 한다. 반응형에 따라, grid 의 위치를 배열을 바꾸고싶다. repeat ( auto-fill, mixmax("xx" rem, 1fr) )이것을 이용한다. display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; 2022. 12. 7. 1. 매번 헷갈리는 absolute 중앙 정렬 1. 중앙 정렬하기 with transform position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 2. 중앙 정렬하기 with calc position: absolute; width: 20rem; top: 35%; left: calc(50% - 10rem); => top 은 calc(50% - height / 2) left 는 calc(50% - width / 2) * 둘의 차이점 transform 을 사용하면, 내부의 div 를 건드렸을때, 조금 위치가 변동 될 수 있다. calc 를 사용하면, 변함이 없다. 무슨소리인지는 해보면 안다. 나는 calc 로 사용 하는 것이 좋은 것 같다. 2022. 12. 7. 이전 1 다음