flexbox
css3에 추가된 개념
부모 자식간 박스가 필요하고 부모에 둘러싸인 자식 박스들을 정렬할 때 사용
display: flex
유연한 조절이 필요할 때
flex container(외부) / flex item(내부)
main axis - 가로, 주축
cross axis - 세로, 교차축
display-outside : inline과 block이 있으며 외부 박스와 바깥쪽 요소와의 사이를 결정 (container)
display-inside : flex와 grid가 있으며 내 안쪽 박스와 관계를 결정할때 (items)
flex-direction : 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향을 설정 1차원 (container)
row, row-reverse, column, column-reverse
기본, 우에서 좌, 위에서 아래, 아래에서 위
flex-wrap : flex-item을 강제로 한줄에 배치되게 할
것인지, 여러행으로 나누어 표현할지 (container)
nowrap, wrap, wrap-reverse
기본속성, 여러행에 나눠서 배치, wrap과 동일하지만 순서가 반대
flex-flow : direction과 wrap 속성의 단축속성
order : 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정 / 단일아이템 순서 (items)
기본값은 0 / 낮은 숫자면 제일 앞으로 배치
실제 값이나 위치는 변경되지 않고 화면에서만 변경
flex-grow : item 요소가 container 요소 내부에서 할당 가능한 공간의 정도를 선언 (items)
음수x 0부터 양수 / 동일한 값을 갖는다면 동일한 공간을 할당받음 / 숫자가 높을수록 할당받는 공간이 커짐
flex-shrink : item 요소가 container 요소보다 크기가 클때 사용하며 설정된 숫자의 값에 따라 item 요소의 크기가 축소 (items)
초기값은 1 / 0은 축소가 안됨, 숫자가 높아질 수록 빨리 축소가됨
grow와 shrink는 반대로 생각하면 편함
flex-basis : item 초기 크기를 지정 (items)
px, value, auto 로 값을 지정
ex) flex-basis: 200px;
flex: grow | shrink | basis
값을 하나만 쓰면 grow가 됨
grow가 shrink보다 무조건 앞에 있어야함
한 개 혹은 두 개의 값이 입력 되면 basis는 auto가 아니라 0이 되버림
justify-content : container 안 item의 정렬을 할 때 사용 / main축 이용 (container)
center : 메인 축의 가운데 정렬
flex-start, end : main축의 시작과 끝점에서 시작
space-between : 일정한 간격으로 띄어짐 / 시작과 끝점이 붙어있음
space-around : 앞 뒤로 일정한 간격으로 띄어짐 / 시작과 끝도 동일한 간격으로 띄어짐
align-items : container 안에 한 줄의 item 정렬을 할 때 사용 / cross축 이용 (container)
stretch : 교차축의 start부터 end까지
center : 교차 축의 가운데정렬
align-content : 여러개의 item을 정렬할 때 / cross축 이용 (container)
center : 교차 축의 가운데 정렬
flex-start, end : 교차축의 시작과 끝점에서 시작
space-between : 일정한 간격으로 띄어짐 / 시작과 끝점이 붙어있음
space-around : 위 아래로 일정한 간격으로 띄어짐 / 시작과 끝도 동일한 간격으로 띄어짐
align-self : 단 한가지 아이템을 정렬 할 때 사용
grid
grid layout
그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성
각 행과 열 사이에 공백이 있음 gutters라고 부름
container 박스 안에 item이 쌓여진 개념
table 개념
display: grid;
grid-template-rows: 몇 의 그리드 행
grid-template-columns: 몇 의 그리드 열
ex) grid-template-rows: 100px 50px 30px
3개의 행 라인을 각각 100, 50, 30 픽셀로 줌
ex) grid-template-columns: 1fr 2fr 3fr
3개의 열 라인을 각각 1 : 2 : 3 비율로 나눠짐 화면사이즈가 변하더라도 그 비율은 유지함 (fr)
ex) grid-template-rows: repeat(4, 1fr)
이런식으로도 사용 가능 4개의 행에 1:1:1:1 비율
grid-template-areas: "a a a"
"b c c"
" . c c";
박스형 grid로 만들 수 있음 특정 영역을 원하는 박스로 구성 가능함 / . 은 빈칸이고 직사각형 모양만 가능하고 기역, 니은, 디귿자 등 불가
또한, 중간에 빈칸을 만들때 해당 영역이 시작과 끝에만 가능 중간에는 불가능
row-gap: 각각 행들간의 간격
colums-gpa: 각각 열들간의 간격
grid-auto-rows: 템플릿을 벗어나게 만들어진 행에 대해 자동으로 크기를 부여
grid-auto-columns: 템플릿을 벗어나게 만들어진 열에 대해 자동으로 크기를 부여
grid-auto-flow: item을 추가를 main축 or cross축 변경이 가능
ex) grid-auto-flow: row dense;
dense는 빈 영역에 자동으로 맞춰서 들어가짐
grid - 단축속성 사용하기에 앞서 따로따로 써보기
외재적 속성(temp), 내재적 속성(auto) 사용가능
grid: row / column 임
ex) grid: 1fr 1fr 1fr / auto-flow 100px 200px
ex) grid: 30% / auto-flow dense
ex) grid repeat(4, 1fr) / repeat(3, 1fr)
justify-content - 선행조건: container가 item보다 커서 빈 영역이 있어야함
main축
align-content - 선행조건: container가 item보다 커서 빈 영역이 있어야함
cross축
justify-items, align-items : items의 메인축 교차축 변경
justify-self, align-self : 각각의 item의 메인축 교차축 변경
grid-row, grid-column 단축속성
gird-row: start | end
grid-row-start: 몇 번째 행이 아니라 몇 번째 선을 기준으로 시작을 함
grid-row-end: 몇 번째 행이 아니라 몇 번째 선을 기준으로 끝을 맺음
음수값은 제일 아래임 -1 값 낮아질수록 아래서 위로
ex) grid-row: 1 / -1 행의 처음부터 끝
grid-row: 1 / 3 행의 처음주터 세번째 줄
grid-column: 1/ -1 열의 처음부터 끝
grid-area: grid-templates-areas에 사용하는 영역이름을 주거나, 단축속성도 가능함
grid-area: row start | column start | row end | column end
ex) grid-area: 1 / 1 / -1 / -1
order: items 순서 설정 / 낮을 수록 맨앞
z-index: items 순서 설정 / 높을 수록 맨앞
단위 fr, min-content, max-content
auto-fill : 남는 공간에 자동으로 채워짐
auto-fit : 남는 공간에 자동으로 크기가 커짐
반응형 디자인
다양한 화면 크기(viewport)가 등장함에 따라 responsive web design 개념이 등장
하나의 웹페이지에서 PC, 노트북, 모바일 버전을 사용가능
적응형 디자인은 PC, 노트북, 모바일 버전 각각 다른 웹페이지, CSS가 있다
미디어 쿼리 - CSS Media Query
@media media-type and(media-feature-rule)
ex) @media screen and (max-width:300px){
body { background-color: beige; }
}
ex) @media (min-width:) and (max-width:)
분기 처리 (min-width: )를 해주면서 분기마다 다른 미디워쿼리를 해줌
