Etc2

[CSS] 폰트에 효과주기(font-size, font-weight, font-style 등)

ㅣ굴굴ㅣ 2022. 2. 3. 22:33
반응형

티스토리 스킨을 수정할 때 자주 사용하는 기능 중 하나인 폰트 스타일(font style)에 대해 정리해두려고 합니다. 폰트를 키우거나 줄이는 폰트사이즈(size), 폰트를 굵게(bold) 만들거나, 이탤릭체(italic)로 표기하거나, 밑줄(underline)을 긋는 등과 같이 여러가지로 폰트에 효과를 줄 수 있습니다.

 

font와 관련된 속성에는 font-size, font-weight, font-style 등이 있습니다.

 

1. 폰트 사이즈 효과주기

class명이 abc인 부분의 폰트 크기를 10px로 하고 싶다면 다음과 같이 .클래스명 {font-size: 10px;}의 코드를 CSS편집화면에 넣어주시면 됩니다.

.abc{font-size: 10px;}

만약 h3 태그는 폰트 크기를 16px로 하고 싶다면 다음과 같이 h3 {font-size: 16px;}의 코드를 CSS편집화면에 넣어주시면 됩니다.

h3{font-size: 16px;}

 

2. 폰트를 굵게 만들기(bold체)

마찬가지로 가령 class명이 abc인 부분의 폰트를 굵게 만들고 싶다면 다음과 같이 .클래스명 {font-weight: bold;}의 코드를 CSS편집화면에 넣어주시면 됩니다.

.abc{font-weight: bold;}

font-weight의 속성값으로는 bold, bolder, normal, lighter 등이 있습니다.

 

3. 폰트를 이탤릭체로 만들기

class명이 abc인 부분의 폰트를 이탤릭체로 만들고 싶다면 다음과 같이 .클래스명 {font-style:italic;}의 크도를 CSS편집화면에 넣어주시면 됩니다.

.abc{font-style: italic;}

font-style의 속성값으로는 normal(일반적인 글씨체), italic(이탤릭체), oblique(기울임체-거의 사용안함)가 있습니다.

반응형