🐹 flex
1차원 레이아웃 설계로 1차원 방식이란 가로나 세로 중 한 방향으로만 레이아웃을 설계하는 방식입니다.
main axis(주축) : 플렉스 박스의 진행 방향과 수평한 축
cross axis(교차축) : 주축과 수직한 축
flex container(플렉스 컨테이너) : display 속성값으로 flex나 inline-flex가 적용된 요소
flex item(플렉스 아이템) : 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소
레이아웃 확인
개발자 도구에서 Elements에 가보면 flex 아이콘이 보이는데 이 아이콘을 클릭하면 파란색으로 변하면서 해당 요소의 flex 박스 레이아웃을 시각적으로 확인 가능.
❤️🔥 display
display 속성값을 flex나 inline-flex로 지정하는 것입니다.
flex는 적용된 요소의 다음 요소가 항상 줄 바꿈되고, inline-flex는 다음 요소가 주변에 배치되게 합니다.
display 속성이 지정된 요소는 flex-container가 되고, 자식 요소는 flex-item이 됩니다.
그래서 기본적으로 flex-item이 수직에서 수평 방향으로 배치됩니다.
flex-direction은 flex 박스 레이아웃의 주축 방향을 결정합니다.
- row : 주축 방향을 왼쪽에서 오른쪽으로 지정
- row-reverse : 오른쪽에서 왼쪽으로 지정
- colmn : 위에서 아래쪽으로 지정
- column-reverse : 아래에서 위쪽으로 지정
❤️🔥 flex-wrap
flex-item이 flex-container 영역을 벗어날 때 어떻게 처리할지를 결정합니다. nowrap으로 기본 적용됩니다.
-
nowrap : flex-item이 flex-container를 벗어나도 무시
-
wrap : flex-item이 flex-container를 벗어나면 줄 바꿈
-
wrap-reverse : flex-item이 flex-container를 벗어나면 wrap의 역방향으로 줄 바꿈
flex-item의 개수를 늘려 flex-container를 초과하게 해도 줄 바꿈하지 않습니다.
줄 바꿈하고 싶다면 flex-wrap 속성값을 wrap, wrap-reverse 하면 됩니다.
flex-flow
flex-direction과 flex-wrap 솔성을 한 번에 사용할 수 있는 단축 속성입니다.
❤️🔥 justify-content
flex-item을 주축 방향으로 정렬할 때 사용합니다.
❤️🔥 align-items, align-content, align-self
align-items는 flex-item을 교차축 방향으로 정렬할 때 사용합니다. 기본적으로 stretch가 적용./
stretch : 교차축 방향으로 flex-item의 너비나 높이가 늘어난다.
flex-start : 교차축 방향의 시작을 기준으로 정렬
flex-end : 교차축 방향의 끝을 기준으로 정렬
center : 교차축 방향의 중앙을 기준으로 정렬
baseline : flex-item의 baseline을 기준으로 정렬
🐹 grid
2차원 방식으로 레이아웃을 설계할 수 있는 속성입니다. 가로와 세로를 같이 사용해 레이아웃을 설계합니다.
그림은 그리드 레이아웃의 구성요소입니다.
- 그리드 셀 : 행과 열이 만나 이루어지는 하나의 공간
- 그리드 갭 : 그리드 셀과 그리드 셀 사이의 간격
- 그리드 아이템 : 그리드 셀 안에서 표현되는 콘텐츠
- 그리드 라인 : 그리드 행과 열을 그리는 선을 의미
- 그리드 넘버 : 그리드 라인에 붙는 번호
- 그리드 컨테이너 : 그리드 레이아웃의 전체 내용을 담고 있는 최상위 부모 요소. 그리드와 관련된 내용은 모두 그리드 컨테이너 안에 표현됨
display 속성으로 grid, inline-grid로 저정하는 것에서 시작.
해당 속성이 지정된 요소는 그리드 컨테이너가 되고 자식 요소는 그리드 아이템이 된다.
❤️🔥 grid-template-rows, grid-template-columns
행과 열을 지정해 그리드 셀을 생성해야 합니다.
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
auto 값도 사용할 수 있는데 지정하게 되면 해당하는 행과 열의 크기를 그리드 컨테이너에 맞춰 자동으로 지정합니다
repeat()
두 행이나 열이 같은 크기일 때 repeat()함수로 반복해서 지정할 수 있습니다.grid-template-rows: repeat(2, 100px); grid-template-columns: repeat(2, 100px);
❤️🔥 row-gap, column-gap
그리드 갭이 있는데 행과 열이 만나 이루어지는 그리드 셀과 그리드 셀 사이의 간격입니다.
행과 행 사이의 간격이 row-gap입니다.
❤️🔥 그리드 레이아웃의 정렬 속성 (align-items, align-self)
그리드 셀의 높이가 그리드 아이템보다 클 때 각 그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬할 수 있습니다.
-
stratch : 그리드 아이템을 그리드 셀을 꽉 채우도록 크기를 늘림
-
start : 그리드 아이템을 그리드 셀의 맨 위에 배치
-
center : 그리드 아이템을 그리드 셀의 세로 방향 중간에 배치
-
end : 그리드 아이템을 그리드 셀의 맨 아래에 배치
❤️🔥 justify-items, justify-self
justify-items는 그리드 아이템을 각 그리드 셀의 가로 방향으로 정렬합니다.
- stretch : 그리드 아이템을 그리드 셀이 꽉 차도록 늘림
- start : 그리드 아이템을 그리드 셀의 왼쪽 끝에 배치
- center : 그리드 아이템을 그리드 셀의바로 방향 중간에 배치
- end : 그리드 아이템을 그리드 셀의 오른쪽 끝에 배치
❤️🔥 그리드 레이아웃 배치 속성 (grid-template-areas, grid-area)
grid-template-areas 속성을 사용하면 그리드 컨테이너에 그리드 레이아웃에 표시된 행 이름을 지정 가능합니다.
<style>
.grid-container{
display: grid
grid-template-areas:
"header header header"
"sidebar sidebar sidebar"
"footer footer footer"
}
#header{
grid-area: header;
}
#sidebar{
grid-area: sidebar;
}
#content{
grid-area: content;
}
#footer{
grid-area: footer;
}
</style>
<body>
<div class="grid-container">
<p id="header">header</p>
<p id="sidebar">sidebar</p>
<p id="content">content</p>
<p id="footer">footer</p>
</div>
</body>
tailwind 로 하면
<body class="bg-gray-100">
<div class="grid grid-rows-3 grid-cols-1 h-screen">
<div class="row-span-1 bg-blue-500 text-white flex items-center justify-center" id="header">header</div>
<div class="row-span-1 bg-green-500 text-white flex items-center justify-center" id="sidebar">sidebar</div>
<div class="row-span-1 bg-gray-300 text-black flex items-center justify-center" id="content">content</div>
<div class="row-span-1 bg-red-500 text-white flex items-center justify-center" id="footer">footer</div>
</div>
</body>❤️🔥 grid-column-start, grid-clumn-end, grid-row-start, grid-row-end
그리드 컨테이너를 구성하는 행과 열을 그리는 선을 그리드 라인이라고 합니다. 그리드 라인에는 각각 고유한 번호가 있는데 이를 그리드 넘버라고 합니다
4가지 속성으로 그리드 아이템의 배치를 지정할 수 있습니다.
❤️🔥 정리
align-items는 부모 요소(컨테이너) 내의 모든 자식 요소를 수직으로 정렬합니다. flex 컨테이너의 기본 정렬을 설정할 때 사용하고 align-self는 개별 flex 아이템의 수직 정렬을 설정합니다. 이는 해당 아이템에만 적용합니다.
특정 flex 아이템의 정렬을 개별적으로 조정하고 싶을 때 사용합니다.
align-items: center;를 설정하면 모든 플렉스 아이템이 수직 중앙에 정렬
특정 아이템에 align-self: flex-start;를 설정하면 그 아이템만 컨테이너의 시작 부분에 정렬
align-content는 flex 아이템이 두 줄 이상일 때 교차축 방향으로 정렬
그리드 레이아웃 정렬 속성
-
align-items : 그리드 아이템 전체를 셀의 세로 방향으로 정렬
-
align-self : 각각의 그리드 아이템을 세로 방향으로 정렬
-
justify-items : 그리드 아이템 전체를 셀의 가로 방향으로 정렬
-
justify-self : 각각의 그리드 아이템을 셀의 가로 방향으로 정렬
-
place-item : align-items와 justify-items 속성을 한 번에 사용할 수 있는 단축 속성
-
place-self : slign-self와 justify-self 속성을 한 번에 사용할 수 있는 단축 속성
그리드 레이아웃 배치 속성
-
grid-template-areas : 그리드 레이아웃에서 행과 열을 이름으로 지정
-
grid-areas : 그리드 아이템에 이름을 지정
-
grid-column-start/end : 그리드 레이아웃에서 열의 시작 번호와 끝 번호를 지정
-
grid-row-start/end : 그리드 레이아웃에서 행의 시작과 끝 번호를 지정
-
grid-column : grid-column-start, end를 한 번에 사용할 수 있는 단축 속성
-
grid-row : 동일
