[CSS] CSS의 문자 스타일 속성을 알아보자!!

문자 Font

 

웹 페이지 제작에 있어 문자를 꾸미고 다루는 것은 매우 중요한 부분입니다.

오늘은 CSS에서 문자를 꾸미는 여러 방법에 대해 알아보겠습니다!

---

font-family

 

문자에 사용할 글꼴을 정하는 속성입니다.

글꼴의 이름이 한글인 경우는 따옴표로 감싸고, 여러 개의 글꼴이 있다면 쉼표로 구분합니다.

font-family의 속성값이 여러 개인 경우 순서대로 글꼴을 읽어 들입니다.

font-family: "나눔고딕", Arial, sans-serif;

 

font-size

 

문자의 크기를 정하는 속성입니다.

기본적인 문자의 크기는 16px이며, CSS에서 사용하는 단위는 아래와 같습니다.

 

px	해상도에 따라 상대적으로 달라지는 기본 단위입니다. font-size: 20px;
%	부모 요소의 글자 크기를 100%로 계산한 단위입니다. 특별한 설정이 없다면 16px이 100%가 됩니다. font-size: 200%;
em	부모 요소의 글자 크기를 100%로 계산한 100분의 1 단위입니다. 특별한 설정이 없다면 16px이 1em이 됩니다. font-size: 2.5em;
rem	rem은 부모 요소가 아닌 최상위 요소의 크기를 100%로 기준을 삼습니다. rem의  r은 'root'로 HTML 요소에서 지정한 글자 크기가 1rem입니다. font-size: 1.5rem;
vw, h	vw는 뷰포트 너비값의 100분의 1, vh는 뷰포트 높이값의 100분의 1 단위입니다. 뷰포트란 현재 화면에 보여지고 있는 다각형의 영역을 말하며, 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. font-size: 20vw;

 

font-weight

 

문자의 두께를 정하는 속성입니다. 다음과 같이 표현합니다. 해당 문서

font-weight: bold;	/*두껍게*/

normal	기본값이다. 숫자 400과 같다.
bold	문자의 두께를 기본값보다 두껍게 한다. 숫자 700과 같다.
bolder	부모 요소보다 두께를 굵게 한다.
lighter	부모 요소보다 두께를 얇게 한다.
number	문자의 두께를 normal과 bold 외의 숫자형으로 가중치를 설정한다.
initial	문자의 두께를 기본값으로 설정한다.
inherit	부모 요소의 문자 두께를 상속받는다.

 

font-style

 

문자의 기울기를 정하는 속성입니다. 주로 이텔릭체로 사용합니다.

font-style: italic;	/* font-style: normal;은 기울어지지 않은 기본 속성 */

 

font-variant

 

문자에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps)로 설정합니다.

작은 대문자 글꼴이란 문자의 기존 대문자보다 약간 작은 대문자를 의미하며, 대문자는 기존 크기 그대로 출력합니다.

 

 

line-height

 

line-height는 줄간격을 설정하는 속성입니다.

기본값은 1.0 ~ 1.2로 설정되어 있으며 숫자 단위, 길이 단위(px, em)나 퍼센트(%)로 설정합니다.

이는 부모 요소의 font-size를 기준으로 계산됩니다.

line-height: 120%	/* 부모 요소의 font-size가 16px이라면 line-height는 16px*120%인 19.2px이다.*/

 

font-

 

"font-"로 시작하는 속성들은 "font: "로 한 줄로 붙여 쓸 수 있습니다.

이런 경우 반드시 순서에 맞춰 써야 하며, 글자 크기와 글꼴은 생략할 수 없습니다.

/* font: [font-weight, font-style, font-variant][font-size/line-height][font-family]; */
font: 20px "나눔고딕" /* 두 속성은 생략할 수 없음 */

 

 

웹폰트

 

기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않습니다.

웹폰트를 사용하면 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 할 수 있습니다.

CSS는 글꼴 파일을 업로드해 사용하는 "@font-face" 방식과 이미 업로드 된 폰트를 "url"를 이용해 불러오는 방식이 있습니다.

 

@font-face 방식은 글꼴 파일을 업로드하여 사용하므로 글꼴 파일의 용량이 크면 페이지의 로딩 속도가 느려지거나, 용량이 작은 경우는 글자가 뭉개져 보일 수 있으므로 주의가 필요합니다.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  src: local('Open Sans'), local('OpenSans'), url('font/Open Sans.woff');}

 

다른 방식으로는 url을 통해 이미 업로드된 폰트를 연결하는 방식입니다.

대표적으로 구글 웹폰트가 있으며 사용법은 다음과 같습니다.

 

/* @import 방식 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

/* link 방식 */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

 

최근엔 @import 방식 보다 <link> 방식을 선호합니다. 이유는 다음과 같습니다.

@import를 많이 사용한다면, 익스플로러에서는 다운로드 순서가 다르게 작동하여 문제가 발생할 수 있으며, 병렬방식이 아닌 직렬방식으로 다운로드 하기때문에 전체 로딩시간이 길어지는 문제점이 있기에, 추천하는 방법은 아니다.

<link> 태그는 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 등 유지/보수에 용이하며, 직렬방식이 아닌 병렬방식으로 다운로드 하기에 로딩속도가 빠르고, CSS파일 여러개를 Link 방식으로 다운로드 하더라도 익스플로러에서 순서가 동일하게 작동한다. (관련 문서)

 

color

 

문자의 색상을 지정하는 속성입니다. 다음과 같이 표현합니다.

color: red;

색상명을 표현하는 방법은 여러 가지가 있습니다.

해당 색상을 의미하는 고유명사를 속성값으로 사용하거나, 00~ff 사이의 수치로 표현하는 16진수를 사용할 수도 있습니다. 자세한 건 관련 문서에서 색상을 소개하고 있습니다. (관련 문서)

또한 rgb(red, green, blue)나 hsl(hue, saturation, lightness)에 alpha 값을 추가한 rgba, hsla 등도 사용할 수 있습니다. (관련 문서)

 

letter-spacing, word-spaing

 

글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.

자간(letter-spacing)은 음수를 부여하면 원래 자간이 넓은 글꼴의 경우 더욱 밀착시킬 수 있습니다.

letter-spacing: -10px;
word-spacing: 20px;

 

text-decoration

 

문자에 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애는 속성입니다.

 

underline	밑줄
overline	윗줄
line-through	가운데줄
none	줄 없음

 

text-transform

 

대소문자의 변경을 입력하는 속성입니다.

 

uppercase	대문자
lowercase	소문자
capitalize	첫 글자만 대문자

 

text-shadow

 

text-shadow는 그래픽 프로그램 없이 글자에 그림자를 주는 속성입니다.

text-shadow: 6px 7px 2px rgba(0,0,0,20);

부여되는 속성의 순서는 다음과 같습니다.

 

6px	그림자가 원본에서 떨어지는 가로 거리
7px	그림자가 원본에서 떨어지는 세로 거리
2px	그림자가 흐릿하게 퍼지는 정도(쓰지 않으면 생략 가능)
rgba	그림자의 색상(다른 색상명으로도 가능하다)

 

위의 text-shadow의 적용 예시입니다.

 

See the Pen CSS_text-shadow by leeyanggoo (@leeyanggoo) on CodePen.