웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #5(폰트 속성

goodthings4me.tistory.com

■ 폰트 속성 (font-size/family/sytle/weight, line-height, text-align/decoration)

O font-size 속성

- 글자의 크기 지정 : 단위(px, em) 또는 키워드

- h1 태그의 기본 크기는 32px, p 태그의 기본 크기는 16px
* 웹 브라우저 기본 크기 : 16px
* 모바일 반응형에서는 글자 크기 단위는 em 사용하는 것이 좋음

O font-family 속성

- 글자의 폰트 종류 지정(컴퓨터에 설치된 폰트 입력)

- 형식
font-family: "맑은 고딕", 돋움, 굴림, Arial | 'Time New Roman';
* "맑은 고딕" 글꼴이 없으면 "돋움" 적용하고 없으면 "굴림" 등 순차적 적용 의미
* 따옴표는 공백이 있는 폰트명일 경우에 표시
* 여러 개 지정 시 콤마로 분리
.font-A { font-family: Arial, 'Time New Roman', Serif, Sans-serif, Monospace ; }
* Serif (명조체), Sans-serif (고딕체)

@font-face 속성

- 직접 웹 폰트를 업로드해서 사용해도 되지만, 최근은 구글 웹 폰트 등을 많이 사용함 (직접 업로드 사용하기)

<head>
    <style>
        @font-face {
            font-family: 'trana'; /* 글꼴 */
            src: local('trana'),
                url('trana.eot'),
                url('trana.woff') format('woff'),
                url('trana.ttf') format('truetype'),
        }
        .w-font {
            font-family: 'trana', san-serif; /* 웹 폰트 지정 */
        }
    </style>
</head>

- 웹 폰트(web-font) : 사용자 시스템에 지정한 글꼴이 없더라도 웹상에 있는 글꼴 정보를 가져와서 화면에 표시해주는 기능(웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴로 구글 웹 폰트를 많이 사용함)

- 구글 웹 폰트 사용하기
* https://fonts.google.com/ 접속
* 적용 폰트 검색 후, Embed의 <link href=""> 또는 @import 소스 url 복사, 그리고 CSS 적용 글꼴 이름 기억

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">

또는 

@import 
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');
</style>

CSS rules to specify families
font-family: 'Noto Sans KR', sans-serif;

O font-style 속성과 font-weight 속성

- 폰트의 기울기 또는 두께 조정

O line-height 속성

- 문단 내 줄간격(글자의 높이) 지정 : 글자를 수직 중앙 정렬할 때 많이 사용

- 숫자와 백분율은 부모 요소를 기준으로 몇 배인지 지정
* 보통 글자 크기의 1.5~2배 정도면 적당

- height와 같거나 비슷한 수치를 줌
* 글자는 수평 중앙 정렬은 되지만, block 형식에서 수직 정렬은 되지 않기 때문에 이 속성 사용

- 형식
line-height: normal | <숫자> | <크기> | <백분율>

<head>
    <style>
        .big-line { line-height: 2; } /* 글자 크기 2배, 200%, 20px 등 사용 가능 */
        .small-line { line-height: 0.7; } /* 글자 크기 0.7배 */
    </style>
</head>

<head>
    <style>
        .font_big {
            font-size: 1.3em;
        }
        .font_italic {
            font-style: italic;
        }
        .font_bold {
            font-weight: bold;
        }
        .font_center {
            text-align: center;
        }
        .button {
            width: 80px;
            height: 35px;
            background-color: #ff6a00;
            border: 1px solid #ffffff;
            border-radius: 20px;
            box-shadow: 5px 5px 5px #a9a9a9;
        }
        .button>a {
            display: block;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="button">
        <a href="#" class="font_big font_italic font_bold font_center">Click</a>
    </div>
</body>

O tex-align 속성

- 글자의 정렬 관련 속성

- <span> 태그는 inline 형식을 가지므로 너비가 존재하지 않기 때문에 text-align 속성 적용 안됨 (중앙이라는 개념이 없음)

O text-decoration 속성

- 텍스트에 밑줄 긋거나 가로지르는 선(취소선) 표시

- <a> 태그 href 속성의 밑줄 제거 시에도 사용

-형식
text-decoration: none | underline | overline | line-through

<head>
    <style>
        .edit1 { text-decoration: underline; }
        .edit2 { text-decoration: overline; }
        .edit3 { text-decoration: line-through; }
    </style>
</head>
<body>
    <span>
        <a href="#" class="edit1">Click</a>
        <a href="#" class="edit2">Click</a>
        <a href="#" class="edit3">Click</a>
    </span>
</body>

O white-space 속성

- 공백 처리 방법 지정

- 형식
white-space: normal | nowrap | pre | pre-line | pre-wrap
* normal : 기본값 연속 공백은 하나로 처리
* nowrap : 연속 공백 하나, 줄바꿈 안됨
* pre : 연속 공백, 줄바꿈 모두 소스 그대로 표시, 영역 너비 넘어가는 부분의 줄은 자동으로 바뀌지 않음
* pre-line : 연속 공백은 하나로, 소스에서 줄바꾼 부분 그대로 표시, 영역 너비 넘어가는 부분 자동 줄바꿈
* pre-wrap : 연속 공백, 줄바꿈 모두 소스 그대로 표시, 영역 너비 넘어가는 부분 자동 줄바꿈

O letter-spacing, word-spacing 속성

- 글자간 간격, 단어간 간격 지정

- 형식
letter-spacing: normal | <크기>
word-spacing: normal | <크기>

# 참고자료
Do it HTML5 + CSS3 웹 표준의 정석 2016
모던 웹 디자인을 위한 HTML5+CSS3 입문 2015

'IT(Tip)' 카테고리의 다른 글

웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #7(float, shadow) (0)	2020.09.29
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #6(위치 속성 - position, z-index, overflow) (0)	2020.09.28
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #4(배경 속성 - background) (0)	2020.09.26
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #3(박스 속성 - width, height, margin, padding, box-sizing) (0)	2020.09.25
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #2(가시 속성 display, visibility, opacity) (0)	2020.09.24

웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #5(폰트 속성 - font, line-height, text-align)

'IT(Tip)' 카테고리의 다른 글

댓글

티스토리툴바

웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #5(폰트 속성 - font, line-height, text-align)

'IT(Tip)' 카테고리의 다른 글

관련글

댓글

티스토리툴바