중앙정렬 (2) 썸네일형 리스트형 CSS에서 max-width 설정 시 반응형 중앙 정렬 문제 해결하기 (tailwind : max-w-screen-sm) 모바일 화면에서 max-w-screen-sm ( max-width: 640px ) 등의 고정 너비를 줄 경우, div가 부모 요소의 전체 너비(width: 100%)를 차지하게 되고,이로 인해 마치 가운데 정렬된 것처럼 보이는 시각적 효과가 생깁니다. 그로 인해서 해당 사이즈를 초과하는 테블릿이나 PC 화면에서는 컨텐츠가 가운데 정렬이 안된 것 처럼 보이는 현상이 생기게 됩니다.이때는 명시적인 중앙 정렬이 필요하게 됩니다. 해당 사이즈 이상의 화면에서는 별도로 미디어 쿼리를 주고 좌우 마진을 auto를 주면 좌우 정렬이 됩니다. @media (min-width: 768px) { margin: 0 auto ;}혹은 테일윈드에서는 md:mx-auto 추가 // ... existi.. [CSS] margin: 0 auto 중앙 정렬이 작동하지 않는 경우 필수 조건은 아래 두개를 만족해야 합니다. 1. 블록 레벨 요소여야 함 (display: block, grid, flex 등) 2. 너비가 지정되어 있어야 함 (width, max-width) 대표적으로 작동하지 않는 케이스들입니다 1. position: absolute 또는 fixed 가 아니여야 합니다.(일반적인 문서 흐름에서 요소를 제거하기 때문) 2.float 속성이 적용된 경우 3.부모 요소에 display: flex가 적용된 경우 4.transform 속성이 적용된 경우 5. calc()로 동적 너비가 설정된 경우 이전 1 다음
