레이아웃2 CSS Flexbox를 활용한 레이아웃 디자인 방법 CSS Flexbox는 최근에 가장 많이 사용되는 레이아웃 디자인 방법 중 하나입니다. Flexbox를 사용하면 간단하게 유연한 레이아웃을 구성할 수 있습니다. 이번 글에서는 CSS Flexbox를 활용한 레이아웃 디자인 방법에 대해 알아보겠습니다. Flexbox란? CSS Flexbox는 브라우저에서 요소의 크기, 위치 및 순서를 유연하게 제어할 수 있는 레이아웃 모듈입니다. Flexbox는 요소를 가로 또는 세로 방향으로 정렬할 수 있으며, 간격을 조절하거나 중앙 정렬을 할 수도 있습니다. Flex Container와 Flex Item Flexbox 레이아웃은 Flex Container와 Flex Item으로 구성됩니다. Flex Container는 Flexbox 레이아웃을 적용할 요소이며, Flex.. 2023. 3. 13. [CSS 핵심강좌] 4. 레이아웃 웹 페이지 레이아웃은 페이지의 구조와 요소들의 배치를 결정합니다. CSS를 이용하여 다양한 레이아웃을 구현할 수 있습니다. 이 강좌에서는 주요 레이아웃 기법에 대해 알아보겠습니다. 정적 레이아웃 (Static Layout) 정적 레이아웃은 웹 페이지의 요소들을 고정된 크기와 위치에 배치합니다. 주로 position: static과 position: relative를 사용하여 구현합니다. .box { position: static; width: 200px; height: 200px; } 고정 레이아웃 (Fixed Layout) 고정 레이아웃은 웹 페이지의 요소들을 뷰포트에 상대적인 고정된 위치에 배치합니다. 스크롤이 발생해도 요소의 위치가 변하지 않습니다. 주로 position: fixed를 사용하여 구현.. 2023. 3. 4. 이전 1 다음 반응형
