6. Log in 화면 만들기 (css-상태바2)

5) 상태바의 박스 위치 수정하기

기존에 박스들의 간격 준 코드

박스 간에  간격을 주기 위해 

justify-content: space-between; 을 하였음.

 

시계의 위치가 가운데에서 치우쳐진 모습

앞에 와이파이 쪽에 공간을 주다보니

시계의 위치가 가운데에서 치우져지게 됨.

 

 

그렇기에

컨테이너 하나를 중심에 놓는 다른 방법을 사용하겠음.

 

 

수정한 코드

.status-bar {
display: flex;
justify-content: center;
}

를 하여 모든 박스를 가운데로 모아주고

.status-bar__column{
width: 33%;
}

를 하여 모든 박스의 너비를 33%로 설정하고

.status-bar__column:nth-child(2){
display: flex;
justify-content: center;
}

를 하여 두 번째 자식인 박스를 가운데로 설정함. (두 번째 박스=시계부분)

.status-bar__column:last-child{
display: flex;
justify-content: flex-end;
align-items: center;
}

를 하여 마지막 자식인 박스를 마지막 끝으로 보내고

정렬이 되지않은 아이콘의 높이를 가운데로 정렬함.

설정한 대로 정렬된 모습

시계가 가운데에 위치하고 배터리 부분은 맨 끝으로 감.

하지만 배터리 부분의 아이콘이 다닥다닥 붙어있어 예쁘지 않음.

 

 

 

6) 배터리 아이콘 간격 조정하기

배터리 아이콘의 간격을 작성한 모습

.status-bar__column .fa-battery-three-quarters 를 하여

.status-bar__column 인 class의

.fa-battery-three-quarters 인 class를 불러와서

상하에는 공간을 주지않고 좌우에만 공간을 5px씩 줌.

 

변경된 아이콘의 간격

배터리 아이콘의 간격이 변경된 걸 볼 수 있음.

 

 

 

7) 아이콘 크기 변경하기

배터리 아이콘의 크기를 키움

<i class="fas fa-battery-three-quarters fa-lg"></i> 를 하여

fas fa-battery-three-quarters 라는 이름을 가진 아이콘에

fa-lg 하여 크기를 라지로 키움.

 

배터리 아이콘이 커짐

그러자 배터리 아이콘의  크기가 커짐.

 

더 크게 하고 싶다면

fa-2x

fa-3x

fa-5x

.

.

.

등을 할 수도 있음.

 

 

 

8) 상태바에 padding 주기

상태바의 주변에 여유가 없는 모습

reset.css를 했기 때문에 별다른 공간이 설정되어 있지 않음.

그렇기에 상태바가 상단에 여유없이 붙어있음.

 

 

padding을 준 모습

padding: 5px 3px를 하여

위 아래로는 5px, 양 옆으로는 3px의 공간을 줌.

 

 

padding을 적용한 모습

padding을 적용하자 주위에 공간이 생겨난 것을 볼 수 있음.