display: flex (2) 썸네일형 리스트형 플렉스 박스: 플렉스 박스 레이아웃을 사용하여 요소를 정렬 플렉스 박스(Flexbox) 레이아웃 모델은 웹 페이지의 요소들을 유연하게 정렬하고 배치하는 데 사용되는 CSS3의 기능입니다. 이 모델은 복잡한 레이아웃을 단순하고 효과적으로 구현할 수 있게 해주며, 특히 반응형 디자인에 매우 유용합니다. 플렉스 컨테이너(Flex Container) 설정 Flex Container 선언: display: flex 또는 display: inline-flex를 사용하여 플렉스 컨테이너를 선언합니다. flex는 블록 레벨 컨테이너를 만들고, inline-flex는 인라인 레벨 컨테이너를 만듭니다. Flex Direction (플렉스 방향): flex-direction: 플렉스 아이템들이 놓일 주 축(main axis)의 방향을 결정합니다. 옵션에는 row(행), row-re.. 포지션과 레이아웃: 요소의 위치와 레이아웃을 제어 웹 페이지의 포지션(Position)과 레이아웃(Layout)에 대해 좀 더 상세하게 설명드리겠습니다. 이 두 개념은 웹 페이지의 구조를 정의하고, 요소들이 어떻게 배치되고 상호 작용하는지를 결정하는 핵심적인 요소입니다. 포지션(Position) 포지션은 HTML 요소가 페이지 내에서 어떻게 배치되는지를 결정합니다. 주요 포지션 속성은 다음과 같습니다: Static (정적 위치): 모든 HTML 요소의 기본 포지션입니다. 요소가 자연스러운 문서 흐름에 따라 배치됩니다. top, right, bottom, left 속성이 적용되지 않습니다. Relative (상대 위치): 요소의 원래 위치를 기준으로 상대적으로 이동시킵니다. top, right, bottom, left 속성으로 이동 거리를 지정할 수 있습.. 이전 1 다음