CSS | portfolio page만들기

1. 페이지 외부 폰트 설정

//무료 폰트사이트

https://noonnu.cc/

눈누

웹폰트로 사용 내에 소스복사

css에 그대로 복붙

css body 태그에 

font-family:에 위에 폰트명 적어주고 

, sns-serif 는 

만약 못 불러올시 sns-serif 체를 불러오겠다

 

2.CSS :root 변수 선언

--(하이픈2개)적고 속성 이름을 적은 후 :(클론) 뒤에 속성값 넣어줌

:root{
        --color-white: #ffffff;
        --color-black: #000000;
        --color-blue: #6b8bad;
        --color-gray: #707C7E;

        --font-large: 48px;
        --font-medium: 28px;
        --font-regular: 18px;
        --font-small: 16px;
        --font-micro: 14px;

        --size-border-radius: 4px;

        --animation-duration: 300ms;
}

사용

var(변수명)

var(--color-white);

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