9. 텍스트 및 폰트 작업하기

폰트 스타일링과 텍스트 관련 속성

폰트 스타일링과 텍스트 관련 속성을 다루는 CSS 코드를 알아봅시다.

font-family와 @font-face

/* 제네릭 패밀리를 이용한 폰트 스타일링 */
body {
    font-family: 'Arial', sans-serif; /* Arial이 없을 때 sans-serif로 대체 */
}

/* Google Fonts를 이용한 폰트 스타일링 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* @font-face를 이용한 폰트 스타일링 */
@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont.woff2') format('woff2');
}

/* font-weight를 지정하여 다양한 두께의 폰트 페이스 가져오기 */
@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont-regular.woff2') format('woff2');
    font-weight: normal;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont-bold.woff2') format('woff2');
    font-weight: bold;
}

/* 폰트 포맷을 추가하여 호환성 향상 */
@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont.woff2') format('woff2'),
         url('mycustomfont.woff') format('woff');
}

텍스트 관련 속성

/* font-variant: small-caps을 사용한 작은 대문자 표시 */
p {
    font-variant: small-caps;
}

/* letter-spacing(자간) 설정 */
h1 {
    letter-spacing: 2px; /* px, rem 등 단위 사용 가능 */
}

/* white-space 속성을 이용한 공백 처리 방식 변경 */
pre {
    white-space: pre-wrap; /* 줄바꿈 및 공백 유지 */
}

/* 줄높이(line-height) 설정 */
p {
    line-height: 1.5; /* 글자의 높이를 1.5배로 설정 */
}

/* text-decoration, text-shadow 속성 등을 이용한 텍스트 꾸미기 */
a {
    text-decoration: none; /* 밑줄 제거 */
    text-shadow: 1px 1px 1px #000; /* 그림자 효과 추가 */
}

/* font 속성을 이용한 폰트 스타일 축약 사용 */
body {
    font: italic bold 24px/1.5 'Arial', sans-serif;
}

폰트 시스템 사용

/* 폰트 시스템을 사용한 일괄 적용 */
html {
    font-size: 16px; /* 기본 폰트 크기 설정 */
}

body {
    font-size: 1rem; /* rem을 사용하여 상대적인 크기 설정 */
    line-height: 1.5; /* 줄높이 설정 */
}

h1 {
    font-size: 2rem; /* 헤딩 요소의 크기 설정 */
}

/* 미디어 쿼리를 사용하여 반응형 폰트 크기 설정 */
@media screen and (min-width: 768px) {
    body {
        font-size: 1.2rem; /* 원하는 폰트 크기로 조절 */
    }
}