레이아웃

---

레이아웃이란, 각 요소의 위치를 목적에 맞게, 보기 좋게 배치하는 작업을 의미한다. 웹 페이지에서의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소로서, 웹 개발자에게 레이아웃은 JS에 대해 배우는 만큼이나 중요하다.

와이어프레임

와이어프레임은 레이아웃의 뼈대를 그리는 단계를 의미한다.
단순한 선이나 도형으로 인터페이스를 시각적으로 묘사한 것으로, 아주 단순하게 레이아웃과 구조를 보여주는 용도로만 사용하기 때문에, 스타일링 요소나 UX는 이 단게에서 전혀 판단되지 않는다.

레이아웃 리셋

HTML 문서는 기본적인 스타일을 가지고 있는데, 이 스타일이 때로는 레이아웃을 잡는데 방해가 되기도 한다. 이런경우,

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

으로 기본 스타일링을 제거하고 사용하기도 한다.

Flexbox

---

Flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다.

Flexbox로 레이아웃을 구성하는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.

display: flex

display: flex는 부모박스에 적용하여, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법으로, 이 또한 Flexbox 속성 중 하나이다.

Flexbox 속성을 사용할 때, 유의해야할 점이 있는데, 부모요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 다르다는 것이다. 적절한 위치에 속성을 지정하지 않는다면, 요소들이 원하는대로 정렬되지 않는다.

부모 요소에 적용해야 하는 Flexbox 속성

1. flex-direction

정렬 축 정하기.
주요 속성값은 4가지로, row, column, row-reverse, column-reverse가 있다.

mdn flex-direction시도해보기 에서 정렬방식을 쉽게 볼 수 있다.

2. flex-wrap

줄 바꿈 설정하기.
주요 속성값은 3가지로, nowrap, wrap, wrap-reverse가 있다.

mdn flex-direction시도해보기 에서 정렬방식을 쉽게 볼 수 있다.

3. justify-content

자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정하기.
주요 속성값으로는 flex-start, flex-end, center, space-between, space-around가 있다.

mdn flex-direction시도해보기 에서 정렬방식을 쉽게 볼 수 있다.

4. align-items

자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정하기.
주요 속성값으로는 stretch, flex-start, flex-end, center, baseline이 있다.

mdn flex-direction시도해보기 에서 정렬방식을 쉽게 볼 수 있다.

자식 요소에 적용해야 하는 Flexbox 속성

flex속성의 값

flex속성에는 세가지 값을 지정해 줄 수 있다.

flex: <grow> <shrink> <basis>

grow(팽창지수)는 요소의 크기가 늘어날 때, 얼마나 늘어날 것인지
shrink(수축지수)는 요소의 크기가 줄어들 때, 얼마나 줄어들 것인지
basis(기본크기)팽창 수축과 관계없이 요소의 기본 크기는 얼마인지

를 의미한다. 만약, 속성을 따로 설정해 주지 않는다면 기본값으로

flex: 0 1 auto;

가 적용되게 되며, 오른쪽으로 콘텐츠의 크기만큼 배치된다.

mdn flex에서 어떤식으로 적용되는지 테스트할 수 있다.