c05. CSS 텍스트와 폰트 프로퍼티

CSS 텍스트와 폰트 프로퍼티

<style>
body {color: SlateGray;}
	/*텍스트 색상 프로퍼티 (color property) 를 페이지에 적용하려면 body selector 에 정의해 줍니다.*/
h1 {color: green; text-align: center; text-decoration: overline;}
	/*텍스트 정렬 프로퍼티 (text-align property) 는 텍스트의 수평 정렬을 설정 하는데 사용합니다.*/
	/*왼쪽, 오른쪽, 가운데 (centered), 그리고 균등배분 (justified) 할 수 있습니다.*/
h2 {text-align: left; text-decoration: line-through;}
	/*텍스트 데코레이션 프로퍼티 (text-decoration property) 는 텍스트에 데코레이션을 설정하거나 제거할 때 사용합니다.*/
h3 {text-align: right; text-decoration: underline;}
a {text-decoration: none;}
	/*데코레이션 프로퍼티 값이 text-decoration: none; 이면 링크 기능의 밑줄을 제거하게 됩니다.*/
</style>

<h1>머리글 1 (가운데)</h1>
<h2>머리글 2 (왼쪽)</h2>
<h3>머리글 3 (오른쪽)</h3>
<p>이 태그는 일반적인 문단 태그인데  텍스트의 색상이 회색이 되었습니다.</p>
<p>페이지의 기본 텍스트 색상은 body 태그의 selector 에 정의된 색상을 갖게 됩니다.</p>
<p>여기서 a 태그의 링크는 밑줄이 없습니다. <a href="http://www.example.com/" target="_blank">example.com</a></p>

머리글 1 (가운데)

머리글 2 (왼쪽)

머리글 3 (오른쪽)

이 태그는 일반적인 문단 태그인데 텍스트의 색상이 회색이 되었습니다.

페이지의 기본 텍스트 색상은 body 태그의 selector 에 정의된 색상을 갖게 됩니다.

여기서 a 태그의 링크는 밑줄이 없습니다. example.com

---

CSS 글꼴 프로퍼티 (CSS font property) 는 활자체 (font family), 굵기 (boldness), 크기 (size) 를 정의합니다.

글꼴 프로퍼티 (font-family property) 는 몇 개의 글꼴 이름을 동시에 가지게 되는데, 이는 "백업 또는 폴백 (fallback)" 이라고 부르는 시스템 때문입니다. 

백업 또는 폴백 (fallback) 시스템을 갖는 이유는, 브라우저가 첫 번째의 글꼴 (font) 를 지원하지 않으면, 그 다음 폰트, 또 그 다음 폰트를 시도하기 위해서 입니다.

앞에는 사용자가 원하는 폰트를 넣고, 맨 뒤에는 일반적인 글꼴을 넣습니다. 이렇게 하면 브라우저가 폰트가 없을 경우 유사한 폰트를 선택하게 할 수 있습니다.

글꼴 (font family) 의 이름이 몇 단어 이상으로 길다면, "Times New Roman" 처럼 인용 마크 ("") 로 묶어 주어야 합니다.

글꼴 간에는 쉼표(,) 로 구분합니다. 아래 예를 참조합니다.

영어 문자에서의 일반화된 글꼴 (generic family) 은 크게 3 종류로 구별 할 수 있습니다.

<style>
p.serif {font-family: "Times New Roman", Times, serif;}
	/*셔리프 글꼴 (Serif font) 는 문자의 끝에 작은 선을 갖고 있습니다.*/
p.sans-serif {font-family: Arial, Helvetica, sans-serif;}
	/*산세리프체 (Sans-serif) 에서 샌즈 (Sans) 는 무엇이 없는 이라는 의미입니다. 즉 문자의 끝에 작은 선이 없는 글자체 입니다.*/
p.monospace {font-family: Fixedsys, Monospace;}
	/*모노스페이스 글자 (Monospace characters) 는 글자들이 모두 동일한 폭을 갖습니다.*/
p.italic {font-style: italic;}
	/*글꼴-스타일 프로퍼티 (font-style property) 로 이탤릭체 를 지정할 수 있습니다.*/
p.thick {font-weight: bold;}
p.normal {font-variant: normal;}
p.small {font-variant: small-caps;}
	/*소문자를 입력하면, 작은 대문자로 표시합니다.*/
p {font-size: 1.5em;}
</style>
<p class="serif">Times, serif font.</p>
<p class="sans-serif italic normal">Arial, Helvetica, sans-serif font.</p>
<p class="monospace italic thick small">Fixedsys, Monospace, small font.</p>

Times, serif font.

Arial, Helvetica, sans-serif font.

Fixedsys, Monospace, small font.

---

글꼴-크기 프로퍼티 (font-size property) 로 텍스트의 크기를 지정합니다.

텍스트 크기를 관리하는 것은 웹 디자인에서 매우 중요합니다. 그러나 우선 적당한 HTML 태그를 먼저 사용해야 합니다.

<h1> 에서 <h6>은 머리글 용으로, 또 <p> 태그는 문단용으로 사용합니다.

글꼴 크기를 별도로 지정하지 않으면, 기본 크기로 텍스트에 16px (16px=1em) 이 적용됩니다.

사용자가 브라우저 메뉴에서 텍스트 크기 조절 할수 있게 하려면, 픽셀 (pixel) 대신에 em 으로 지정하면 됩니다.

1 em 은 현재의 글꼴 크기 라는 의미인데, 브라우저의 텍스트 기본 크기가 16px 이므로 일반적으로 1 em 은 16px 이 될 것입니다.

---

[광고] Udemy 동영상 강의로 보기