CSS사용하기전 글로벌 셋팅 및 타이포그래피 설정하기

CSS로 HTML에 스타일을 적용하기 전 먼저 글로벌셋팅 값으로 :root와 *{} 을 사용.
타이포그래피는 h1~p 등 제목태그에 각 속성을 정의해둔다.

여기서 *{} 는 전체 선택자이며, 모든 형태의 모든 요소를 선택한다.
셋팅값을 사용하려면 var()을 꼭 사용해야하는점 명심하자.

그리고 타이포그래피를 셋팅할때는 HTML에서 h1,h2,h3,p...등을 먼저 아무 텍스트나 넣어서
셋팅과 동시에 모니터링 하면서 셋팅값을 설정할 수 있도록 하자.

/* Global */
:root{
/* Color */
--color-white: #ffffff;
--color-light-white: #d2d2d2;
--color-dark-white: #a2a2a2;
--color-mustard-yellow: #ffc400;
--color-black: #000000;
--color-grey: #4f4f4f;
--color-dark-grey: #232323;

/* Font size */
--font-large: 48px;
--font-medium: 28px;
--font-regular: 18px;
--font-small: 16px;
--font-micro: 14px;

/* Font weight */
--weight-bold: 700;
--weight-semi-bold: 600;
--weight-regular: 400;

/* Size */

}

/* Univarsal tags */
* {
    box-sizing: border-box;
}

/* Typography */

h1{
    font-size: var(--font-large);
    font-weight: var(--weight-bold);
    color: var(--color-black);
    margin: 16px 0;
}

h2{
    font-size: var(--font-medium);
    font-weight: var(--weight-semi-bold);
    color: var(--color-black);
    margin: 8px 0;
}

h3{
    font-size: var(--font-regular);
    font-weight: var(--font-regular);
    color: var(--color-black);
    margin: 8px 0;
}

p{
    font-size: var(--font-regular);
    font-weight: var(--font-regular);
    color: var(--color-black);
    margin: 4px 0;
}