대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 나오고 CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행한다.
height
속성을 추가하면 수평 분할을 보다 직관적으로 할 수 있다.)CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례로 적용한다. HTML에서 레이아웃을 작성하면 다음과 같이 구성할 수 있다.
ex)
<div id="container">
<div class="col w10">
<div class="icon">아이콘 1</div>
<div class="icon">아이콘 2</div>
<div class="icon">아이콘 3</div>
</div>
<div class="col w20">
<div class="row h40">영역1</div>
<div class="row h40">영역2</div>
<div class="row h20">영역3</div>
</div>
<div class="col w70">
<div class="row h80">영역4</div>
<div class="row h20">영역5</div>
</div>
</div>
레이아웃을 고려해 작성한 html
참고: 클래스 이름으로 지정된 w10, w20, w70, 또는 h20, h40, h80 을 CSS로 구현하면 다음과 같다.
ex)
.w70 { width: 70%; }
.h40 { height: 40%; }
클래스 이름에 맞는 CSS 구현
HTML 문서는 기본적인 스타일을 가지고 있다. 때때로 HTML 문서가 갖는 기본 스타일이 레이아웃을 잡는데 방해가 되기도 한다.
예시 사례)
<body>
요소가 가진 기본 스타일에 약간의 여백이 있다.width
, height
계산이 여백을 포함하지 않아 계산에 어려움이 있다.위에 언급한 문제를 해결할 몇 줄의 코드를 적용시키면 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있다.
ex)
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
기본 스타일링을 제거하는 CSS 코드의 예시
display: flex
는 부모 박스 요소에 적용해 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다.우선 HTML로 3개의 <div>
요소를 자식으로 가진 <main>
요소를 작성해본다.
ex)
<main>
<div>box1</div>
<div>box2</div>
<div>box3</div>
</main>
그리고 각 요소들이 눈에 잘 보이도록 CSS로 <main>
요소에는 빨간색 점선, <div>
요소들에는 초록색 실선으로 테두리를 설정해주고 전체적으로 margin 과 padding 도 10픽셀씩 준다.
ex)
main {
border: 1px dotted red;
}
div {
border: 1px solid green;
}
* {
margin: 10px;
padding: 10px;
}
다음과 같은 화면이 나오는 것을 확인할 수 있다. 이처럼 <div>
요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬되며 가로로 넓게 공간을 차지하는 것을 확인할 수 있다.
ex)
main {
**display: flex;**
border: 1px dotted red;
}
...
이번에는 이 상태에서 부모 요소인 <main>
요소에 display: flex 속성을 적용해보았다.
속성을 적용했더니 자식 요소인 <div>
요소들이 왼쪽부터 가로로 정렬된 것과 내용만큼의 공간을 차지하는 것을 확인할 수 있다. 이처럼 Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있습니다.
Flexbox 속성을 사용할 때 유의해야할 점이 있다. 바로 속성을 지정해주는 위치이다. Flexbox 속성중에서는 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있다. 적절한 위치에 속성을 지정해주지 않으면 요소들이 원하는대로 정렬되지 않는다.
flex-direction
속성은 부모 요소에 설정해주는 속성으로 자식 요소들을 정렬할 정렬 축을 정한다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 한다.
main {
display: flex;
**flex-direction : row;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정한다. */
flex-wrap
속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다. 설정해 주지 않으면 줄 바꿈을 하지 않는다.
main {
display: flex;
**flex-wrap : nowrap;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정한다. */
justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성이다.
주요 속성값으로는 flex-start
, lex-end
, center
, space-between
, space-around
이 있다. 각 속성값의 특성이 잘 드러날 수 있도록 자식 요소의 크기를 동일하게 설정해놓았다. 각 속성값이 축 방향에 따라 요소들을 어떻게 정렬시키는지 확인해본다.
flex-direction : row
인 경우 ↔flex-direction : column
인 경우 ↕️align-items
속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성이다.
주요 속성값으로는 stretch
, flex-start
, flex-end
, center
, baseline
이 있다. 각 속성값의 특징이 명확하게 드러날 수 있도록 자식 요소의 글씨 크기를 각각 다르게 설정해놓았다. 각 속성값이 축 방향에 따라 요소들을 어떻게 정렬시키는지 확인해본다.
flex-direction : row
인 경우 ↕️flex-direction : column
인 경우 ↔flex
는 요소가 차지하는 공간과 관련이 있다.flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
grow(팽창 지수)
는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, shrink(수축 지수)
는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지, basis(기본 크기)
는 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미한다.
자식 요소에 flex
속성을 따로 설정해주지 않으면 기본값
이 적용되며 왼쪽에서부터 오른쪽
으로 콘텐츠의 크기만큼 배치된다.
flex: 0 1 auto;
이 순서와 기본값은 반드시 기억해야한다! flex: grow shrink basis
, flex: 0 1 auto
flex 속성을 설정하기 전의 모습이다. grow 의 기본 값인 0은 빈 공간이 있어도 늘어나지 않음을 의미한다. 따라서 빈 공간이 있음에도 박스들이 늘어나지 않는다. 그럼 grow 의 값을 변경하며 어떤 변화가 생기는지 확인해보자
1-1. 우선 box1만 flex-grow : 1
로 설정해보았다. flex-grow
의 기본값은 0이므로 나머지 박스는 flex-grow : 0
인 상태이다.
1-2. 이번에는 box2도 flex-grow : 1
로 설정하고 box3만 flex-grow : 0
인 상태이다.
1-3. box3도 flex-grow : 1
로 설정했으며 세 박스 모두 flex-grow : 1
인 상태이다.
grow(팽창 지수)
는 정렬축 방향으로 빈 공간이 있을 때 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것이라고 생각하면 이해하기 쉽다.
첫 번째 예시
에서 grow는 box1 : box2 : box3 = 1 : 0 : 0 이므로 box1이 모든 공간을 차지하고,
두 번째 예시
에서 grow는 box1 : box2 : box3 = 1 : 1 : 0 이므로 box1과 box2가 1:1로 공간을 나눠 가지고,
세 번째 예시
에서 grow는 box1 : box2 : box3 = 1 : 1 : 1 이므로 세 박스가 1:1:1로 공간을 나눠 가진 것이다.
팽창지수의 절대적 크기가 아닌 총합에서의 비율
로 빈 공간을 차지하게 되는 것이다.
shrink(수축 지수)
는 grow와 반대로 설정한 비율만큼 박스 크기가 작아진다. 비율이 클수록 더 많이 줄어드는 것이다. 그러나 flex-grow
속성과 flex-shrink
속성을 함께 사용하는 일은 추천하지 않는다. 비율로 레이아웃을 지정할 경우 flex-grow
속성 또는 flex: <grow> 1 auto
와 같이 grow
속성에 변화를 주는 방식을 권장하고 flex-grow
속성으로 비율을 변경하는 경우, flex-shrink
속성은 기본값인 1로 두어도 무방하다.
basis(기본 크기)
는 자식 박스가 flex-grow
나 flex-shrink
에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다. flex-grow
가 0일 때, basis
크기를 지정하면 그 크기는 유지된다.
flex-grow
속성의 값이 0인 경우에만 flex-basis
속성의 값이 유지된다. diplay 속성에 flex
가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라 basis
로 설정된 크기가 항상 유지되는 것은 아니다. flex-grow
속성의 값이 양수일 경우 늘어나면서 flex-basis
속성에 적용한 값보다 커질 수도 있습니다