너와 나의 개발 고리

[CSS] 텍스트 속성으로 텍스트 꾸미기(family, size, weight, style, variant, align, decoration, color, letter-spacing, line-height) 본문

CSS _HTML_JavaScript/CSS

[CSS] 텍스트 속성으로 텍스트 꾸미기(family, size, weight, style, variant, align, decoration, color, letter-spacing, line-height)

Oli-Viaaaa 2023. 7. 25. 23:48

1. font-family

font-family 속성을 사용하면 글꼴을 지정할 수 있다.

속성값으로는 글꼴명을 적으면 되는데 쉼표(,)로 구분하고 1개 이상의 글꼴을 나열해 지정한다.

이때 한글로 된 글꼴이나 공백이 있는 글꼴명은 큰따옴표("")로 항상 감싸야 한다.

형식)
	font-family:<글꼴1>, <글꼴2>, ...<글꼴 유형>;

 

바탕체 글꼴과 타임스 뉴 로먼 글꼴을 적용하고 싶다면 아래와 같이 작성한다.

font-family:BatangChe, "Times New Roman", serif;

단 font-family 속성은 반드시 글꼴 유형을 작성하도록 권장한다. font-family 속성으로 명시한 글꼴을 불러오지 못할 경우를 대비해 다음과 같이 불러오려고 한 글꼴과 유사한 형태의 글꼴 유형을 마지막헤 항상 지정 해야 한다.

글꼴 유형 설명
s e r i f   삐침이 있는 명조 계열의 글꼴
s a n s - s e r i f   삐침이 없고 굵기가 일정한 고딕 계열의 글꼴
m o n o s p a c e   텍스트 폭과 간격이 일정한 글꼴
f a n t a s y   화려한 글꼴
c u r s i v e   손으로 쓴 것 같은 필기체 계열의 글꼴

 

 

 

2. font-size 속성

텍스트 크기를 변경학고 싶을 때 사용하는 속성으로 속성값은 단위를 포함한 크기를 넣는다

형식)
	font-size:<크기>;

기본 스타일 시트에 따로 텍스트 크기가 지정된 경우(hn 태그)가 아니면 일반적인 텍스트 크기는 16px다.

 

 

 

3. font-weight 속성

font-weight 속성은 텍스트의 굵기를 지정하는데 사용한다.

굵기를 나타내는 속성값에는 숫자 표기법과 키워드 표기법을 사용할 수 있다.

형식)
	font-weight:<숫자 표기법>|<키워드 표기법>;

 

숫자 표기법

숫자 100 단위로 텍스트 굵기를 표기하는 방법으로 100부터 900까지의 값을 사용한다.

100이 가장 얇고 900이 가장 굵게 표시된다.

font-weight:100; /* 최소 굵기 */
font-weight:900; /* 최대 굵기 */

 

키워드 표기법

텍스트 굵기를 키워드로 표시하는 방법으로 여기서 키워드는 lighter, normal, bold, bolder를 의미한다.

font-weight:lighter /* nomal, bold, bolder */

 

normal은 숫자 표기법에서 400과 같은 굵기이고, bold는 700과 같은 굵기다.

lighter와 bolder는 상대적인 값으로 lighter는 부모 요소의 굵기보다 얇게, bolder는 부모 요소의 굵기보다 굵게 지정된다. 

 

 

 

 

4. font-style 속성

font-style은 글꼴의 스타일을 지정할 때 사용한다.

형식)
	font-style:<속성값>;
속성값 설명
normal 기본 형태로 표시한다
italic 이탤릭체로 표시한다
oblique 기울임꼴로 표시한다

 

 

 

5. font-variant 속성

font-variant 속성은 영문 텍스트를 크기가 작은 대문자로 변경할때 사용한다

형식)
	font-variant:<속성값>;
속성값 설명
normal 텍스트를 변환하지 않는다.
small-caps 텍스트를 크기가 작은 대문자로 변환한다

 

font-variant 속성을 사용해 두 번째 p 태그만 변환해보면 아래와 같다

<style>
    .variant{
        font-variant:small-caps;
    }
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit.</p>
    <p class="variant">Lorem ipsum dolor sit.</p>
</body>

