[CSS] 정렬 방법

- 주의! 정렬(특히 중앙정렬은) width, height, margin 속성에 영향을 받는다


//==========
* flex  
    - 플렉서블 박스(flexible box) 레이아웃
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/cssref/css3_pr_flex.asp


    - 예제) 중앙 정렬  <=== 권장 추천!!!
.flex1 {
display: flex;            /* flex형식으로 지정 */
flex-direction: row;    /* 배열 방식: row=수평, columm=수직 */
justify-content: center;/* 가로 정렬: center=중간, flex-start=좌, flex-end=우 */
align-items: center;    /* 세로 정렬: center=중간, flex-start=좌, flex-end=우 */
}


//==================
* text-align
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
    - 블록 안의 내용에 대한 좌우 정렬
text-align: center;
text-align: left;
text-align: right;
text-align: justify; /* 양쪽 정렬 */


//============================
* vertical-align
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
    - 사용 주의, 한줄안에서 세로 정렬, 블록에는 적용안됨
    inline , table-cell 에만 적용됨

vertical-align: middle;
vertical-align: top;
vertical-align: bottom;



//==============
// 참고
- Layer 화면 중앙정렬 방법
https://wit.nts-corp.com/2017/02/06/4123