[temp] 12. CSS
MULTI-COLUMNS (다단)
텍스트 다단으로 쉽게 정리
-
columns
columns: 너비 개수;
-
column-count 단의 개수
-
column-width 단의 최적 너비
각 단이 줄어들 수 있는 최적 너비를 설정 (최소 사이즈)해서 최적 너비보다 사이즈가 줄어들게 된다면 단의 개수가 조정된다.
-
-
column-rule
(단축)단과 단 사이의 구분선column-rule: 두께 종류 색상;
border와 같이 생각해도 됨
-
column-rule-width
-
column-rule-style
-
column-rule-color
글자 색에 상속되어 영향을 받는데 그렇지 않게 하기 위해서 따로 색상을 지정해주어야 한다.
-
-
column-gap
단과 단 사이의 간격padding 과는 달리 rule 두께의 영향을 받지 않는다.
column-gap: 간격;
값
- normal 브라우저가 단과 단 사이의 간격을 설정 (기본 1em)
- 단위
19 CSS 속성 - 그리드
2차원(행과 열)의 레이아웃 시스템 (flex는 1차원의 레이아웃)
GRID를 사용하면서 flex보다 복잡한 레이아웃을 잡을 수 있게 되었다.
container와 item에 사용되는 속성이 다르다. (flex와 유사한 개념)
Grid Container
-
display
그리드를 사용하기 위한 필수 속성 → 그리드를 정의
- grid
- inline-grid
-
template-rows (h)
명시적으로 행의 크기와 개수를 정의
동시에 라인의 이름을 정의할 수 있습니다 (1번 라인을 이름을 지어주는 거임)
[선이름] 100px
중복된 이름도 가능: [시작선이름 끝선이름] 100px
선의 이름이 중요한 경우가 아닌 이상 사용하지 않느낟.
repeat(반복횟수, 100px 200px)처럼 여러 단위를 돌아가면서 반복 시킬 수도 있다.
-
template-columns (w)
명시적으로 열의 크기와 개수를 정의
grid-template-columns: 200px 200px
1fr은 비율을 의미한다.;
grid-template-columns: repeat(3,1fr); → 3번 1fr을 반복
-
grid-template-areas
꼭 아이템 속성의 grid-area와 함께 사용해야한다.
저장된 그리드 영역이름을 참조해 템플릿을 생성
-
grid-template (단축)
"hrader header header" 80px
"main main aside" 350px
"footer footer footer" 130px
/ 2fr 100px 1fr
-
row-gap
각 행과 행 사이의 간격을 지정 선의 크기
-
column-gap
→ gap (행, 열 ) : 단축속성
-
grid-auto-rows
암시적 행의 크기를 정의합니다.
암시적?
만약 두행 두열로 그리드를 만들었을때
그리드 밖에 배치가 되었을 때의 크기를 지정해 줄 수 있다.
→ 암시적 정의가 없다면 제대로 표현되지 않는다.
1fr을 넣으면 명시적 비율과 ㅏ합쳐져서 크기가 계산된다.
자동으로 늘어난 행과 열의 선은 양수만 사용가능하고 음수로 표현 할 수 없다.
-
grid-auto-flow
흐르는 방향 제어
배치하지 않은 아이템들이 어떤 방식으로 자동 배치 알고리즘으로 처리할 지 정의 합니다.
-
row: 수평으로 행의 축을 따라
- 다음 순서의 요소의 크기가 빈 영역과 맞지 않다면 빈 영역을 채우지 않음
-
column: 수직으로 열의 축을 따라
-
row dense: 수평으로 빈 영역을 메움
-
column dense: 수직으로 빈 영역을 메움
-
-
GRID 단축
template, auto의 단축속성
row와 column은 / 로 구분되고 row가 먼저 표기된다.
→ auto-flow를 /를 사이를 두고 앞이면 flow-row, 뒤면 flow-column이다.
.container {
grid: auto-flow dense 150px / 100px 100px;
}.container {
grid: auto-flow 150px / 100px 100px;
}
단축 place-items: align(수직) / justify(수평)
-
align-items
-
justify-items
content안에서 아이템을 정렬
-
normal
-
start
-
end
-
center
-
stretch
-
-
align-content 열축 수직정렬
그리드 콘텐츠의 세로 너비가 그리드 컨테이너의 세로 너비보다 작아야한다.
- normal (=stretch)
- start
- end
- center
- space-around: 요소의 위아래 여백들을 일정하게
- space-between
- space-evenly : 여백을 모두 동일
- stretch
-
justify-conrent:
- normal
- start
- end
- center
- space-around
- space-between
- space-evenly
-
Gird Item
-
grid-column
grid-column: 1 / 3; 아이템의 크기의 열을기준으로 확장을 시킬 수 있다.
시작점 / 끝점
시작점 / span3 (시작에서 3개의 column차지)
span 3만 쓰는것도 가능하지만 시작점이 명확하지 않은 상태라면 문제가 발생할 수 있다. -
grid-row(단축)
-
grid-row-start
-
grid-row-end
span이 staet에 존재한다면 끝 수에서 -로 / end에 존재한다면 시작에서 +
-
-
grid-area
area는 이름을 설정할 수도 있고
grid-row와 grid-column의 단축속성으로도 사용할 수 있다.
grid-area: r-s / c-s / r-e / c-e;
그러나 영역 이름을 설정할 경우 배치에 대한 속성은 무시되고 이름 속성만 남게 됩니다.
- align-self
단일 그리드 아이템을 개별적인 수직 정렬
- start
- center
- end
- stretch
- jstify-self
단일 그리드 아이템의 개별적인 수평 정렬
- start
- end
- center
- stretch
- order
그리드 아이템이 자동 배치되는 순서를 변경
숫자가 작을수록 앞서 배치 (음수값 가능)
- z-index 기본값 0
숫자가 클수록 앞으로 배치(음수 가능 뒤로 빠지게 됨)
position이나 그리드가 부여되어야 사용이 가능하다.
그리드 함수
-
repeat(반복되는 횟수, 어떤걸 반복할지의 크기)
-
minmax(최솟값, 최댓값)
template,auto 속성에 사용합니다.
repeat(4,minmax(100px,1fr)최솟값보다 컨테이너가 작아진다면 overflow가 발생한다.
-
fit-content(내용의 최대크기)
아이템이 포함하는 내용에 크기를 맞춘다.
indent? 제대로 안하면 문제 발생하는 듯
그리드 단위
- fr (fraction) 사용 가능한 공간에 대한 비율
what is in the items!!
combine that minmax -> respondive design
-
min-content:아이템이 가질 수 있는 최소의 크기
grid-template-columns: min-content 1fr;
문장이라면 가장 긴 단어를 기준으로 줄어들게 된다.
한글일 경우 (word-break: keep-all)로 바꿔야지 단어 기준으로 쪼개질 수 있다.
-
max-content: 아이템(내용 content)이 가질 수 있는 최대한의 크기
필요한 만큼 커진다.grid-temaplate-columns: repeat(5,minmax(max-content,1fr)); ->글자가 두개로 나뉘거나 깨지지 않는다. grid-temaplate-columns: repeat(auto-fit,minmax(40px,max-dontent));
-
auto-fill : 아이템을 수용하고 남은 공간이 있을 때 발생했을 때 남는 공간을 유지하고→ 최대값이 사용이 안되 는 거 아닌ㄴ가.
가능한 범위 안에서 가능한 많은 column을 만들어 준다
-
auto-fit: 남는 공간을 채운다. 공간이 존재하더라도 무시하고 가지고 있는 요소들로 채운다.
grid-template: repeat(auto-fill, ,,,)
repeat함수랑 함게 사용된다.
컨텐츠의 크기가 컨테이너의 크기보다 커져서 overflow가 되었을 때 사용할 수 있다.
repeat(auto-fill,minmax(120px,1fr)
아이템의 개수와 단위를 자동으로 맞추게된다.
두개는 거의 비슷함
Author And Source
이 문제에 관하여([temp] 12. CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wuixwui/temp-12.-CSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)