[Codeit;] CSS 레이아웃

+) display

display: block
/*위 -> 아래 배치*/
/*<h1>, <div>, <p>*/

display: inline
/*글 쓰는 순서대로 배치, 위아래 크기 X*/
/*<a>, <span>, <img>*/

display: inline-block
/*인라인 태그에 크기 부여*/

 

2. Position

position: static
/*원래 있어어야할 위치, 일반적인 글의 흐름*/

position: relative
/*
기준: 원래 static position의 위치
기존 자리 차지
*/
/*margin과 차이점: 독립적으로 이동*/

position: absolute
/*
기준: 가장 가까운 포지셔닝이 된 조상요소
기존 자리 차지 X
*/
/*크기 지정 X: 내부 텍스트만큼의 크기*/
inset: npx
/*top: npx; bottom: npx; right: npx; left: npx;과 같은 값*/

position: fixed
/*
기준: 브라우저 화면
기존 자리 차지 X
*/
/*크기 지정 X: 내부 텍스트만큼의 크기*/

position: sticky
/*
기본적으로 static, 지정한 위치에 닿으면 fixed
기존 자리 차지
*/
/*부모 요소에 종속*/
z-index: n
/*앞에 보이는 우선순위*/

/*position으로 위치 기준 설정*/
/*top/right/bottom/left로 위치 설정*/
top: 10px
right: 10px
bottom: 10px
left: 10px

 

3. Flexbox

가로/세로로 배치

display: flex
flex-direction:row
/*기본값, 왼쪽 -> 오른쪽*/
flex-direction: column
/*위 -> 아래*/
flex-direction: row-reverse
/*오른쪽 -> 왼쪽*/
flex-direction: column-reverse
/*왼쪽 -> 오른쪽*/

/*
기본 축: 요소가 배치되는 방향
교차 축: 기본축에 수직인 방향
*/

/*기본 축 설정*/
justify-content: center
/*중앙 정렬*/
justify-content: flex-end
/*맨 끝에 정렬*/
justify-content: flex-start
/*맨 앞에 정렬*/
justify-content: space-around
/*양 쪽에 같은 공간 생성*/
justify-content: space-between
/*양 끝으로 늘어뜨려 배치*/
justify-content: space-evenly
/*빈 공간의 크기 동일*/

/*교차 축 설정*/
align-items:center
/*중앙 정렬*/
align-items: flex-end
/*맨 끝에 정렬*/
align-items: flex-start
/*맨 앞에 정렬*/
align-items: stretch
/*늘려서 배치*/

flex-wrap: wrap;
/*요소가 넘칠 때 교차 축 방향으로 정렬*/

gap: npx npx;
/*요소 간 간격 설정(가로, 세로 순서)*/

felx-grow: n;
/*n에 비례하게 요소 늘려서 빈 공간 채우기*/

flex-shrink: n;
/*n에 비례하게 요소 줄여서 빈 공간 채우기*/

flex-basis: n;
/*시작 크기 지정, width와 역할 동일*/

4. Grid

2차원으로 배치

display: grid

grid-template-rows: npx npx ... || nfr(fraction) nfr nfr ... || minmax(npx, npx)
grid-template-columns: npx npx ... || nfr(fraction) nfr nfr ... || minmax(npx, npx)
/*그리드 크기 지정*/

gap: npx npx
/*요소 간 간격 설정(가로, 세로 순서)*/

/*grid-template의 명시적인 값 지정X*/
grid-auto-rows: npx npx npx ...
gird-auto-columns: npx npx npx ...
/*그리드의 기본적인 값 설정*/

grid-row: n / n || span n
grid-column: n / n || span n
/* n번 그리드 라인 ~ n번 그리드 라인 지정 */
/* span: row/column의 길이 지정 */

grid-area: x;
grid-template-areas:
	"x x"
    	"x x";
/*그리드 자리 이름으로 지정*/