layout (2) 썸네일형 리스트형 [CSS] Grid의 Subgrid 속성 이해하기 - 별점 레이아웃 예제 그리드 안의 그리드에서 다음과 같은 상황이 생겼다 이렇게 별표 평점 날짜를 위치 시키고 싶은데... 별표 아래 평점이 있고 날짜가 2번째 열에 있어버리는 상황.... 이럴 때 subgrid 속성을 사용하면 됩니다.부모 그리드의 열(column) 정의를 자식 요소에 상속하는 속성입니다. tailwind 일반 css 속성grid-cols-subgrid // grid-template-columns: subgrid; 주요 특징:1.부모 그리드의 열 트랙을 그대로 사용할 수 있습니다2. 부모와 동일한 그리드 라인을 공유합니다3. 중첩된 그리드 레이아웃을 더 쉽게 만들 수 있습니다 .. [Next.js] layout.js 와 templete.js 의 차이점 1. Layout.js공유 UI를 여러 페이지에서 재사용페이지 전환시 리렌더링되지 않음한번 마운트된 후 계속 유지되는 특성상태가 유지됨헤더, 네비게이션 바와 같은 지속적으로 유지되어야 하는 UI 요소에 사용리렌더링되지 않아 성능상 이점2. Templete.js매 페이지 전환시 새로운 인스턴스 생성상태가 유지되지 않음 (not preserved)매번 새로 마운트됨페이지 뷰 추적 , 페이지 전환 애니메이션, 입력 값 초기화가 필요한 경우에 사용컴포넌트 격리가 필요할 때도 사용템플릿은 매번 새로 마운트되어 메모리 관리 필요 // Layout.tsx'use client'export default function Layout({ children }) { console.log('Layout 마운트됨!') // 최.. 이전 1 다음
