Topic
CSS Layout (position, flexbox, grid)
What I Learned
Position property
- top, right, bottom, left, inset 속성으로 구체적인 위치를 지정
- static(default): 일반적인 문서 흐름에 따라 배치
- top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다
- relative: 일반적인 문서 흐름에 따라 배치
- top, right, bottom, left의 값에 따라 오프셋을 적용한다
- 오프셋은 다른 요소에 영향을 주지 않는다
- 요소가 차지하는 공간은 static일 떄와 같다
- sticky: 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 블록 레벨 조상을 기준으로 배치
- static처럼 위치해 있다가 scroll이 해당 부분을 넘어가면 fixed처럼 위치한다
- fixed: 뷰포트의 초기 컨테이닝 블록를 기준으로 배치
- 일반적인 문서 흐름에서 제거되어 페이지 레이아웃에 공간을 배정하지 않는다
- absolute: 조상 요소 중 positioning(static이 아닌 값) 된 가장 가까운 요소를 기준으로 배치
- 일반적인 문서 흐름에서 제거되어 페이지 레이아웃에 공간을 배정하지 않는다
- z-index: positioning된 요소, 그 자손과 flex items의 z축 순서를 지정한다
- 정수 값을 사용한다
- 숫자가 클 수록 앞으로 나온다
- stacking context: z-index를 묶어서 생각하는 범위
- MDN 문서의 쌓임 맥락 페이지 참고
- 쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다.
- 쌓임 맥락은, 문서 어디에서나, 다음 조건을 만족하는 요소가 생성합니다.
- 문서의 루트 요소 (<html>)
-position이absolute또는relative이고,z-index가auto가 아닌 요소position이fixed또는sticky인 요소 (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)- 플렉스(
flexbox(en-US)) 컨테이너의 자식 중z-index가auto가 아닌 요소. - 그리드(
grid) 컨테이너의 자식 중z-index가auto가 아닌 요소. opacity가 1보다 작은 요소
-mix-blend-mode가normal이 아닌 요소- 다음 속성 중 하나라도
none이 아닌 값을 가진 요소
-transform
-filter
-perspective(en-US)
-clip-path
-mask/mask-image(en-US) /mask-border(en-US)
-isolation이isolate인 요소
--webkit-overflow-scrolling이touch인 요소
-will-change의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소
-contain이layout,paint, 또는 둘 중 하나를 포함하는 값(strict,content등)인 요소
- 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.
- 쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.
- 쌓임 맥락은 형제 쌓임 맥락과 완전히 분리됩니다. 쌓임을 처리할 땐 자손 요소만 고려합니다.
- 각각의 쌓임 맥락은 독립적입니다. 어느 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째 부모 쌓임 맥락 안에 배치합니다.
Flexbox
- Flexbox란?
display: flex1차원 레이아웃 메소드
- 배치 방향
- flex-direction: 배치 방향 결정
- row(default)
- column
- row-reverse
- column-reverse
- flex-direction: 배치 방향 결정
- 정렬
- Main Axis: 배치 방향
- Cross Axis: 배치 방향에 수직인 방향
- justify-content: main axis 방향으로 콘텐츠 간의 여백 설정
- align-content: cross axis 방향으로 콘텐츠 간의 여백 설정
- align-items: cross axis 방향으로 모든 요소의 위치 결정
- align-self: cross axis 방향으로 한 요소의 위치 결정
- 줄 바꿈
- flex-wrap: overflow된 요소의 줄 바꿈 설정
- wrap
- no-wrap
- wrap-reverse
- flex-wrap: overflow된 요소의 줄 바꿈 설정
- 간격
gap: {row-gap} {column-gap}- gap 속성값은 flex-direction의 영향을 받지 않는다
- 요소 꽉 채우기
- flex-grow
- default: 0
- 형제 요소들의 flex-grow 값의 비율에 따라 남은 여백을 분배하여 각 요소의 너비/높이를 늘려준다.
- 1 값을 주면 빈 공간을 채울 수 있다
- flex-shrink
- default: 1
- 형제 요소들의 flex-shrink 값의 비율에 따라 overflow가 일어난 너비/높이를 분배하여 각 요소의 너비/높이를 줄여준다.
- 0 값을 주면 요소를 원하는 위치에 고정할 수 있다
- flex-basis
- default: auto
- flex 요소의 기본 사이즈를 지정한다.
- width와 사용하는 단위가 같다.
- 기본값인 auto로 지정된 경우 컨텐츠 사이즈에 맞춰서 나타나고, 0px/0% 값을 주면 부모 컨테이너를 기준으로 크기가 정해진다.
flex: {flex-grow} {flex-shrink} {flex-basis}형태로 쓸 수 있다display: inline-flex를 활용해 인라인 안에서 플렉스박스를 만들 수 있다
- flex-grow
Grid
- Grid란?
display: grid2차원 레이아웃 메소드
- Grid 나누기
grid-template-columns: {width1} {width2} ...grid-template-rows: {height1} {height2} ...grid-template: {height1} {height2} ... / {width1} {width2} ...
- 유연한 크기와 유용한 함수들
- grid-auto-rows/grid-auto-columns 속성으로 row/column 크기를 자동 지정할 수 있다
- grid-row/grid-column 속성값으로 그리드라인의 번호를 입력해 요소를 원하는 셀 집합에 배치할 수 있다
- span n 속성값도 쓸 수 있다
- grid item에 grid-area라는 이름을 붙이고 grid container에 grid-template-areas 속성을 이용해 이름으로 배치할 수 있다
- 해당 위치를 비우고 싶으면 마침표(.)를 쓰면 된다
- size에 fr(fraction) 값을 넣으면 요소 간 상대적인 크기로 지정할 수 있다
- size에 minmax(min, max) 함수를 활용할 수 있다
- minmax에서 최댓값에만 fr 값을 쓸 수 있다
- size에 repeat(n, size) 함수를 활용할 수 있다
- 간격 넣기
gap: {row-gap} {column-gap}
Feedback
- 셀 형식으로 반복적인 구조를 띠면 grid, 아닐 경우 대부분의 경우 flexbox를 쓰면 좋을 것 같다
- 다음으로 '실용적 유닉스 커맨드라인' 코드잇 콘텐츠를 수강할 예정이다
Reference
job's done