[CSS] 레이아웃(Layout)

CSS Reset

* {
  margin: 0px;
  padding: 0px;
  list-style: none; /* list 부호 제거 */
  text-decoration: none; /* a 태그 밑줄 제거 */
}

Layout

- float으로 요소를 띄워서 배치

/* float 사용시 부모요소에 가상요소 추가 필요 */
부모요소::after {
  content: " "
  display: block;
  clear: both;
}

/* 요소를 띄워서 좌, 우측 위치. 모든 형제 요소들에 float 적용 */
float: left;
float: right;

/* 현재 위치 기준으로 위치 이동 */
position: relative;
top: 100px;
bottom: -100px;
left: 100px;
right: -100px;

/* position이 있는 부모 요소 기준(없는 경우 body 기준) */
position: absolute;
top: 100px;
bottom: -100px;
left: 100px;
right: -100px;

/* 웹 브라우저 기준 고정 */
position: fixed
top: 100px;
bottom: -100px;
left: 100px;
right: -100px;


/* 삽입된 멀티미디어 크기 설정 */
object-fit: fill;    /* 기본값 */
object-fit: cover;   /* 이미지가 잘리더라도 전체를 덮음 */
object-fit: contain; /* 특정 영역내에 이미지가 모두 포함되도록 설정 */

/* z축 위치 설정. z축 크기가 큰 순서대로 상위에 배치 */
z-index: 2;

- flex로 정렬

/* 부모 요소에 적용 */
display: flex;        /* 부모 적용시 자식 좌우 배치. 부모 요소: block, 자식요소: inline-block */
display: inline-flex; /* 부모도 inline 적용 */

/* 중심축 설정: 부모 요소에 적용 */
flex-direction: row;     /* 기본 설정 */
flex-direction: column;
flex-wrap: no-wrap;      /* 기본 설정 */
flex-wrap: wrap;         /* 자식 요소가 줄바꿈시 적용 */
flex-flow: row wrap;

/* 정렬 방식, 간격 설정: 중심축(flex-direction) 기준, 부모 요소 적용 */
justify-content: flex-start;     /* 좌측 기준 정렬 */
justify-content: flex-end;       /* 우측 기준 정렬 */
justify-content: center;         /* 중앙 기준 정렬 */
justify-content: space-between;  /* 양 끝에 간격 없이 설정 */
justify-content: space-around;   /* 양 끝에서 간격 적용 */
justify-content: space-evenly;

/* 정렬 방식, 간격 설정: 보조축 기준, 부모 요소 적용 */
align-items: center    /* 1줄 기준 정렬 */
align-content: center  /* 여러줄 기준 정렬. wrap 적용 필수 */

/* 순서 지정: 자식요소 적용 */
order: 2;

/* 요소 여백 비율 설정 : 자식요소 적용. 자식의 남은 여백 기준 비율 지정 */
flex-grow: 2;

/* 요소 여백 지율 설정: 자식요소 적용. 값이 클수록 더 많이 축소됨. flex-grow 반대 */
flex-shrink: 2;

/* 전체 폭 설정: 자식 요소 모두 적용. 비율로 적용 */ 
flex: 2;