와이어프레임 & Flexbox

와이어프레임

 

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다.

---

Flexbox 

Flexbox는 CSS 레이아웃 모듈 중 하나로, 플렉스 아이템 간 공간 배분 및 정렬을 편리하게 다룰 수 있도록 지원하는 방식입니다. 

Flexbox는 브라우저 호환성이 좋고, 레이아웃 설계가 쉽다는 장점이 있어서 많이 사용되고 있습니다.

Flexbox를 사용하면 플렉스 컨테이너(부모 요소)와 플렉스 아이템(자식 요소)으로 구성된 요소들을 효율적으로 정렬할 수 있습니다. 

플렉스 컨테이너는 display 속성값으로 "flex"를 지정하며, 플렉스 아이템은 flex 속성값을 지정하여 크기, 순서, 정렬 등을 조절할 수 있습니다.

Flexbox는 다양한 레이아웃 설계에 사용될 수 있습니다. 

예를 들어, 수평/수직 중앙 정렬, 아이템 간 간격 조절, 아이템 크기 비율 조정, 반응형 레이아웃 등을 구현할 수 있습니다.

Flexbox는 최신 웹 기술 중 하나로, IE 10 이상을 비롯한 대부분의 브라우저에서 지원됩니다. 

또한, CSS Grid와 함께 사용하여 더욱 복잡하고 다양한 레이아웃을 구성할 수도 있습니다.

 

---

부모 요소에 적용되는 속성

• display
  • Flexbox를 사용하려면, 부모 요소에 display: flex;를 지정해야 합니다.
  • 이 속성을 지정하면 해당 요소의 자식 요소들이 Flexbox 레이아웃 모델을 사용하여 배치됩니다.

---

• flex-direction
  • flex-direction 속성은 Flexbox 레이아웃의 방향을 설정합니다.
  • flex-direction 속성의 값에 따라 자식 요소들이 배치되는 방향이 결정됩니다.
  • flex-direction 속성의 값
    • row
    • column
    • row-reverse
    • column-reverse

---

• justify-content
  • justify-content 속성은 자식 요소들을 수평 방향으로 정렬하는 방법을 설정합니다.
  • justify-content 속성의 값
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • space-evenly 등이 있습니다.

---

• align-items
  • align-items 속성은 자식 요소들을 수직 방향으로 정렬하는 방법을 설정합니다.
  • align-items 속성의 값
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch 등이 있습니다.

---

• flex-wrap
  • flex-wrap 속성은 Flexbox 레이아웃에서 자식 요소들이 한 줄에 배치되는지 여러 줄에 걸쳐 배치되는지 결정합니다.
  • flex-wrap 속성의 값
    • nowrap
    • wrap
    • wrap-reverse 등이 있습니다.

---

• align-content
  • align-content 속성은 여러 줄로 나누어진 자식 요소들을 수직 방향으로 정렬하는 방법을 설정합니다.
  • align-content 속성은 flex-wrap 속성이 wrap 또는 wrap-reverse로 설정되어 있을 때만 사용할 수 있습니다.
  • align-content 속성의 값
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • stretch 등이 있습니다.

---

자식 요소에 적용되는 속성

• flex-grow
  • flex-grow 속성은 자식 요소가 부모 요소 내에서 차지하는 크기를 조절합니다.
  • flex-grow 속성을 사용하면 자식 요소가 사용 가능한 모든 공간을 차지할 수 있습니다.
  • flex-grow 속성은 숫자 값으로 지정되며, 값이 클수록 자식 요소의 크기가 커집니다.

---

• flex-shrink
  • flex-shrink 속성은 자식 요소가 부모 요소 내에서 차지하는 크기를 조절합니다.
  • flex-shrink 속성은 flex-grow와 반대로 작동하며, 숫자 값이 클수록 자식 요소가 크기를 줄입니다.

---

• flex-basis
  • flex-basis 속성은 자식 요소의 초기 크기를 지정합니다.
  • flex-basis 속성의 값은 자식 요소의 크기를 결정하는 데 사용됩니다.

---

• order
  • order 속성은 자식 요소들의 배치 순서를 조절합니다.
  • order 속성의 값이 작을수록 해당 요소가 앞쪽에 배치됩니다.
  • order 속성은 양수, 음수, 0을 값으로 가질 수 있으며, 기본 값은 0입니다.
  • 이 속성을 사용하여 자식 요소들의 배치 순서를 유연하게 조절할 수 있습니다.