22.12.23 - 레이아웃, display: flex

1. 레이아웃

1) 와이어프레임 

웹 또는 애플리케이션을 개발할때 레이아웃의 뼈대를 그리는 단계. 와이어로 설계된 모양을 의미하며 단순한 선, 도형으로 인터페이스를 시각적으로 묘사한 것이다. 단순하게 레이아웃과 제품의 구조를 보여주는 용도로 사용한다. 

와이어프레임의 가장 큰 목적은 화면의 영역을 구분하는 것이다. 

=> 각 영역에서 사용할 주요 태그를 메모하는 방식으로 와이어프레임을 작성하면 편하다! 

 

2) 화면을 나누는 방법

(1) 수직분할 - 화면을 수직으로 구분하여 콘텐츠가 가로로 배치되도록 요소를 배치한다.

(2) 수평분할 - 분할된 각각의 요소를 수평으로 구분하고 콘텐츠가 세로로 배치되도록 요소를 배치한다. 

 

3) 레이아웃 리셋

HTML 문서가 가진 기본적인 스타일이 레이아웃을 잡는데 방해되지 않도록 초기화해주는 것. 

초기화를 위한 라이브러리(Normalize.css 등)을 사용하거나 직접 코드를 작성해 구현한다.

 

2. Flexbox

Flexbox는 부모 박스 요소에 적용해 자식 박스의 방향과 크기를 결정하며, 요소를 정렬하고 요소가 차지하는 공간을 설정할 수 있다. 

 

1) 부모 박스에 적용해야 하는 flex 속성

(1) display : flex / inline-flex

display: flex;로 지정된 요소는 block 요소와 같은 성향(수직 쌓임)을 가지고 display: inline-flex;로 지정된 요소는 inline 요소와 같은 성향(수평 쌓임)을 갖는다. 두 값 모두 자식 요소들에는 영향을 주지 않는다. 

 

(2) flex-flow : flex-dicection flex-wrap; (축약속성)

- flex-direction : 자식요소들을 정렬할 축 정하기

• row(기본값) : 왼쪽에서 오른쪽으로 표시
• row-reverse : row의 반대로 표시(오른쪽 -> 왼쪽)
• column : 위에서 아래로 표시
• column-reverse : column의 반대로 표시(아래 -> 위)

- flex-wrap : 하위요소들의 크기가 상위요소의 크기를 넘으면 자동 줄바꿈을 할지 설정

• nowrap(기본값)
• wrap
• wrap-reverse

(3) justify-content : 자식요소를 축의 수평방향으로 정렬하는 방법

• flex-start
• flex-end
• center
• space-between
• space-around

 

(4) align-items : 자식요소를 축의 수직방향으로 정렬하는 방법

• stretch
• flex-start
• flex-end
• center
• baseline

 

2) 자식 박스에 적용해야 하는 flex 속성

(1) flex : <grow> <shrink> <basis>

자식요소에 flex 속성을 따로 설정하지 않을경우 flex : 0 1 auto; 기본값이 지정된다. 

 

- flex-grow : 팽창지수. 요소가 늘어나야 할때 얼마나 늘어날 것인지

절대적 크기가 아닌 자식요소의 grow 값 / 자식요소들의 grow값의 총합의 비율로 빈 공간을 차지하게 된다. 

 

- flex-shrink : 수축지수. 요소가 줄어들어야 할때 얼마나 줄어들 것인지

❗ flex-grow와 flex-shrink를 함께 사용하기보다는 grow 속성에 변화를 주는 것이 좋다. 

flex-shrink는 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기 어렵다. 따라서 grow 속성으로 비율을 변경할 경우 기본값인 1로 두는것이 좋다. 

 

- flex-basis : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지 

flex-grow 속성의 값이 0인 강우에만 flex-basis의 값이 유지된다. 

flex-grow 속성의 값이 양수일 경우 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수 있다. 

 

😎 주의사항

• width와 flex-basis를 동시에 적용할 경우 flex-basis가 우선된다.
• 콘텐츠가 많아 자식박스가 넘칠 경우 width는 정확한 크기를 보장하지 않는다
• flex-basis를 사용하지 않을 경우, 자식박스가 넘치는 경우를 대비해 max-width를 사용할 수 있다. 

 

 

*********

오늘은 flex에 대해서 정리해봤다 좀 힘들다... 조금 헷갈리는 부분도 있었는데 오늘 공부하면서 많이 도움이 됐다. 

flex에 대해 배운 김에 grid에 대해서도 정리해볼까싶다 

 

그리고 이건 flex를 게임으로 배울수있는 flex froggy 사이트 

https://flexboxfroggy.com/#ko

Flexbox Froggy