HTML CSS/CSS flexbox (7) 썸네일형 리스트형 웹페이지 레이아웃 구성해 보기 - 1 💡 학습 목표Flexbox를 사용하여 수평 및 수직 정렬을 구현할 수 있다. Flexbox를 활용해 네비게이션 바를 구성할 수 있다. Flexbox를 이용해 카드 레이아웃을 구성할 수 있다. 홈 소개 서비스 연락처 수평 및 수직 정렬된 아이템 카드 1 카드 내용 1 카드 2 카드 내용 2 카드 3 카드 내용 3 카드 4 카드 내용 4 카드 5 카드 내용 5 카드 6 카드 내용 6 FlexItem의 세밀한 제어 flex 속성 💡 학습 목표- Flex 아이템의 속성을 이해하고 사용할 수 있다. - Flexbox 레이아웃에서 각 아이템의 순서, 크기 및 정렬을 제어할 수 있다. - order, flex-grow, flex-shrink, flex-basis, flex, align-self 속성의 사용 목적과 상황을 파악할 수 있다. Flex 아이템 속성 사용 목적order: 아이템의 표시 순서를 제어하여 중요도에 따라 배치 순서를 변경하기 위해 사용합니다. 즉, 중요도에 따라 순서를 변경하거나 특정 아이템을 맨 앞이나 맨 뒤에 배치할 때 사용할 수 있습니다.flex-grow: Flex 컨테이너 내의 남은 공간을 아이템들이 비율에 맞게 차지하도록 하기 위해 사용합니다. 또는 여러 아이템이 있고, 특정 아이템이 더 많은 공간을 차.. 교차축 정렬에는 align-items와 align-content 이다. 💡 학습 목표 Flexbox 레이아웃에서 교차축은 주 축(main axis)에 수직인 축이다. 교차축 정렬을 위해 두 가지 주요 속성은 align-items와 align-content 이다. 교차축 정렬이란?Flexbox 레이아웃에서 **교차축(cross axis)**은 주 축(main axis)에 수직인 축을 의미합니다. 교차축 정렬은 이 축을 따라 Flex 아이템들을 배치하는 방법입니다. 주 축이 수평 방향일 때 교차축은 수직 방향이 되고, 주 축이 수직 방향일 때 교차축은 수평 방향이 됩니다. 교차축 정렬을 위해 두 가지 주요 align-items와 align-content 속성을 사용합니다. 1. align-itemsalign-items 속성은 Flex 컨테이너 내의 개별 Flex 아이템들.. 주축 방향 정렬 justify-content 란? 💡 학습 목표 justify-content 속성을 이해하고 언제 사용할 수 있는지 알아보자. justify-content 속성이란justify-content 속성은 Flex 컨테이너 내에서 주 축(main axis)을 따라 아이템들을 정렬하는 방법을 정의합니다.flex-start: 아이템들을 주 축의 시작 부분에 정렬합니다 (기본값).flex-end: 아이템들을 주 축의 끝 부분에 정렬합니다.center: 아이템들을 주 축의 가운데에 정렬합니다.space-between: 첫 번째 아이템은 시작 부분에, 마지막 아이템은 끝 부분에 정렬하고, 나머지 아이템들은 사이에 고르게 분포시킵니다.space-around: 아이템들 주위에 고르게 여백을 분포시킵니다. 아이템 간의 여백은 동일하지만, 첫 번째 아이템.. flex-wrap 이해하기 💡 학습 목표 flex-wrap 속성과 값에 대해서 알아 보자. flex-wrap 속성이란?display: flex; 속성을 사용하여 Flexbox 레이아웃을 구성할 때, 부모 요소를 Flex 컨테이너로 설정하고, 그 자식 요소들을 Flex 아이템으로 취급하는 개념을 학습하였습니다. 이번에는 주요 속성 중 하나인 flex-wrap 속성에 대해서 알아봅시다.flex-wrap 속성이란 Flex 컨테이너 내의 아이템들이 주 축을 따라 한 줄에 배치될지, 아니면 여러 줄에 걸쳐 배치될지를 결정합니다. flex-wrap 속성에는 아래와 같은 값을 사용할 수 있습니다.nowrap : 기본값으로, 모든 아이템을 한 줄에 배치합니다. 아이템들이 컨테이너의 너비를 넘어서도 한 줄에 계속 배치됩니다.wrap : 아이.. flex-direction 속성이란? 💡 학습 목표주 축(main axis)과 교차 축(cross axis) flex-direction: row, row-reverse, column, column-reverse FlexBox의 두 개의 축flexbox 레이아웃의 정렬을 이해하는데 가장 중요한 역할을 하게 됩니다. 주축( main axis)의 방향과 교차축 (cross axis )의 방향을 결정하는 flex-direction 이라는 속성이 있습니다. flex-direction의 기본값은 row입니다.주축 방향(main axis) : Flex container에 선언된 flex-direction의 값에 따라 자식 요소인 flex item이 나열되는 방향입니다. flex-direction:row 인 경우는 주축이 수평이 되고 flex-direc.. Flexbox 란? 💡 학습 목표Flexbox란 무엇인가? Flex 컨테이너와 Flex 아이템 웹 페이지의 요소들을 유연하게 배치하려면 먼저 CSS 레이아웃 방식에 대한 이해가 필요합니다.그 중에서 먼저 HTML 박스 모델과 블록 및 인라인 요소 또는 인라인블록 속성의 개념을 이해하는 것이 선행되어야 웹 페이지 레이아웃을 자유롭게 다룰 수 있습니다. 박스 모델이란?HTML 박스 모델은 웹 페이지의 모든 요소를 사각형 박스로 취급하는 개념입니다. 이 박스는 여러 개의 레이어로 구성되며, 각 레이어는 요소의 크기와 간격을 정의되거나 정의할 수 있습니다. 콘텐츠(Content): 텍스트나 이미지 등 실제 내용이 들어가는 부분이다. 패딩(Padding): 콘텐츠와 테두리 사이의 여백이다. 패딩은 콘텐츠 주위에 투명한 공간을 추가.. 이전 1 다음
