IT 공부

Flex 아이템 속성 사용 목적order: 아이템의 표시 순서를 제어하여 중요도에 따라 배치 순서를 변경하기 위해 사용합니다. 즉, 중요도에 따라 순서를 변경하거나 특정 아이템을 맨 앞이나 맨 뒤에 배치할 때 사용할 수 있습니다.flex-grow: Flex 컨테이너 내의 남은 공간을 아이템들이 비율에 맞게 차지하도록 하기 위해 사용합니다. 또는 여러 아이템이 있고, 특정 아이템이 더 많은 공간을 차지해야 할 때 사용할 수도 있습니다.flex-shrink: 공간이 부족할 때 아이템이 얼마나 줄어들지를 결정하여 반응형 디자인에서 레이아웃을 유지하기 위해 사용합니다.flex-basis: 아이템의 기본 크기를 설정하여 초기 크기를 지정하고 나머지 공간을 flex-grow와 flex-shrink로 조정하기 위해 ..

교차축 정렬 Flexbox 레이아웃에서 교차축(cross axis)은 주 축(main axis)에 수직인 축을 의미합니다.교차축 정렬은 이 축을 따라 Flex 아이템들을 배치하는 방법입니다.주 축이 수평 방향일 때 교차축은 수직 방향이 되고, 주 축이 수직 방향일 때 교차축은 수평 방향이 됩니다.교차축 정렬을 위해 두 가지 주요 align-items와 align-content 속성을 사용합니다. 1. align-itemsalign-items 속성은 Flex 컨테이너 내의 개별 Flex 아이템들을 교차축을 따라 정렬합니다.Flex 컨테이너의 높이와 관계없이 각 아이템의 위치를 지정할 수 있습니다.flex-start: 아이템들을 교차축의 시작 부분에 정렬합니다.flex-end: 아이템들을 교차축의 끝 부분에..

justify-content 속성Flex 컨테이너 내에서 주 축(main axis)을 따라 아이템들을 정렬하는 방법을 정의합니다. flex-start(기본값) : 아이템들을 주 축의 시작 부분에 정렬합니다.flex-end: 아이템들을 주 축의 끝 부분에 정렬합니다.center: 아이템들을 주 축의 가운데에 정렬합니다.space-between: 첫 번째 아이템은 시작 부분에, 마지막 아이템은 끝 부분에 정렬하고, 나머지 아이템들은 사이에 고르게 분포시킵니다.space-around: 아이템들 주위에 고르게 여백을 분포시킵니다. 아이템 간의 여백은 동일하지만, 첫 번째 아이템과 마지막 아이템의 바깥 여백은 내부 여백의 절반입니다.space-evenly: 모든 아이템들을 사이의 여백과 아이템 바깥의 여백이 동일..

flex-wrap 속성Flex 컨테이너 내의 아이템들이 주 축을 따라 한 줄에 배치될지, 아니면 여러 줄에 걸쳐 배치될지를 결정합니다. nowrap(기본값): 모든 아이템을 한 줄에 배치합니다. 아이템들이 컨테이너의 너비를 넘어서도 한 줄에 계속 배치됩니다.wrap : 아이템들을 여러 줄에 걸쳐 배치합니다. 주 축을 따라 공간이 부족하면 자동으로 줄 바꿈이 일어납니다.wrap-reverse : 아이템들을 여러 줄에 걸쳐 반대 방향으로 배치합니다. wrap과 동일하게 줄 바꿈이 일어나지만, 아이템들이 반대 방향으로 쌓입니다.flex-wrap: nowrap;flex-wrap: wrap;flex-wrap: wrap-reverse;   코드 예시 flex-wrap:nowrap(기본값) 아이템1 아이템2 ..

주축( main axis)의 방향과 교차축 (cross axis )의 방향을 결정하는 flex-direction 이라는 속성이 있습니다.flex-direction의 기본값은 row입니다.  주축 방향(main axis) : Flex container에 선언된 flex-direction의 값에 따라 자식 요소인 flex item이 나열되는 방향입니다. flex-direction:row 인 경우는 주축이 수평이 되고 flex-direction:column인 경우는 주축이 수직 방향이 됩니다.교차축 방향(cross axis ) : Flex container의 주축에 직각을 이루는 축으로 주축이 수평이며 교차축은 수직 방향이 됩니다.   flex-direction 속성이란?flex-direction 속성은 주 ..

박스 모델이란?HTML 박스 모델은 웹 페이지의 모든 요소를 사각형 박스로 취급하는 개념입니다.이 박스는 여러 개의 레이어로 구성되며, 각 레이어는 요소의 크기와 간격을 정의되거나 정의할 수 있습니다.  콘텐츠(Content): 텍스트나 이미지 등 실제 내용이 들어가는 부분이다.패딩(Padding): 콘텐츠와 테두리 사이의 여백이다. 패딩은 콘텐츠 주위에 투명한 공간을 추가한다.테두리(Border): 패딩과 마진 사이의 영역으로, 요소의 경계를 나타낸다. 테두리는 가시적일 수도 있고 투명할 수도 있다.마진(Margin): 요소와 다른 요소 사이의 외부 여백이다. 마진은 요소들 사이에 공간을 추가한다.  블록 요소(Block Elements)블록 요소는 항상 새로운 줄에서 시작하며, 가능한 전체 가로 너비..