코드를 실행하면 두 번째 줄만 소문자 텍스트가 작은 크기의 대문자로 표시된다.  속성이 적용되지 않은 첫 번째 줄과 비교하면 텍스트 크기가 줄고 소문자가 대문자로 변한 것을 확인할 수 있다. 

 

 

 

6. color 속성

color 속성은 텍스트의 색상을 지정할 때 사용한다. 속성값에는 색상을 표현하는 값을 적으면 된다.

형식)
	color:<속성값>;

 

 

 

7. text-align 속성

text-align 속성은 텍스트를 정렬할때 사용한다.

형식)
	text-align:<속성값>;

 

사용하는 속성값은 아래와 같다

속성값 설명
l e f t   텍스트를 왼쪽에 정렬한다.
c e n t e r   텍스트를 중앙에 정렬한다.
r i g h t   텍스트를 오른쪽에 정렬한다.
j u s t i f y    텍스트를 양쪽에 정렬한다.

 

 

 

 

8. text-decoration 속성

text-decoration 속성은 텍스트를 꾸며 주기 위해 사용한다.

형식)
	text-decoration:<속성값>;

사용할 수 있는 속성값은 다음과 같다

속성값 설명
none 텍스트 장식을 모두 지운다.
line-through 텍스트 중간을 관통하는 선을 긋는다.
overline 텍스트 위에 선을 긋는다.
underline 텍스트 아래에 선을 긋는다.

 

실행하면 아래와 같은 결과를 볼 수 있다

 

 

 

9. letter-spacing 속성

letter-spacing 속성은 자간을 조절할때 사용한다. 속성값으로 normal 또는 크기를 넣을 수 있다.

normal을 사용하면 웹브라우저에서 정한 기본값을 적용한다.

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

코드를 실행하면 자간이 늘어나서 표시된다. 이때 속성값에 사용하는 크기를 너무 크게 잡으면

실행결과 처럼 읽기 불편할 정도로 자간이 벌어질 수 있으니 적절히 조절해야한다.

 

 

 

 

10. line-height 속성

line-height 속성은 텍스트 한 줄의 높이를 지정할 때 사용하는 속성이다.

형식)
	line-height:normal|<속성값>;

속성값으로 normal이나 숫자, 퍼센트, 크기 등을 넣을 수 있다.

속성값 설명
normal 웹 브라우저에서 정한 기본값을 적용한다.
숫자 현재 font-size 값에 입력한 숫자를 곱한 값을 적용한다.
퍼센트 현재 font-size 값에 입력한 비율을 곱한 값을 적용한다.
크기 입력한 크기를 적용한다.

 

line-height:normal; /* 웹 브라우저에서 정한 기본값, 보통 1.2 */
line-height:1;      /* 현재 font-size 값의 1배 */
line-height:1.5;    /* 현재 font-size 값의 1.5배 */
line-height200%     /* 현재 font-size 값의 2배 */
line-height:16px;

 

웹 브라우저에 표시되는 텍스트는 아래와 같이 구분한다.

font-size 속성은 말 그대로 글자 자체의 크기를 지정하는데

모든 텍스트는 웹 브라우저에 표시될 때 위쪽과 아래쪽으로 일정 크기의 여유 공간을 가지고 있다.

그리고 이러한 여유 공간을 전부 포함한 글줄 사이의 간격을 행간이라고 하며 line-height 속성을 통해 제어할 수 있다

 

line-height가 font-size 보다 작으면 윗줄과 아랫줄의 텍스트가 겹쳐 보이면서 가독성이 떨어질 수 있으니

line-height는 속성값을 항상 font-size 보다 크게 지정하는 것이 좋다

'CSS _HTML_JavaScript > CSS' 카테고리의 다른 글

[CSS] CSS 박스 모델을 구성하는 속성 다루기(border 영역)  (0) 2023.07.26
[CSS] CSS 박스 모델을 구성하는 속성 다루기(margin 영역)  (0) 2023.07.26
[CSS] CSS의 특징 살펴보기(기본 스타일 시트, 적용 우선순위와 개별성, 상속, 단위, 색상 표기법)  (0) 2023.07.25
[CSS] CSS 마무리 정리  (0) 2023.07.24
[CSS] CSS 가상 클래스 선택자 사용  (0) 2023.07.24
'CSS _HTML_JavaScript/CSS' Related Articles more