개발자 끄적끄적
display, grid 본문
- 속성
<display>
- flex : Block 특성의 Flex Container를 정의
- inline-flex : Inline 특성의 Flex Container를 정의
<flex-direction> : Flex Items의 주 축(main-axis)을 설정
- row : Items를 수평축(왼쪽에서 오른쪽으로)으로 표시
- row-reverse : Items를 row의 반대 축으로 표시
- column : Items를 수직축(위에서 아래로)으로 표시
- column-reverse : Items를 column의 반대 축으로 표시
<flex-wrap> : Flex Items의 여러 줄 묶음(줄 바꿈) 설정
- nowrap : 모든 요소들을 한 줄에 정렬
- wrap : 요소들을 여러 줄에 걸쳐 정렬
- wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬
<justify-content> : 주 축(main-axis)의 정렬 방법을 설정
- flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
- flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
- center : 요소들을 컨테이너의 가운데로 정렬
- space-between : 요소들 사이에 동일한 간격
- space-around : 요소들 사이에 동일한 간격을 두고 , 좌우 끝에 요소 사이 간격의 반만 둔다
- space-evenly : 요소들과 좌우 끝의 간격을 일정하게 둔다
<align-content> : 교차 축(cross-axis)의 정렬 방법을 설정
- stretch : Container의 교차 축을 채우기 위해 Items를 늘림
- flex-start : Items를 시작점(flex-start)으로 정렬
- flex-end : Items를 끝점(flex-end)으로 정렬
- center : Items를 가운데 정렬
- space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬
- space-around : Items를 균등한 여백을 포함하여 정렬
- space-evenly
- item에서 설정
<flex-basis> : Flex Item의 (공간 배분 전) 기본 너비 설정
- auto, size
<flex-grow> : Flex Item의 증가 너비 비율을 설정
- 0, size
<flex-shrink> : Flex Item의 감소 너비 비율을 설정
- 0, 1(flex-basis에 의해 지정된 크기 이하로 줄어들 수 있는지 설정)
--------------------------------------------------------------------------
[미션1]
flex를 사용한 layout(css_exam/flex-3dan.html)
- header, footer의 넓이는 자동
- a,c는 넓이를 250px로 고정
- b의 넓이는 자동(단, 최소 넓이는 250px)
- 기타 내용은 개발자 임의대로
header
a b c
footer
[미션2]
(css_exam/flex-2dan.html)
- a영역은 넓이가 300px로 고정
- b의 넓이는 자동
header
a b
c
footer
<미션1>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/flex-3dan</title>
<style>
.main{
display:flex;
margin:1px;
flex-direction:row;
}
.header, .main>div, .footer{
border:2px solid #000;
padding:20px;
box-sizing:border-box;
}
.header, .footer{
display: flex;
flex-basis:auto;
}
/*.a, .b, .c{
display:flex;
flex-direction:column;
margin:1px;
}*/
.main>div:first-child, .main>div:last-child{
flex-basis:250px;
margin:1px;
flex-shrink:0;
}
.main>div:nth-child(2){
flex-grow:1;
flex-basis:250px;
flex-shrink:0;
}
</style>
</head>
<body>
<h2>flex-3dan</h2>
<div class='header'>
<div>header</div>
</div>
<div class='main'>
<div class='a'>a</div>
<div class='b'>b</div>
<div class='c'>c</div>
</div>
<div class='footer'>
footer
</div>
</body>
</html>
-----------------------------------------------------
<미션2>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/flex-2dan</title>
<style>
.main{
display:flex;
flex-direction:row;
flex-wrap:wrap;
padding:1px;
}
.header, .main>div, .footer{
border:1px solid #000;
box-sizing:border-box;
padding:1px;
}
.main>div:first-child{
flex-basis:300px;
flex-shrink:0;
}
.main>div:nth-child(2){
flex-grow:1;
flex-shrink:1;
flex-basis:410px;
}
.main>div:last-child{
flex-grow:1;
}
</style>
</head>
<body>
<h2>flex-2dan</h2>
<div class='header'>
<div>header</div>
</div>
<div class='main'>
<div class='a'>a</div>
<div class='b'>b</div>
<div class='c'>c</div>
</div>
<div class='footer'>footer</div>
</body>
</html>
------------------------------------------------------------------
grid
- flex보다는 호환성이 아직은 약함(edge는 가능)
- flex는 1차원적 배치이지만, grid는 2차원적 배치
grid의 속성
- display : grid
- grid-template-rows : rows의 높이를 지정->1fr 3fr 2fr->/1fr / . . / . /
- repeat(반복 횟수, 크기)->효과적으로 같은 사이즈의 내용들을 반복 할 수 있다
- minmax(최소크기, 최대크기)
- grid-template-columns(columns의 폭을 지정)
- gap / row-gap / colum-gap : size(간격)
- ☆grid-template-area : 각 cell에 이름을 붙여놓고, 이름에 따라 배치
◎용어정리◎
container : grid전체 영역
item : grid안에 배치되는 요소
track : 행 또는 열
cell : item하나가 들어가는 가상의 칸
line : cell을 구분한는 선
number : line 번호
gap : cell사이의 간격(margin과 비슷)
area : line으로 둘러싸인 사각형의 영역
fr : 배율 단위('%'와는 개념이 다르다)
----------------------------------------------------------------------------
.box{
display:grid;
gap:10px;
grid-template-rows:1fr 5fr 1fr;
grid-template-columns:250px 1fr 200px;
}
<결과창>
A 1fr (.box>div:nth-child(1))
B C D 5fr (.box>div:nth-child(2))
E 1fr (.box>div:nth-child(3))
250px 1fr 200px
1 2 3 4 -> cell number(공간으로 따지는거면 area, 3개)
.box>div:first-child, .box>div:last-child{
grid-column-start:1;
grid-column-end:4;
}
->A, E는 꽉 찬(column : 1(시작)~4(끝)) div가 생성
grid-template-columns:repeat(3,150px); : columns 150px를 3번 반복한다
grid-area속성을 각 item에 붙이고, grid-template-areas를 사용하여 2차원 레이아웃구성
.h{grid-area:header;}
.m{grid-area:menu;}
.a{grid-area:left;}
.b{grid-area:center;}
.c{grid-area:right;}
.f{grid-area:footer;}
.box3{
display:grid;
gap:10px;
grid-template-areas:
"header header header"
"menu menu menu"
"left center right"
"footer footer footer"
}
<결과창>
1(header)-------------------/
2(menu)--------------------/
3(left) 4(center) 5(right)/
6(footer)--------------------/
- 각각의 class 명을 지정해줘야한다(h, m, a, b, c ,f)
- 어떤 item를 중심으로 상하좌우가 연결되어야 area가 연결이 된다
- grid-template-areas를 지정 할 때 공백이 있으면 안된다
- '.'은 공간을 의미->비워놓는다
즉,
"header header header"
"menu menu menu"
"left center right"
"footer footer"->레이아웃이 틀어짐
"header header header"
"menu menu menu"
"left center right"
"footer footer ."->가능
[미션]
index.jsp 페이지의 layout을 grid 속성을 사용하여 배치하시오