2020.09.14

font style

 

google fonts에서 검색해서

원하는 폰트를 css파일에 import한다

 

@import url ()

을 css파일 맨 위에 적고

아래에서 font-family로 적용한다

 

 

 

justify-content: space-between;

은 사이의 공백을 똑같이 나눈다=크기 다르면 두번째것이 중심으로 오지못한다

 

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

.status-bar__column {width: 33%;} 

부모요소의 공간을 33%씩 차지함

각 요소가 1/3에 위치한다

 

그 후에 column의 두번째, 마지막 요소들을 배치해주면 된다

 

 

 

icon 크기조절

class에 fa-2x, fa-3x, fa-lg 를 맞게 추가한다

 

 

 

reset css

CSS에 기본적으로 설정된 margin, padding을

0으로 초기화하는 과정

브라우저마다 설정이 다르기 때문에 어느 브라우저에서든지 같은 화면을 보여주기 위함

reset.css파일을 만들어 style.css에 @import한다

-style.css에 추가해야 html파일이 지저분해지지 않는다