CSS - Grid center 잡기(grid 정렬)

display를 grid를 줬는데 grid의 정렬이 안 맞는 경우가 있다. 이때 flex와 마찬가지로 justify-content: center; 로 grid 상자의 중심을 맞추고, margin: auto를 줌으로써 가운데 정렬이 된다. margin:auto 만 주면 요소들이 오른쪽으로 쏠린다. 이 요소들을 가운데 정렬하기 위해 justify-content: center;를 사용한다. 적용 후 정렬이 되어있다.

2020.09.29

CSS - !important

Css의 적용에는 순서가 있어서 뒤에서 적용된 Css가 우선적으로 적용된다. 그런데 이런 적용을 무시하고 항상 최우선으로 적용하려고 쓰는 것이 !important이다. .d-block{ height:600px !important; margin:0 auto; } .d-block{ height:1000px; margin:0 auto; } 위 처럼 선언되면 뒤에 있는 height:1000px가 적용되는 것이 맞지만 !important가 있는 height:600px가 우선순위를 가지므로 적용된다. 가끔 bootstrapt를 사용하면 !important로 인해서 원하는 크기가 안먹히는 경우가 있다. 위와 같은 상황을 해결하기 위해서 아래와 같이 max를 이용한다. .w-100{ max-width:600px; he..

2020.09.10