[CSS] CSS에 대해 2 - 정렬

CSS의 정렬

• CSS에서 가장 중요한 부분 중 하나가 정렬이다.
• 요소를 원하는 위치에 두고 사용자가 접근하기 편한 곳에 두는 것 또한 가장 중요한 요소
• 정렬의 방법으로 가장 많이 사용되는 방법으로 flex, position, grid가 있다.

Flex

• flex의 핵심은 여러 태그를 하나로 묶어 정렬하는데 있다.
• flex의 정렬하는 기준은 부모 박스로 두고 움직인다.

/* 부모박스 */
    display: flex;

/* 행기준: row, 열기준: column */
    flex-direction: row;
    flex-direction: column;

/* flex-direction 기준 수평 방향으로 자식박스 정렬 */
    justify-content: center;

/* flex-direction 기준  수직 방향으로 자식박스 정렬 */
    align-items: center;

• flex 참고 사이트 : https://studiomeal.com/archives/197

Position

• flex에 종속되지 않고, 박스를 개별적으로 위치시킬 수 있다.

/* 박스의 절대 위치 */
div {
    position: absolute;
    top: 0px;
    left: 0px;
}

/* 부모 박스 기준으로 상대위치 */
div {
    position: relative;
    top: 0px;
    left: 0px;
}

/* 화면을 기준으로한 절대 위치 */
div {
    position: fixed;
    bottom: 0px;
}

• position: fixed는 화면을 기준으로 고정시키고 싶은 박스가 있을 때 사용
  (어플의 하단 내비게이션 바를 고정할 때 사용)