[CSS] Layout

🌼레이아웃이란?

레이아웃은 웹페이지에 text, image 등의 요소들을 위치시키거나 정렬시키는 방법으로 웹페이지의 시각적인 구조를 제공한다. 이러한 레이아웃은 큰 시각에서 웹페이지를 바라볼 때의 Page layout과 홈페이지를 구성하는 조각 요소들을 바라볼 때의 Component layout으로 구분할 수 있다.

🌼레이아웃을 구성하는 3가지 방법

• Float layout: 웹 사이트의 레이아웃을 구성하는 방법 중 가장 오래된 방법이다. Float layout은 absolute positioning과 동일한 방식으로 구현된다.

• Flex box: 모던한 방법의 레이아웃 구성 방식으로 컴포넌트 레이아웃을 구성할 때 매우 좋은 방법이다. 이 방법은 가로 방향으로 요소들을 구성할 때 사용할 수 있다.

• CSS grid: 이 방식은 가로, 세로 방식으로 요소들을 구성할 때 사용할 수 있다. 페이지 레이아웃을 구성하거나 복잡한 구조의 컴포넌트 레이아웃을 구성할 때 사용할 수 있다.

🌼Float

float layout은 position: absolute; 처럼 기본적인 레이아웃 플로우에서 나와서 요소를 위치시킬 때 사용한다. absolute와 다른점은 float 요소를 감싼 주변의 요소들과의 관계이다. absolute 속성을 갖는 요소는 해당 요소 주변의 요소들에 어떤 영향도 주지 않지만 float는 주변 요소들로 감싸진 형태로 보여진다는 점에서 차이가 있다.

모든 자식 요소들이 float 속성을 가지게되면 바로 위의 부모는 자식을 모두 잃은 것과 동일하게 즉, 내부 컨텐츠가 없는것처럼 동작하는데 이는 해당 요소를 감싸고 있는 부모 요소가 높이를 가질 수 없기 때문이다.

. clear: float는 2개 이상의 요소에도 적용이 가능하지만 해당 속성을 갖는 요소들의 높이가 다를 경우에 레이아웃 구성시 충돌이 발생해서 예상치 못하게 동작할 수 있다. clear는 각 요소들과의 충돌이 발생했을 때, 누구를 기준으로 레이아웃을 구성할지 정의할 때 사용한다.

🌼Flex box

flex box는 가로 방향으로 요소들을 적절히 배치할 때 사용할 수 있는 개념이다. 주요 개념은 비어있는 공간이 있는 컨테이너 요소의 자식 요소들의 공간을 자동으로 구분하여 배치하는 것으로 컨테이너 요소 안의 자식 요소들을 가로 혹은 세로 방향으로 간단히 정렬하는 것이다.

• flex container: display:flex; 속성을 갖는 요소를 지칭할 때 쓴다.

  • gap: items 사이의 간격을 별도의 maring 속성을 사용하지 않고 줄 수 있다.

  • justify-content: 아이템들을 메인축 기준으로 정렬할 때 사용한다.(기본: 가로)

  • align-items: 아이템들을 보조축 기준으로 정렬할 때 사용한다.(기본: 세로)

  • flex-direction: 메인축을 정의할 때 사용한다.

  • flex-wrap: 아이템들이 가로의 길이를 초과할만큼 긴 경우, 넘치는 부분을 다음줄로 넘기고 싶을 때 사용한다.

  • align-content: 아이템들이 2줄 이상인 경우. 즉, flex-wrap: wrap;으로 설정된 경우에 줄 사이를 정렬할 때 사용한다.

• flex items: flex container 안의 바로 인접한 자식 요소들을 지칭할 때 쓴다.

  • align-self: 아이템들 중 단독으로 정렬 조건이 다를 경우, align-items 속성을 덮어씌우고 단독 정렬할 때 사용한다.

  • flex : flex-grow flex-shrink flex-basis; (int, int, length)

    • flex-basis: item에게 width를 주고 싶을 때 사용하는 속성이다. 요소들의 가로 길이의 합이 container의 길이보다 큰 경우에는 차지할 수 있는 최대 길이만큼만 늘어나며 원래 컨텐츠 보다 작은 값을 지정했을 경우에는 item의 컨텐츠 요소만큼을 차지한다. 즉, flex-basis가 강제적으로 적용되는 것은 아니다.

    • flex-shrink: flex-basis 설정으로 overflow 영역이 발생했을 때 container 요소 기준으로 늘어날지 혹은 축소될지를 설정할 때 사용하는 속성이다. default 값은 1(true)이다.

    • flex-grow: flex-basis로 너비를 지정하지 않았을 때, 해당 속성값에 1을 적용하면 item 요소들의 길이 합 === container 길이가 같아지도록 item의 영역이 커진다. 단, content 내용이 계산된 요소의 길이보다 클 경우에는 계산된 너비가 적용되지 않는다. 만약 특정 자식 요소에 flex-grow: 1;을 적용한다면 남은 영역은 해당 속성이 1인 아이템이 나누어서 차지하게 된다. (✓ 해당 속성은 flex-container 내부에 있는 가상 요소를 포함한 자식요소에게 주었을 때 유효하다.)

  • order: item의 순서를 소스코드의 변경없이 바꿀 때 사용한다. (-1: first, 1: last)

flex box는 flex-items를 세로를 정렬하거나 동일한 높이를 갖는 column을 생성하는 것과 같은 어려움을 쉽게 해결하는데, 간단하고 깔끔한 코드로 float 속성을 완벽하게 대체할 수 있는 개념으로 사용되고 있다. (앞의 예시와 같은 문제는 flex box 개념이 생기기 전에는 꽤 까다로운 문제였다.)

🌼CSS Grid

Grid는 가장 모던하고 쉽게 2차원의 레이아웃을 구성할 수 있는 방법 중 하나이다. CSS Grid는 요소들을 Grid container, Grid item로 구분할 수 있는데 주요한 컨셉은 Grid container 안에 있는 item 요소들을 row 혹은 column 기준으로 나누어 채울 수 있다는 것이다. Grid 속성을 사용하면 조금 덜 중첩된 html 구조 혹은 읽기 쉬운 CSS를 작성할 수 있지만 그것이 flexbox 컨셉을 완전히 대체할 수 있다는 것은 아니다.

2가지의 개념을 잘 알고 적절히 사용하는 것이 가장 좋으며 단순하게 구분하면 1D 레이아웃이라면 flexbox, 2D 레이아웃이라면 CSS Grid를 떠올려 보자.

출처: Udemy-Build Responsive Real-World Websites with HTML and CSS