font

font

font-size

글꼴의 크기를 지정합니다.

h1 {
    font-size: 14px;
}

h1 {
    font-size: 1rem;
}

h1 {
    font-size: 1em;
}

• px : 모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽지만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용하지 않는 것이 좋습니다. 주로 고정적인 상황일때 px단위를 사용합니다.
• rem : rem 단위는 문서의 최상위 요소, 즉 html 요소의 크기의 몇 배 인지로 정합니다.
• em : 부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기 어렵습니다. rem이 등장하면서 이 단위는 사용을 권장하지 않습니다.

color

글자의 컬러를 지정하는 방법입니다.

// red, blue 등 이미 정의된 색
h1 {
    color: red;
}

// #000, #fff 등의 16진수 색상코드
h1 {
    color: #000;
}

// rgb 색상
h1 {
    color: rgb(255, 255, 255); 
}

// 알파(투명도)가 적용된 색상
h1 {
    color: rgba(200, 100, 150, 0.5); 
}

font-style

글꼴의 스타일로, 주로 이탤릭체(기울여 표시)를 설정하기 위해 사용합니다.

h1 {
    font-style : italic;
}

• normal: 기본
• italic: 이탤릭체

font-weight

글꼴의 두께로, 미리 정의된 단어나 100~900 사이의 숫자를 통해 설정합니다.

h1 {
    font-weight : 100;
}

• normal : 보통 굵기입니다. 숫자 400과 같습니다.
• bold : 굵은 굵기입니다. 숫자 700과 같습니다.
• bolder : 상속된 값보다 굵은 굵기입니다.
• lighter : 상속된 값보다 얇은 굵기입니다.
• number : 100, 200, 300, 400, 500, 600, 700, 800, 900
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

text-align

텍스트의 정렬 방향을 의미합니다.

h1 {
    text-align: center;
}

• left : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 중앙 정렬
• justify : 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

font-family

쉼표(,)로 여러 글꼴을 등록 할 수 있는데, 이때 사용하고자 하는 폰트를 맨 앞에 우선으로 적용시킵니다.

@font-face {
    font-family: ''NotoSansCJKkr-Regular';
    src: url("./fonts/NotosansCJK/NotoSansCJKkr-Regular.eot");     
    src: url("./fonts/NotosansCJK/NotoSansCJKkr-Regular.otf");     
    src: url("./fonts/NotosansCJK/NotoSansCJKkr-Regular.woff");     
    font-weight: normal;     
    font-style: normal;
}

h1 {
    font-family: ''NotoSansCJKkr-Regular', ''NanumGothic'';
}