컨테이너를 포지셔닝하는 방식들 중, 중요한 개념인 Position과 Float 그리고 Flexbox에 대해 알아보겠습니다.
Position
CSS에서 top,left,right,bottom,top-left, top-right, bottom-left, bottom-right를 이용하여 상자의 Position을 바꿀 수 있다. 그러나 나열된 것만으로는 컨테이너의 위치를 바꿀 수는 없다.
Static
position: static position 속성은 기본값으로 static이란 값을 가지고 있다.
static은 html에 정의된 순서대로 브라우저 상에서 보여준다는 의미다.
relative
.container {
left: 20px;
top: 20px;
position: relative;
}position 을 relative로 변경하면, top과 left에서 20px씩 이동한 것을 확인할 수 있다.
relative는 원래(static일 때) 있어야 되는 자리에서 상대적으로 20px씩 이동한다는 의미다.
absolute
.container {
left: 20px;
top: 20px;
position: absolute;
}absolute는 내 아이템이 담겨있는 박스 안을 기준으로 한다.
즉, 부모 엘리먼트의 컨텐츠를 기점으로 이동한다는 의미다.
fixed
.container {
left: 20px;
top: 20px;
position: fixed;
}fixed는 부모 엘리먼트를 신경쓰지 않고 window를 기점으로 한다는 의미다.
sticky
.container {
left: 20px;
top: 20px;
position: sticky;
}원래(static일 때)있던 자리에 위치하지만, 스크롤링이 되어도 원래 있던 자리에 붙어있는 것을 의미한다.
Float
float의 원래 목적은 이미지와 텍스트를 어떻게 배치할지에 대한 용도였다.
float: left- 이미지가 왼쪽에 배치되고, 텍스트들이 왼쪽에 배치된 이미지를 감싸는 형태
float: center- 이미지가 중앙에 배치되고, 남는 좌우 공간에 텍스트들이 배치
float: right- 이미지가 오른쪽에 배치되고 남는 왼쪽 공간에 텍스트가 배치
Flexbox
Felxbox를 이용하면 박스와 아이템들을 행, 열로 자유자재로 배치할 수 있다.
예전에는 모든 브라우저에서 호환 가능하도록 레이아웃을 만들기 위해, Position이나 float 또는 Table을 이용했다. 그러나 너무 복잡했고 item들을 컨텐츠에 상관없이 동일한 크기의 박스로 배치하는 것, 부모 컨텐츠 내부에서 수직 수평 정렬하는 것들이 매우 복잡했다. flexbox로는 매우 편해졌다.
flexbox 주요 개념
- flexbox에는 Container(박스)에 적용되는 속성값이 존재하며, 각각의 item들에 적용되는 속성값이 존재한다.
- flex box에는 중심축과 반대축이 있다. 중심축을 수평으로 두냐, 수직으로 두냐에 따라서 반대축이 바뀐다.
Container에 적용되는 속성
display : flex- 컨테이너 display 속성에 flex값을 주면, 컨테이너는 flexbox가 된다.
flex-direction: row- flex-direction의 기본값은 row다. row는 왼쪽->오른쪽 방향이 된다.
- 값
row-reverse는 오른쪽->왼쪽 방향으로 아이템을 채운다. - 값
column은 중심축을 위에서 아래로 바꾼다. - 값
column-reverse은 아래->위 방향으로 아이템을 채운다.
flex-wrap: nowrap- 기본값은 nowrap이다. nowrap은 아이템이 아무리 많아도 아이템들이 작아지면서 한 줄에 붙이는 것이다.
- 값
wrap을 하면, 우리가 지정한 아이템의 크기로만 한 줄을 채우며, 한 줄을 넘길 경우 다음줄로 넘긴다. 따라서 뷰포트의 크기가 바뀌면 자동으로 줄넘김을 해준다. - 값
wrap-reverse로 하면 래핑을 아래에서 위로 해준다.
flex-flow- flex-flow는 flex-direction과 flex-wrap을 합해서 쓰는 것이다.
flex-flow: column nowrap형식으로 쓸 수 있다.
justify-content: flex-start(정렬)- 중심축에서 아이템을 어떻게 배치할 것인지 정의한다. 아이템들의 순서를 결정하는 것이 아니라, 아이템들의 배열을 컨테이너의 어디쪽에 붙이냐를 결정하는 것
- 기본값은
flex-start다. 수평축이 중심축이면 "왼쪽"에 아이템을 붙이고, 수직축이 중심축이면 "위쪽"부터 아이템을 붙인다. - 값
flex-end수평축이 중심축이면 "오른쪽"에 아이템들을 붙이고, 수직축이 중심축이면 "아래쪽"에 아이템들이 붙는다. - 값
space-around아이템들에게 공간을 부여한다. 수평축이 중심축인 경우 좌우로 공간을 먹이는데, 맨 끝에 있는 요소들은 사이에 위치한 요소들보다 공간을 적게 먹게 된다.(사이에 있는 것들은 주변 요소들이 가지는 공간과 자신의 공간을 합한 너비만큼 떨어져 있다.) - 값
space-evenly모두 균일한 공간을 준다. - 값
space-between끝에 있는 요소는 컨테이너에 딱 붙이고, 중간에 있는 요소들의 간격을 균일하게 만든다.
align-items:- 반대축에서 아이템들을 배치 정의
- 값
center는 flexbox의 반대축의 중앙에 위치하게 만든다. - 값
baseline은 flexbox의 반대축의 크기를 차지하고 있는 가장 큰 아이템의 중심과 다른 요소들의 중심이 동일 선상에 위치하도록 배치하는 것이다.
align-content:- justify-content와 동일한 값들을 가지고, 반대축에서 어떻게 아이템들을 배치할지 정의하는 것이다.
- align-content는 flexbox가 여러줄이 되었을 때를 위한 것이기 때문에, 항목이 한 줄에 있는 경우에는 효과가 없다.
- align-content는 줄 사이의 간격을 결정하는 반면, align-items는 전체 항목이 컨테이너 내에서 정렬되는 방식을 결정하는 것이다.
item에 적용되는 속성
order:0- 기본값은 0이다. 0이면, html에 정의된 순서대로 flexbox에 넘겨지게 된다. 순서대로 넘기되, 배치는 flexbox가 위에서부터 할 건지 아래에서부터 할 건지, 오른쪽에서부터 할 건지 왼쪽에서부터 배치할 건지 결정하게 된다.
- 값을 숫자로 변경해주면, flexbox에 넘겨주는 순서가 바뀐다.
- 거의 쓸 일 없다.
flex-grow: 0- flex-grow를 쓰지 않으면 기본값 "0"이 들어간다. 요소들에게 주어진 너비와 높이를 유지하게 된다. 컨테이너가 아무리 커져도 그대로 유지하다가, 컨테이너가 작아지면 어쩔 수 없이 균일하게 작아진다.
- 한 아이템에
flex-grow:1을 주면, 해당 아이템은 flexbox의 남는 공간을 채우기 위해 늘어나게 된다. - 여러 아이템에
flex-grow:1을 주면, flexbox의 남는 공간을 해당 아이템들이 균일하게 늘어나면서 채우게 된다. - 한 아이템에
flex-grow:2를 주고, 다른 아이템에flex-grow:1을 주면, 모든 아이템이 flexbox의 남는 공간을 채우려고 하되, "2"를 준 아이템은 "1"을 준 아이템보다 2배의 크기로 공간을 먹게된다.
flex-shrink:0- 컨테이너가 작으졌을 때, 어떻게 행동하냐를 지정한다. 기본값은 0이다.
- 모든 아이템에
flex-shrink:1을 주면, 균일한 크기로 작아진다. - 한 아이템에
flex-shrink:2를 주고, 다른 요소에flex-shrink:1을 주면 2를 준 아이템은 1을 준 것보다 1/2만큼 작아진다.
flex-basis: auto- 아이템들이 공간을 얼마나 차지할 것인지 정의해준다. 기본값은 auto로
flex-grow와flex-shrink에 정의한대로 움직이게 된다. flex-basis: 60%처럼 %로 지정하면, 컨테이너 크기의 60%만큼의 크기를 유지하게 된다.
- 아이템들이 공간을 얼마나 차지할 것인지 정의해준다. 기본값은 auto로
align-self- 컨테이너 레벨이 아니라 아이템 레벨에서의 정렬이다. 아이템 하나만 플렉스박스의 수직 정렬을 하고 싶을 때 쓸 수 있다.
align-self:center를 하면, 이 속성을 준 아이템만 컨테이너의 반대축 중앙에 위치하게 된다.
height: 100% vs height: 100vh
"%"는 컨테이너가 들어있는 부모의 높이를 100%로 채우겠다라는 의미다.
위에서 컨테이너를 100%라고 해도 나타나지 않는다. body의 heigth가 지정되어 있지 않기 때문이다. body를 지정해도 나타나지 않는다. body의 부모인 html의 height가 지정되어 있지 않기 때문이다. body와 html을 모두 100%로 주면, 뷰포트의 높이 모두가 베이지색으로 변경된다.
"100vh"는 부모와 상관없이, 뷰포트에 보이는 높이의 100%라고 쓰겠다는 것이다.
