minyoung

먼저, position 속성의 기본 개념은 아래와 같다. position 속성 : 요소의 위치를 제어하며, 문서 흐름과 부모 요소의 영향을 결정  position 속성은 HTML 요소의 위치 지정 방법을 설정하는 CSS 속성이다.이 속성을 사용해서 요소를 문서의 특정 위치에 배치하고 위치 관련 속성을 조절한다.  position: static; . position: static;- 기본 값으로, static으로 설정된 요소를 일반적인 문서의 흐름에 따라 배치 -> 즉, 위치가 지정되지 않고 요소는 화면의 상단에 차례대로 배정됨 - 위치 지정이 없음 - top, left, bottom, right 속성은 효과가 없음- 다른 위치 지정 속성을 사용하지 않을 때 적용되는 값  position: relative..

21단계align-content: flex-start;align-content는 수직 간격을 정렬한다.align-content 속성은 여러 줄로 나뉜 Flex 컨테이너의 교차 축 정렬을 설정하는 데 사용된다.이 속성은 flex-wrap 속성이 wrap 또는 wrap-reverse로 설정되어 있을 때에만 의미가 있다.기본적으로 align-items 속성은 단일 줄 내에서의 교차 축 정렬을 설정하지만, 여러 줄이 있는 경우 align-content 속성을 사용하여 여러 줄 간의 교차 축 정렬을 설정할 수 있다.align-content 속성의 값으로는 다음이 올 수 있는 것들은 아래 체크 표시에 정리해두었다.align-content는 여러 줄들 사이의 간격을 지정하며, 한 줄만 있는 경우에는 align-con..

16단계align-self: flex-end;align-self는 flex-items 속성으로 이전 포스팅에서 다뤘던 order 속성에 이은 두 번째 flex-items 속성이다.즉, 개별 요소에 적용할 수 있는 속성이다.align-self는 align-items 값을 재정의한다. grid에서는 grid area 항목을 정렬하고, flexbox에서는 cross axis 항목을 정렬한다.align-self 속성은 flex 컨테이너의 아이템에 적용되며, 해당 아이템의 교차 축(cross axis)에서의 정렬을 지정하는데 사용된다. 이 속성을 통해 개별적으로 특정 Flex 아이템의 정렬을 제어할 수 있다.일반적으로 align-items 속성은 flex 컨테이너 내 모든 아이템의 교차 축 정렬을 지정하는 데 사..

11단계flex-direction: column;justify-content: flex-end;flex-direction: column;을 통해 주축을 수직으로 바꾸고justify-content: flex-end;를 통해 수직 기준으로 바닥으로 이동시켜준다.12단계flex-direction: column-reverse;justify-content: space-between; flex-direction: column-reverse;를 적용시켜서 주축을 수직으로 만들어주고, 아래에서부터 역순으로 배치한다.justify-content: space-between;을 적용시켜서 수직 기준 space-between으로 아이템 간의 사이 간격을 동일하게 만들어준다. 13단계flex-direction: row-reve..

6단계justify-content: center;align-items: center;ui 레이아웃을 배치 하다보면 align-items와 justify-content 속성을 같이 사용하는 경우가 많다.6단계에서는 이에 대비한 연습을 할 수 있다.주축이 수평이다.justify-content(주축에 적용) center를 통해 수평 기준 가운데로 위치시킨다.align-items(교차축에 적용) center를 통해 수직, 세로 기준 가운데로 위치시킨다.7단계align-items: flex-end; justify-content: space-around;주축이 수평이고, align-items 활용해 수직 기준 바닥으로 정렬한다 -> flex-end;그 다음 justify-content 활용해 수평 기준 space-..

display: flex; 속성을 사용하면 Flexbox 레이아웃이 생성되며, 이때 기본적으로 main axis는 수평(가로) 방향이 됩니다. Flexbox에서 main axis는 주로 항목들이 배치되는 주축을 나타냅니다. 1단계 : justify-content: flex-end;수평이 기본 main axis로, justify-content: flex-end를 통해 오른쪽 끝으로 froggy 요소를 이동시킵니다.justify-content는 주축(main axis)이 기준입니다.flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.2단계: justify-content: center;수평이 기본 main axis로, 수평 기준 가운데로 위치시켜준다.center: 요소들을 컨테이너의 가운데로 정렬한다...