CSS - Text

폰트 종류와 웹 폰트

폰트와 관련된 프로퍼티는 크게 폰트 크기(font-size), 폰트 종류(font-family), 폰트 형태(font-weight)가 있습니다.

font - family

font-family를 통해 원하는 폰트의 종류를 지정할 수 있습니다.

font-family: '폰트이름1' '폰트이름2'; 

띄어쓰기 또는 하이픈(-)이 들어간 폰트명의 경우 따옴표를 사용하여 하나의 폰트명임을 명시해야 합니다.

/* ✅ 올바른 한 단어 폰트 이름 */
font-family : Arial;
/* ✅ 올바른 한 단어 폰트 이름 */
font-family : 'Arial';

/* ❌ 잘못된 두 단어 이상 폰트 이름 */
font-family : Cute Font;
/* ✅ 올바른 두 단어 이상 폰트 이름 */
font-family : 'Cute Font';

/* ❌ 잘못된 하이픈(-)이 들어간 폰트 이름 */
font-family : Noto-sans;
/* ✅ 올바른 하이픈(-)이 들어간 폰트 이름 */
font-family : 'Noto-sans';

모든 이용자의 기기에 동일한 폰트가 없을 수도 있기 때문에 폰트를 여러 개를 지정하여 앞 순서에 위치한 폰트부터 차례로 적용합니다. 즉, 첫번째 폰트가 없으면 두 번째 폰트를 적용하는 방식입니다.

/* Cute Font가 없는 경우 Arial 적용 */
font-family : 'Cute Font', Arial, cursive;
/*                 ❌       ✅          */

따라서 마지막 폰트는 보편적인 폰트를 두어 문제가 없도록 해야 합니다. 보편적인 일반 글꼴은 Sans-serif, Serif, Cursive, Fantasy, Monospace 등 입니다/

웹 폰트(Web Font)

웹 폰트는 링클르 통해 폰트를 불러오는 방식을 뜻합니다. 보통 구글 폰트를에서 원하는 폰트를 찾아서 적용시킵니다.

웹 폰트는 <link>와 @import 두 가지 방식으로 불러올 수 잇습니다. 이 중 @import 방식을 이용하여 알아보도록 하겠습니다.
먼저 link 태그는 HTML에 CSS 파일을 연결할 때와 동일하게 <link>태그를 이용하여 폰트를 가져옵니다.

반면 @import를 클릭하면 import 방식으로 폰트를 가져올 수 있습니다. 이는 CSS 파일에 <style>태그를 제거하고 @import를 바로 작성하거나 HTML 파일에 <style> 태그를 이용하여 추가할 수 있습니다.

사용법은 다음과 같습니다/

@import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap');

h1, p {
	font-family: 'Nanum Pen Script', cursive;
}

폰트의 크기와 형태

font-style 과 font-weight에 대해 알아보도록 하겠습니다. 이탤릭체나 Bold는 HTML보다 CSS를 통해서 사용할 것을 권장하는 데 이번에 이러한 것에 대하여 알아보도록 하겠습니다.

font-style

font-style로 가능한 값은 normal, italic, oblique 등이 있습니다.
normal 은 말그대로 기본 값이며 기본 글자체입니다. italic과 oblique은 둘 다 글자를 기울인 스타일이지만 italic은 이탤릭체가 디자인되어 있는 폰트에서 사용하고, oblique는 이탤릭체 디자인이 없더라도 글자를 무조건 기울여 표현한다는 차이가 있습니다.

@import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap');

h1, p {
	font-family: 'Nanum Pen Script', cursive;
}
h1{
	font-style: italic;
}

font-weight

font-weight는 폰트 굵기를 지정할 때 사용합니다. bold 혹은 100단위의 숫자값을 사용 가능합니다. 숫자 값은 100부터 900까지 가능하며, 보통 normal 폰트가 400, bold 폰트가 700의 값을 가집니다.

/* 아래의 두 결과는 동일 */
font-weight: 400;
font-weight: normal;

/* 아래의 두 결과는 동일 */
font-weight: 700;
font-weight: bold;

한편 font 관련 프로퍼티를 일일이 적용하는 것은 꽤 불편한 작업일 것입니다. 이럴때는 font 프로퍼티를 쓰면 모든 과정을 한번에 설정할 수 있습니다.

font: font-style font-weight size font-family;

여기서 font-style, font-weight, font-size, font-family를 순서대로 띄어쓰기로 구분하여 작성하면 되며 font-style과 font-weight는 생략해도 무방합니다.

/* ✅ font: font-style font-weight size font-family */
font: italic bold 24px 'Nanum Pen Script', cursive;

/* ✅ font: size font-family */
font: 24px 'Nanum Pen Script', cursive;

텍스트 정렬

이번에는 텍스트 정렬과 관련된 기능을 확인해보겠습니다.

text-align

text-align 프로처티는 텍스트 좌, 우, 중앙 정렬입니다. 텍스트의 가로 맞춤을 설정하는 데 사용돕니다 값으로는 left, center, right를 사용할 수 있습니다. 이러한 정렬 기준은 본인이 기준입니다.

<h1>텍스트 정렬</h1>
<p id="right">오른쪽 정렬</p>
<p id="middle">가운데 정렬</p>
<p id="left">왼쪽 정렬</p>

#right {
	text-align: right;
}
#middle {
	text-align: center;
}
#left {
	text-align: left;
}

justity라는 값은 좌우로 띄어쓰기를 늘려 붙입니다. 신문기사나 잡지 등에서 볼 수 있는 형식입니다.

<div>
	text-align: left
	<p class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>
<div>
	text-align: justify
	<p class="justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>

div {
	background: skyblue;
}
div > p {
	width: 50%;
	background: pink;
}
.left {
	text-align: left;
}
.justify {
	text-align: justify;
}

line-height

line-height는 문장 사이의 간격을 조정하는 프로퍼티입니다.

<div>
	line-height ❌
	<p class=line-height_none>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>
<div>
	line-height ✅ - 숫자 값
	<p class="line-height_numb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>
<div>
	line-height ✅ - px 값
	<p class="line-height_px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>

.line-height_none {
	background: skyblue;
}
.line-height_numb {
	background: pink;
	line-height: 2;
}
.line-height_px {
	background: lemonchiffon;
	line-height: 28px;
}

여기서 단위 없는 수사 값은 해당 요소의 font-size를 기준 한 배수로 높이를 조정합니다. 또한 line-height는 line 사이의 height가 아닌 말 그대로 line의 height를 뜻합니다.

letter-spacing

letter-spacing은 자간, 즉 각 글자 사이의 간격을 조정합니다. letter-spacing: 5px;을 추가하면 각 글자 사이 간격이 늘어나는 것을 확인할 수 있습니다.

<div>
	letter-spacing ❌
	<p class=letter-spacing_none>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>
<div>
	letter-spacing ✅
	<p class="letter-spacing">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>

.letter-spacing_none {
	background: skyblue;
}
.letter-spacing {
	background: pink;
	letter-spacing: 5px;
}

text-indent

text-indent는 문단의 시작부에 들여쓰기를 지정합니다.

<div>
	text-indent ❌
	<p class=text-indent_none>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>
<div>
	text-indent ✅
	<p class="text-indent">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>

.text-indent_none {
	background: skyblue;
}
.text-indent {
	background: pink;
	text-indent: 16px;
}

출처)

groom-edu

해당 내용은 k-digital credit 구름 강의 내용을 보고 정리한 내용입니다.