구글 폰트와 css hack(justify-content 대신 사용)

상태바의 컬럼 요소들을 한줄로 놓기 위해서.

display: flex; 를 해주었다

 

그리고 상태바의 각 컬럼 요소들을 동일한 비율로 배치하기 위해서 

justify-content: space-between; 으로 해주었다. 

  justify-content: space-between; /* flex 축을 기준으로 서로 떨어뜨려놓기 */

 

 

구글 폰트로도 폰트 패밀리를 지정해줄 수 있는데 

아래와 같이 여러가지 스타일을 추가하게 되면 로딩하는데 시간이 더 걸릴 수 있다. 

 

 

 

적용하는 데에는 두 가지 방식이 있다.

 

 

헤더에 링크를 넣거나 

css에 @import를 해주거나 

노마드 코더는 import를 추천했다. (국비 선생님도 그랬음)

 

임포트문을 복사해서 css의 맨 첫줄에 넣어준다.

 

*** 내가 자주 까먹는건 임포트문을 첫 줄에 넣고나서, 폰트 패밀리를 복사하지 않는 것이다.

임포트문 복사할 때 밑에 있는 font-family까지 복사해서 바디 전체에 적용하는 것 잊지말자..

 

적용한 모습은 아래와 같다. 

 

현재 시계가 정가운데가 아니다.

 

space-between을 했음에도 시계가 정가운데가 아닌 것은, 컬럼마다 각자 갖고 있는 width가 다르기 때문이다. 

No service 는 더 크고 배터리 부분은 작기 때문이다.

 

이때, CSS hack(justify-content 대신 사용가능하다)을 레시피 처럼 사용하면 된다. (이상하지만 작동된다)

 

CSS hack

1. 상위박스 :

  justify-content: center; /* 상태바의 요소들을 가운데 몰리도록 배치 */

 

- 중앙으로 몰림

 

2. 내부박스 범위 :

  width: 33.3%;

- 왼쪽으로 몰려서 범위 벌어짐. 왼쪽 위치할 박스는 가장 왼쪽에 붙어서 정렬됨.

 

3. 중앙에 위치할 박스 :

  display: flex;

  justify-content: center;

중앙에 위치할 박스만 정중앙에 위치함 

 

4. 오른쪽에 정렬할 박스 :

  display: flex;

  justify-content: flex-end;

  align-items: center;

오른쪽에 붙어서 정렬된다. 

여기서 align-items는 세로축 기준으로 중앙에 위치하게 된다.