Grid Layout 사용 (2) 썸네일형 리스트형 화면 분할 레이아웃: 화면을 분할하여 다양한 레이아웃을 만들기 화면 분할 레이아웃은 웹 페이지의 공간을 효과적으로 활용하여 다양한 콘텐츠를 표시하는 데 유용합니다. CSS를 사용하여 다양한 화면 분할 레이아웃을 만드는 방법은 다음과 같습니다. 1. Flexbox 사용 Flexbox로 수평 분할: display: flex;를 사용하여 요소들을 수평으로 나란히 배치합니다. 예시: .container { display: flex; } .column { flex: 1; /* 동일한 너비로 분할 */ } 2. Grid Layout 사용 Grid로 레이아웃 분할: display: grid;와 grid-template-columns, grid-template-rows를 사용하여 복잡한 레이아웃을 구성합니다. 예시: .container { display: grid; grid-te.. 콘텐츠 중앙 정렬: 콘텐츠를 수평 및 수직으로 중앙 정렬 콘텐츠를 수평 및 수직으로 중앙 정렬하는 것은 웹 페이지의 레이아웃에서 중요한 부분입니다. CSS를 사용하여 콘텐츠를 가운데에 배치하는 다양한 방법을 살펴보겠습니다. 1. Flexbox 사용 Flexbox 중앙 정렬: display: flex;와 justify-content: center;, align-items: center;를 사용하여 수평 및 수직 중앙 정렬을 할 수 있습니다. 예시: .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* 전체 뷰포트 높이 */ } 2. Grid Layout 사용 Grid 중앙 정렬: display: grid;와 place-items: center;를 사용하.. 이전 1 다음