오늘은 웹 페이지의 레이아웃을 구성하기 위해 빼놓을 수 없는 Flexbox에 대해 알아보았다.
- 수직 분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치한다.
- 수평 분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치한다.
HTML 문서는 기본적인 스타일을 가지고 있다. 때때로 HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 한다.
박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, <body>
요소가 가진 기본 스타일에는 약간의 여백이 있다.
width
, height
계산이 여백을 포함하지 않아 계산에 어려움이 있다.
브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다르다.
이러한 수요에 따라 초기화(리셋)을 위한 다양한 라이브러리(Normalize.css)가 등장했지만, 사실 굳이 라이브러리를 사용할 필요는 없으며, 위에 언급한 문제를 해결할 몇 줄의 코드를 적용시키면, 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있다.
[코드] 기본 스타일링을 제거하는 CSS 코드의 예시
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
display: flex;
를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.flex-direction
을 이용하여 요소를 정렬할 방향을 결정할 수 있다.justify-content
와align-items
를 이용하여 수평-수직 정렬을 결정할 수 있다.flex-grow
를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.flex-basis
를 이용하여 요소의 기본 크기를 결정할 수 있다.- VSCode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
flex-direction
속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정한다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 한다.flex-wrap
속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다. 설정해 주지 않으면 줄 바꿈을 하지 않는다.justify-content
속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다.flex-direction : row
인 경우 ↔flex-direction : column
인 경우 ↕️align-items
속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다.
요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성이다.
flex 속성에는 세 가지 값을 지정해줄 수 있다.
- grow(팽창 지수) : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미
- shrink(수축 지수) : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지를 의미
- basis(기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미
자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치된다.
flex: 0 1 auto; /* flex: grow shrink basis */
꼭 flex 속성 안에 세 가지 값을 한 번에 설정해줄 필요 없이, 다음과 같이 각 값을 따로 지정해줄 수 있다.
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
- grow 의 기본 값인 0은 빈 공간이 있어도 늘어나지 않음을 의미한다.
- 따라서 빈 공간이 있음에도 박스들이 늘어나지 않는다.
- box1만 flex-grow : 1 로 설정
flex-grow 의 기본값은 0이므로 나머지 박스는 flex-grow : 0 인 상태이다.
- grow는 box1 : box2 : box3 = 1 : 0 : 0 이므로 box1이 모든 공간을 차지
- box2도 flex-grow : 1 로 설정
box3만 flex-grow : 0 인 상태이다.
- grow는 box1 : box2 : box3 = 1 : 1 : 0 이므로 box1과 box2가 1:1로 공간을 나눠 가짐
- box3도 flex-grow : 1 로 설정
세 박스 모두 flex-grow : 1 인 상태
- grow는 box1 : box2 : box3 = 1 : 1 : 1 이므로 세 박스가 1:1:1로 공간을 나눠 가짐
- grow 는 0 : 1 : 1 로 설정하고, box1에 flex-basis : 50px로 설정했을 경우
- box1의 크기가 늘어나거나 줄어들지 않고 50픽셀을 유지한다.
😍👍