TIL 20210916 [항해99 4일차]

.login-form-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.left{
    width: 100%;
    text-align: center;
    float: left;
}

.right{
    width: 100%;
    text-align: center;
    float: right;
}

- flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.
- justify-content 속성은 브라우저 사이와 함께 주위의 콘텐츠 항목의 공간을 배포하는 방법 속성을 정의한다.(공간배치)
- align-items 속성은 설정 align-self그룹으로 모든 직계 자식에 대한 값이다. Flexbox에서는 Cross Axis 항목의 정렬을 제어한다. 그리드 레이아웃에서는 그리드 영역 내에서 블록 축의 항목 정렬을 제어한다.(박스 내에서 박스상태로 정렬)
- text-align 속성은 div안에 있는 이미지나 문자를 움직이게 할 수 있다.(박스 내에서 내용만 정렬) 블록 요소나 표의 칸 상자의 가로 정렬을 설정한다. 즉 vertical-align과 동일하나 세로가 아닌 가로 방향으로 동작한다.
- float 속성은 left와 right로 왼쪽 오른쪽 나눌 수 있다.

오늘은 전체적인 CSS 프로젝트를 수정하면서 div박스 배치에 대해 많이 실습 할 수 있는 시간을 가져서 좋았다. 앞으로 더 빠른 속도로 CSS를 수정할 수 있을 날을 기대하며...