1. UI Component 의 중앙정렬
최근 모니터의 해상도가 높아져 해상도에 맞추기 위해서
Component 들을 Resizing 하거나 최소 해상도에 width를 고정하여 가운데로 정렬하는 방법을 사용한다.
예를 들면 네이버 사이트 처럼 가운데 위치하도록 구성하여 양 옆의 사이드를 여백으로 두는 UI 구조를 만들고 싶을 경우가 생긴다.
CSS에 다음과 같은 클래스를 추가하고 가운데 정렬한 Component Class를 적용한다.
.div-center {margin: 0 auto;}
또는
.div-center {
margin-left: auto;
margin-right: auto;
width: 800px;;
background-color: #33ccff;
}
2. Text의 중앙정렬
CSS에 다음과 같은 클래스를 추가하여 클래스를 적용한다.
.txt-left {text-align: left;} // 글 왼쪽정렬
.txt-center {text-align: center;} // 글 가운데정렬
.txt-right {text-align: right;} // 글 오른쪽정렬