TroubleShooting/CSS (5) 썸네일형 리스트형 [tailwind 4] Tailwind CSS에서 배경 이미지와 그라디언트 효과 동시 적용하기 색상만 그라디언트 효과를 주는 방법은 공식문서에 있는 것처럼 시도하면 됬었지만..https://tailwindcss.com/docs/background-image background-image - BackgroundsUtilities for controlling an element's background image.tailwindcss.com 이미지를 바닥에 깔고 그 위에 그라디언트를 주는 게 생각보다 시간이 걸렸다 1. CSS background 속성의 기본 동작을 활용하여2. 그라디언트를 먼저 선언하고, 그 다음에 이미지 URL을 작성합니다 3. 쉼표(,)로 구분하여 여러 배경을 나열합니다 4. 먼저 선언된 그라디언트가 위에 표시됩니다 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] Grid의 Subgrid 속성 이해하기 - 별점 레이아웃 예제 그리드 안의 그리드에서 다음과 같은 상황이 생겼다 이렇게 별표 평점 날짜를 위치 시키고 싶은데... 별표 아래 평점이 있고 날짜가 2번째 열에 있어버리는 상황.... 이럴 때 subgrid 속성을 사용하면 됩니다.부모 그리드의 열(column) 정의를 자식 요소에 상속하는 속성입니다. tailwind 일반 css 속성grid-cols-subgrid // grid-template-columns: subgrid; 주요 특징:1.부모 그리드의 열 트랙을 그대로 사용할 수 있습니다2. 부모와 동일한 그리드 라인을 공유합니다3. 중첩된 그리드 레이아웃을 더 쉽게 만들 수 있습니다 .. [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()로 동적 너비가 설정된 경우 [TroubleShooting / CSS] button border ( border: none ) 최상위 태그의 border 가 solild 4px black 으로 주어진 상황에서add to cart 란 버튼에 윗줄만 border-top 을 주려고 하면 아래 사진처럼 버튼의 테두리가 부자연스러운 모습을 볼 수 있는데, 이는 버튼 태그는 기본적으로 브라우저에 의해 border 가 1.714로 설정되어 있기 때문입니다. 먼저 border: none 을 주어서 기본 border 를 0으로 만든 후, 추가로 border-top 을 줘야 매끄럽게처리가 가능해집니다. 이전 1 다음
