static : 기본값으로 글의 흐름에 따라 원래 있어야 할 위치에 배치한다. top, right, bottom, left(이하 '4가지 속성')의 속성값에 영향을 받지 않는다.
relative : 기본 배치를 기준으로, 즉 static의 배치를 기준으로 위치를 배치한다. 4가지 속성의 속성값에 따라 배치한다. 각 속성은 그 위치 기준으로 얼마나 떨어져 있는지를 나타낸다. ex) top : 10px. 위에서 10px 떨어뜨려서 배치한다. static의 위치를 기준으로 삼기 때문에 위 4가지 속성을 지정하지 않으면 static의 위치와 같다. 글의 흐름에서는 relative의 위치를 static과 같이 인식하기 때문에 relative와 4가지 속성에 따라 위치가 변해도 다른 요소에는 위치 변화에 따른 영향을 미치지 않는다.
absolute : position의 값이 static이 아닌 가장 가까운 조상의 배치를 기준으로 한다. 4가지 속성을 정하지 않으면 좌측 상단에 배치된다. 글의 흐름에서 벗어나기 때문에 기본 위치에서는 완전히 빠져나와 흐름에서의 다음 요소가 그 자리를 채운다. 크기를 정해주지 않으면 기본적으로 내용만큼의 크기를 갖게 되며, 4가지 속성값에 따라 맞춰진다. 즉, width의 값을 지정해 주지 않으면 right와 left의 값에 따라 너비가 정해지고, height의 값을 지정해 주지 않으면 top과 bottom의 값에 따라 높이가 정해진다. width, height의 값을 지정해 주지 않고 4가지 속성의 값을 0으로 하면 꽉 채워진다는 소리다. 이것을 간단하게 inset: 0;을 통해 같은 동작을 할 수 있다. inset는 4가지 속성에 같은 값을 적용하는 개념인 거 같다. 우선도를 따지자면 width, height가 가장 우선시되고, top, right, bottom, left 순으로 우선시되는 거 같다.
fixed : 브라우저 화면을 기준으로 한다. 4가지 속성을 정하지 않으면 부모 태그의 좌측 상단에 배치된다. 글의 흐름에서 벗어나기 때문에 기본 위치에서는 완전히 빠져나와 흐름에서의 다음 요소가 그 자리를 채운다. 화면을 기준으로 배치하기 때문에 다른 요소의 배치를 fixed 된 요소의 높이를 고려해야 가려지지 않는다. 크기와 관련해서는 absolute와 같다.
sticky : static에 fiexd를 추가한 기준이 적용된다. 요소의 화면 기준의 위치가 4가지 속성값과 같게 되면 fixed처럼 적용되고 속성값에서 벗어나면 기존의 배치로 돌아간다. 단, 부모 태그를 벗어날 수는 없다. 글의 흐름에서 벗어나는 것이 아니기 때문에 흐름에서 위치를 차지하고 있다.
z-index : 요소의 z값을 지정한다. 값으로 정수 값을 갖는다. 같은 값일 경우 코드에서 가장 밑에 쓰인 태그가 화면에서 가장 위에 나타난다. 어떤 태그의 자식 태그에 z-index값을 적용한다면 그 부모 태그의 내부에서 적용되는 값이지, 외부에서는 부모 태그의 z-index값이 적용된다.
display : 영역이 배치되는 방식을 설정할 수 있다.
flex : flex-box라는 뜻으로 요소들을 1차원 방향으로 배치한다. flex-shrink가 기본값으로 1을 가져서 요소들의 크기가 영역을 넘어가면 영역에 맞게 줄어든다. 최소크기로 줄어들고도 영역을 넘어가서야 영역을 넘어가면서 배치가 된다.
inline-flex : flex-box를 inline처럼 배치하고 싶을 때 사용한다. inline요소 안에서 flex-box를 쓰고 싶을 때 사용한다.
grid : 요소들을 2차원으로 배치할 수 있다. 왼쪽에서 오른쪽으로, 위에서 아래로 배치한다. 칸을 나누는 줄을 grid line, 요소를 배치할 수 있는 칸을 grid cell이라 한다.
flex-direction : flex의 방향을 정할 수 있다. row, column, row-reverse, column-reverse를 통해 가로 방향, 세로 방향, 가로 반대 방향, 세로 반대 방향으로 정할 수 있다.
justify-content : flex-box의 기본 축을 기준으로 정렬한다. flex-start(기본값), flex-end, space-around, space-between, space-evenly, center를 통해 정렬 가능하다. flex-start와 flex-end는 처음과 끝에 정렬하고, space-around는 요소의 양쪽에 같은 크기의 여백이 남도록 정렬하고, space-between은 요소 사이의 여백이 같도록 양 끝을 늘여서 정렬하고, space-evenly는 모든 여백의 크기가 동일하도록 정렬하고(첫 번째 요소의 왼쪽과 마지막 요소의 오른쪽에도 여백이 존재한다), center는 중앙에 정렬한다.
align-items : flex-box의 교차 축을 기준을 정렬한다. flex-start, flex-end, stretch(기본값), center를 통해 정렬 가능하다. flex-start, flex-end, center는 기본 축 기준 정렬과 같고, stretch는 교차 축으로 길게 늘여서 정렬한다.
flex-wrap : flex-box의 영역을 넘어가는 요소들을 교차 축 방향으로 넘어가 배치된다.
gap : flex-box와 grid의 요소사이의 간격을 정한다. 값을 하나만 주면 네 방향에서 적용이 되고, 2개일 경우에는 세로, 가로 순으로 적용이 된다. margin처럼 값을 3개, 4개를 줄 수 없다. flex-direction값에 상관없이 세로, 가로로 적용이 된다.
flex-grow : flex-box의 요소에 적용하는 속성으로 해당 요소를 늘려서 빈 공간을 채우고 싶을 때 사용한다. 기본 값으로 0을 갖고, 상대적인 비율에 따라 값을 정해주면 된다. 비율은 빈 공간의 비율을 말하며, 빈 공간을 각 요소에 적용된 flex-grow의 총합으로 나눈 후 각 요소에 flex-grow만큼의 비율로 적용한다. 아마도.
flex-shrink : 요소의 크기가 줄어드는 비율을 정할 수 있다. 0으로 설정하면 요소의 크기가 변함없이 flex-box에 적용이 된다. 비율이 적용되는 규칙은 모르겠다.
flex-basis : flex-box에서 요소의 기본축의 시작 크기를 지정한다. 기본값은 auto이며 이 때는 width, height의 값을 참고해서 시작 크기를 정한다.
flex : flex-grow, flex-shrink, flex-basis의 값을 하나의 속성으로 정할 수 있다.
grid-template-columns : column의 크기를 정한다. 여러 값을 넣어서 column을 나눌 수 있다.
grid-template-rows : row의 크기를 정한다. 여러 값을 넣어서 row를 나눌 수 있다.
grid-template : grid-template-rows와 grid-template-columns를 한 번에 정한다. rows, columns 순이며 사이에 / 를 넣어서 구분해 줘야 한다. 속성값으로 fr단위를 쓸 수 있다. fraction이라는 뜻으로 해당 축의 자유 공간을 총 fr로 나누고 해당 값의 비율을 적용한다. minmax(최솟값, 최댓값)를 통해 최솟값과 최댓값을 지정할 수 있다. 최솟값 미만으로는 줄어들지 않고 최댓값 초과로는 커지지 않는다. 최솟값에는 fr을 넣을 수 없지만 최댓값에 fr을 넣을 수 있다. repeat(개수, 적용할 값)을 통해 간단하게 값을 적용시킬 수 있다. 적용할 값으로 minmax()도 들어간다.
grid-auto-rows, grid-auto-columns : grid-template-rows와 grid-template-columns를 정하지 않았을 때 자동으로 그 값들을 적용한다. rows나 columns만 정하고 남은 축을 auto로 하면 요소의 개수가 늘어남에 따라 자동으로 해당 축의 크기를 적용한다. 요소로 몇 개가 들어올지 알 수 없을 때 유용하다. 여러 값을 넣어서 번갈아 가며 적용시킬 수 있다.
grid-row, grid-column : grid line의 번호를 값으로 해서 grid에서의 위치를 지정할 수 있다. grid line은 왼쪽에서 오른쪽으로, 위에서 아래로 번호를 매긴다. 반대로 번호를 매긴 음수 번호도 사용할 수 있다. 위치의 시작 지점을 기준으로 값을 넣어야 한다. row나 column에 / 를 통해 여러 칸에 넣을 수 있다. ex) grid-row : 2, grid-column : 1 = 2번째 줄의 1번째 칸에 위치를 지정한다. grid-row : 1 / 3, grid-column : 2 / 3 = 1번째 줄의 2번째 칸과 2번째 줄의 2번째 칸에 위치를 지정한다.
/ 이후의 값은 끝나는 지점을 기준으로 값을 넣어야 한다. / 이전의 값보다 / 이후의 값이 더 작아도 잘 적용된다. span을 통해 간단하게 몇 칸을 지정할 건지 정할 수 있다. ex) grid-row : 1 / span 2, grid-column : 2 / span 1 = 1번째 줄에서부터 2칸의 row를 차지하며, 2번째 칸에서부터 1칸의 column을 차지한다.
grid-area : grid의 요소에 grid에서 적용되는 이름을 정한다.
grid-template-areas : grid의 요소에 적용한 grid-area의 값에 따라 위치를 지정한다. 빈칸은 .으로 표현한다. ex) red : grid-area = red blue : grid-area = blue green : grid-area = green grid-template-areas : "red ." "blue green" = 전체를 4칸으로 나눴을 때 1번째 칸에 red, 2번째 칸은 빈칸, 3번째 칸은 blue, 4번째 칸은 green을 배치한다.
같은 이름을 붙여서 여러 개 써서 여러 칸을 차지하게 만들 수 있다. 단, 같은 이름을 떨어져서 여러 개 쓰게 되면 적용이 되지 않는다. 큰 따옴표내부에 이름을 적음으로써 하나의 row의 값을 적용했는데 각 row 사이에 ,을 넣거나 ;를 넣으면 적용이 되지 않는다.