CSS 레이아웃

Position

position 속성

글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성이다. position에 따라서 위치를 정하는 기준이 달라진다.
기본값은 static이고, static인 경우, 요소가 원래 있어야할 곳에 배치된다.

위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있다. 박스가 있다면, right : 10px일대, 박스 내부의 오른쪽 끝부터 10px떨어져서 배치된다.
값이 상하좌우 모두 똑같은 경우에는 inset : 0;과 같이 쓴다.

relative 포지션

position : relative
요소의 원래 위치를 기준으로 배치한다. 이때 요소의 원래자리는 그대로 차지하고 있다.

.box {
	position : relative;
    top : 10px;
    bottom : 10px;
}

absolute 포지션

position : absolute
가장 가까운 포지셔닝이 된 조상요소를 기준으로 배치한다. 이때 포지셔닝이 되었다는건 static이 아닌, position 속성을 지정했다는 뜻이다. 예를 들어 부모 div태그 아래 자식 div태그가 있다면, 부모 div태그에 position : relativ와 같이 포지셔닝을 해주어야 자식 div태그에서 absolute 포지션을 사용할 수 있다. 그러면 자식 div태그는 부모div태그를 기준으로 배치된다.

.box {
	position : relative;
}

.boxChild {
	position : absolute;
    top : 10px;
    bottom : 10px;
}

fixed 포지션

position : fixed
브라우저 화면을 기준으로 고정된 배치를 한다.
글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다. 그래서 네비게이션을 만들거나 할때 본문과 fixed된 요소가 겹치지 않도록 본문에 margin을 넣어주거나 한다.

.box {
	position : fixed;
    top : 0;
    left : 0;
    width : 100%;
}

sticky 포지션

position : sticky;
static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤 되면 그때 부터 fixed처럼 고정되어 배치된다. 기본적으로는 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.

.box {
	position : sticky;
    top : 0;
    left : 0;
    width : 100%;
}

z-index 값

앞뒤 순서를 정할 때 쓰는 값이다. 순서이기 때문에 1, 2 등과 같이 단위 없이 쓴다. 값이 높을수록 화면에서 앞쪽에 배치되며, 값이 같으면 코드에서 아랫줄에 있는 요소가 앞쪽에 보인다.
z-index : 1;

flexbox

display : flex;
flex에는 기본축과 교차축이라는것이 있다.
기본축은 좌에서 우로, 교차축은 기본축에 크로스되는 축을 말한다.

flex-direction

flex-direction을 사용하면 기본축의 방향을 설정할 수 있다. 이때 기본값은 row이다.
row : 가로정렬
column : 세로정렬

justify-content 기본축 정렬

justify-content를 사용하면, 기본 축 방향으로 정렬할 수 있다.
기본값은 flex-start로 좌에서 우로 배치가 된다.
flex-end : 끝에서 부터 정렬
center : 가운데 정렬
space-between : 자식요소들 사이에 동일한 간격을 배치하는데 사용한다. ㅇ --- ㅇ --- ㅇ

align-items 교차축 정렬

align-items를 사용하면, 교차축 정렬이 가능하다.
기본값은 stretch (쭉 늘려서 배치하기. 높이 자동.)이다.
center : 가운데 정렬

flex-wrap

요소가 부모박스 넓이를 뚫고 나오게 되는경우 사용한다.
flex-wrap : wrap;을 지정해주면 교차축 방향으로 넘어가서 차례로 배치가 된다.

gap

간격을 정할때 사용한다.
숫자를 하나만 쓰면, 모든방향의 간격(폭)을 지정할 수 있다.
gap : 20px;
숫자를 두개 쓰면, 세로, 가로 순서로 간격을 지정할 수 있다.
gap : 20px 10px;

flex-grow

요소를 늘려서 너비만큼 꽉 채울때 사용한다.
상대적인 값이 들어가는데, 기본값은 0이다. flex-grow값이 클수록 많이 늘어난다. 예를들어 red, blue, green이라는 3개의 요소가 있다고 가정하면

.color-container {
	display : flex;
}

.red {
	color : red;
    flex-grow : 1;
}

.blue {
	color : blue;
}

.green {
	color : green;
}

이렇게 했을때, blue, green박스는 원래크기대로 있고, 나머지 공간을 flex-grow : 1을 해준, red박스가 모두 차지하게 된다.

++ justify-content : spacebetween을 했는데, 요소들이 정렬이 딱 안맞다면, flex-basis : 100px등으로 요소들의 너비를 맞춰주면 된다.

flex-basis는 flex박스내의 요소들의 시작크기를 정해줄 수 있으며, 기본값은 auto이다.

++ 인라인안에서 flexbox를 만들땐, display : inline-flex를 해주면 된다.

grid

display : grid
display속성을 grid로 하고, grid-template-columns 속성으로 컬럼을, grid-template-rows속성으로 로우를 나눌 수 있다. 예를 들어서, 3x2 그리드를 만드는데, 컬럼 너비는 각각 100px, 200px, 100px이고, 로우 너비는 150px, 200px라면, 아래와 같이 쓸 수 있다.

display : grid;
grid-template-columns : 100px 200px 100px;
grid-template-rows : 150px 200px;

fr

유연한 크기 단위로 fr을 쓴다. fr이라는 단위를 사용하면 플렉스박스처럼 전체 크기에 대해 상대적인 값을 지정할 수 있다.예를 들어서 3x2 그리드에서 컬럼의 너비를 1 : 1 : 1로 하고 싶다면 아래와 같이 해줄 수 있다.

display : grid;
grid-template-columns : 1fr 1fr 1fr;
grid-template-rows : 150px 200px;

repeat()함수

반복되는 값을 한번에 쓸 수 있다.
repeat()라는 함수로 반복할 횟수와 값을 쓰면 코드를 깔끔하게 할 수 있다.

display : grid;
grid-template-columns : repeat(3, 1fr);
grid-template-rows : 150px 200px;

columns와 rows를 한번에 적어줄 때

grid-template : repeat(3, 1fr) / repeat(3, 1fr);

이렇게 columns / rows를 /로 구분해서 사용한다.

minmax

최소, 최대값으로 크기를 정할 때 사용한다.
최소값과 최댓값을 지정해두면 이 사이에서 유연하게 크기가 조절되도록 할 수 있다. 예를 들어서 아래 코드는 컬럼의 너비가 최소 200px인데, 화면 너비가 작아지더라도 컬럼의 너비는 200px보다 더 작아지지않고, 화면 너비가 넓어지면 컬럼의 너비는 1 : 1 : 1의 비율로 늘어난다.

display : grid;
grid-template : repeat(3, minmax(200px, 1fr)) / 150px 200px;

간격은 flex와 동일하게 gap을 사용해서 폭을 정한다.

원하는 위치로 배치하기

grid-column과 grid-row 속성을 사용하면 원하는 위치에 요소를 배치할 수 있다. (그리드 라인 번호로)

grid-columns : 2 / 4;
grid-row : 1 / 3;

음수를 쓰든 양수를 쓰든 상관없다.

span이라는 키워드를 쓰면 시작하는 라인 번호와 차지할 크기를 적어줄 수 있다.
grid-columns : 2 / span 2;

이름으로 배치하기

grid-area로 영역에 이름을 붙이고, grid-template-areas로 이름을 사용해 배치할 수 있다. 셀을 비워놓고 싶을땐 .으로 비워놓을 수 있다.

body {
	grid-template-areas : 
    "a b"
    "c c";
}

.box-a {
	grid-area : a;
}

.box-b {
	grid-area : b;
}

.box-c {
	grid-area : c;
}