css font 프로퍼티 이용하여 모든 프로퍼티 속성 한 번에 사용하기

네 안녕하세요, 이번 포스팅에서는 저번 시간에 알려드렸던 폰트 사용법을

좀 더 쉽게 활용하는 방법에 대하여 알아보도록 하겠습니다.

폰트의 사용법을 알고 계시다는 전제 하에 진행을 할 예정이니,

폰트 사용법에 대하여 모르시는 분들이라면 이전 포스팅을 먼저 보고 와주시면 좀 더 도움이 되실 겁니다.

사이트는 아래에 달아두도록 하겠습니다.

2023.03.13 - [html, css, 자바스크립트] - css 폰트 사용법에 대하여 알아보기

그럼 지금부터 시작하도록 하겠습니다.

1. 단축 프로퍼티 사용하기 : font 프로퍼티 이용

단축 프로퍼티인 font 프로퍼티는 font 속성 프로퍼티를 한 번에 쓸 수 있도록 해주는 프로퍼티입니다.

이 프로퍼티는 이렇게 사용합니다.

font : font-style font-weight font-size font-family

이 순서대로 진행이 되며,

각각의 순서는 폰트 스타일, 폰트 굵기, 폰트 크기, 폰트 패밀리입니다.

그래서 직접 써본다면 이렇게 쓸 수가 있습니다.

font : italic bold 20px consolas, sans-serif;

이를 순서대로 말씀을 드리자면 스타일은 이탤릭체, 그리고 글씨는 굵게, 20픽셀의 사이즈를 가지며,

consolas 글씨체에 삐침을 적용하지 않겠다는 뜻이 됩니다.

그리고 보시면 아실 수 있듯이 각각의 속성 프로퍼티는 연결이 되어야 하기 때문에 쉼표를 붙이면 안 되고,

font-family 프로퍼티만 예외적으로 브라우저에서 글씨체를 지원해주지 않을 경우를 대비해야 하며,

기본 유형을 정해야 하기 때문에 사용을 합니다.

그리고 여기서 font-size와 font-family 프로퍼티는 반드시 지정이 되어야만 하는 프로퍼티이기 때문에

이 둘은 절대 빠지면 안 됩니다.

그리고 나머지 두 개의 프로퍼티는 굳이 쓰지 않아도 비중이 그리 크지 않으며, 실제로 쓰지 않아도 됩니다.

그래서 쓰지 않을 시에는 그냥 기본값으로 지정이 됩니다.

이어서 이에 관한 예제를 같이 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폰트</title>
    <style>
    body {
        font-family: "Times New Roman", Serif;
        font-size: large;
    }
    h3 {
        font: italic bold 40px consolas, sans-serif;
    }
    </style>
</head>
<body>
    <h3>Consolas font</h3>
    <hr>
    <p style="font-weight:900">font-weight 900</p>
    <p style="font-weight:100">font-weight 100</p>
    <p style="font-style:italic">Italic Style</p>
    <p style="font-style:oblique">Oblique Style</p>
    <p>현재 크기의
        <span style="font-size:1.5em">1.5배</span>
        크기로
    </p>
</body>
</html>

이렇게 간단한 예제를 한 번 작성을 해봤습니다.

각각은 폰트의 굵기와 스타일, 크기,

그리고 메인 글씨체를 지정하여 나타낸 html 예제입니다.

그럼 결과 화면을 한 번 보도록 하겠습니다.

이렇게 결과가 잘 나왔음을 볼 수가 있습니다.

h3 태그에는 consolas 체가,

그리고 나머지는 "Times New Roman"체가 잘 적용이 되어있음을 보실 수가 있습니다.

여기까지 css의 표준 단위와 폰트를 다루는 방법에 대하여 한 번 알아보았습니다.

다음 포스팅에서는 css에서 다루는 모델 중에 박스 모델에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다 ~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 박스 프로퍼티로 박스 제어하기 (0)	2023.03.18
css 박스 모델의 구성 알아보기(콘텐츠, 패딩(padding), 테두리(border), 여백(margin) (0)	2023.03.18
css 폰트 사용법에 대하여 알아보기 (0)	2023.03.13
css 표준 단위에 대하여 알아보기 (0)	2023.03.13
css 텍스트 프로퍼티로 텍스트 꾸미기 (0)	2023.03.13

개발러 L의 뻔fun한 코딩

css font 프로퍼티 이용하여 모든 프로퍼티 속성 한 번에 사용하기