bookmark_borderbookmark
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이 일곱 번째 예에서는 이미 학습한 개념을 결합하여 자동으로 배치되고 유연한 하위 요소가 있는 반응형 레이아웃을 만듭니다. 정말 깔끔합니다. 여기서 기억해야 할 핵심 용어는 repeat, auto-(fit|fill), minmax()이며 약어 RAM으로 기억할 수 있습니다.
다시 repeat()를 사용하지만 이번에는 명시적인 숫자 값 대신 auto-fit 키워드를 사용합니다. 이렇게 하면 이러한 하위 요소를 자동으로 배치할 수 있습니다. 이러한 하위 요소는 기본 최솟값 150px와 최댓값 1fr입니다. 즉, 작은 화면에서는 전체 1fr 너비를 차지하며 각각 너비 150px에 도달하면 같은 선으로 흐르기 시작합니다.
auto-fit의 경우 완전히 비어 있는 트랙은 0로 축소되고 채워진 트랙이 커져서 공간을 차지합니다. 그러나 이를 auto-fill로 변경하면 빈 트랙이 채워진 경우와 동일한 공간을 차지합니다.
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2023-10-25(UTC)"],[],[]]